Risorse che bloccano il rendering

Silktide verifica la presenza di fogli di stile e script che il browser deve scaricare completamente prima di poter mostrare qualsiasi elemento della pagina. Ognuno di questi costringe i visitatori a fissare uno schermo vuoto un po' più a lungo.

Per impostazione predefinita, un foglio di stile o uno script indicato nella parte iniziale della pagina blocca il rendering: il browser non visualizza nulla finché il file non è arrivato, perché il file potrebbe modificare l'aspetto o il comportamento di ogni elemento.

Perché è importante

I momenti vuoti prima della prima visualizzazione della pagina sono quelli in cui i visitatori decidono se aspettare. Ogni file che blocca il rendering aggiunge un viaggio di andata e ritorno sulla rete a quel tempo di attesa, e i ritardi si accumulano rapidamente sulle connessioni mobili: una manciata di file bloccanti può lasciare bianca per diversi secondi una pagina altrimenti veloce.

La maggior parte di questi blocchi è inutile. In genere, solo una piccola parte del di una pagina è necessaria per visualizzare la prima schermata, e la maggior parte del non deve essere eseguita prima che la pagina venga visualizzata.

Come risolvere il problema

Carica gli script senza bloccare il rendering aggiungendo defer (oppure async per gli script indipendenti, come quelli per l'analisi):

<!-- Problema: blocca il rendering finché non viene scaricato ed eseguito -->
<script src="app.js"></script>

<!-- Risolto: viene scaricato in parallelo ed eseguito dopo l'analisi della pagina -->
<script src="app.js" defer></script>

Inserisci direttamente nella pagina la piccola quantità di CSS necessaria per la prima schermata e carica i fogli di stile completi senza bloccare il rendering.
Assegna un attributo media ai fogli di stile che si applicano solo in determinate situazioni (ad esempio media="print"), in modo che smettano di bloccare il rendering in tutti gli altri casi.
Riduci ciò che può bloccare il rendering: rimuovi gli stili e gli script inutilizzati e mantieni ridotte le dimensioni del resto: consulta Minificazione CSS e JavaScript minificato.

Come Silktide esegue questo controllo

Carica la pagina in un browser reale, utilizzando il tipo di dispositivo, la velocità di connessione e la posizione di test configurati per i test di velocità.
Identifica ogni foglio di stile e script che ha bloccato la prima visualizzazione della pagina.
Stima il tempo per cui ciascuno di essi ha ritardato il rendering e segnala ogni file con il risparmio stimato.
Valuta la pagina in base al tempo totale che potrebbe essere risparmiato: un tempo di circa 100 millisecondi comporta una riduzione della valutazione, mentre 200 millisecondi o più corrispondono a una valutazione insufficiente.

Risoluzione dei problemi

Il CSS non deve bloccare il rendering?

Il foglio di stile che gestisce la prima schermata sì: è intenzionale, così i visitatori non vedono mai contenuti privi di stile. La soluzione non è rimuovere il CSS, ma ridurre ciò che blocca il rendering: inserisci nella pagina la parte critica e carica il resto in modo non bloccante.

Il file bloccante è uno script di terze parti

I tag manager, i font e i widget di chat sono tra i responsabili più frequenti. Nella maggior parte dei casi funzionano correttamente con defer o async: verifica le istruzioni aggiornate del fornitore per l'inserimento, che spesso includono già uno di questi attributi.