Nella sezione Opportunità del report Lighthouse sono elencati tutti gli URL che bloccano la prima visualizzazione della pagina. L'obiettivo è ridurre l'impatto di questi URL che bloccano il rendering incorporando le risorse critiche, rimandando quelle non critiche e rimuovendo gli elementi inutilizzati.
Quali URL vengono contrassegnati come risorse di blocco della visualizzazione?
Lighthouse segnala due tipi di URL che bloccano il rendering: script e fogli di stile.
Un tag <script> che:
- Si trova nel
<head>del documento. - Non ha un attributo
defer. - Non ha un attributo
async.
Un tag <link rel="stylesheet"> che:
- Non ha un attributo
disabled. Se questo attributo è presente, il browser non scarica il foglio di stile. - Non ha un attributo
mediache corrisponda specificamente al dispositivo dell'utente.media="all"è considerato un blocco di rendering.
Come identificare le risorse critiche
Il primo passo per ridurre l'impatto delle risorse che bloccano il rendering consiste nell'identificare quelle critiche e quelle non critiche. Utilizza la scheda Copertura in Chrome DevTools per identificare CSS e JS non critici. Quando carichi o esegui una pagina, la scheda indica quanto codice è stato utilizzato rispetto a quanto è stato caricato:
Puoi ridurre le dimensioni delle pagine inviando solo il codice e gli stili necessari. Fai clic su un URL per ispezionare il file nel riquadro Origini. Gli stili nei file CSS e il codice nei file JavaScript sono contrassegnati in due colori:
- Verde (critico): stili necessari per la prima visualizzazione; codice fondamentale per la funzionalità di base della pagina.
- Rosso (non critico): stili applicati ai contenuti non immediatamente visibili; codice non utilizzato nella funzionalità di base della pagina.
Come eliminare gli script che bloccano il rendering
Una volta identificato il codice critico,
rimuovilo dall'URL che blocca il rendering in un tag script in linea nella pagina HTML.
Quando la pagina viene caricata, avrà tutto ciò di cui ha bisogno per gestire le funzionalità di base della pagina.
Se in un URL che blocca il rendering è presente del codice non critico, puoi mantenerlo nell'URL e poi contrassegnarlo con gli attributi async o defer (vedi anche Aggiunta di interattività con JavaScript).
Il codice che non viene utilizzato deve essere rimosso (vedi Rimuovere il codice inutilizzato).
Come eliminare gli stili che bloccano il rendering
Come per l'incorporamento del codice in un tag <script>,
incorpora gli stili critici necessari per la prima colorazione
all'interno di un blocco <style> nella parte head della pagina HTML.
Carica poi il resto degli stili in modo asincrono utilizzando il link preload (vedi Rimandare il CSS inutilizzato).
Valuta la possibilità di automatizzare il processo di estrazione e incorporamento del CSS "Above the Fold" utilizzando lo strumento Critical.
Un altro approccio per eliminare gli stili che bloccano il rendering consiste nel suddividerli in file diversi, organizzati per query multimediali. Aggiungi un attributo media a ogni link del foglio di stile. Quando carica una pagina, il browser blocca solo la prima visualizzazione per recuperare i fogli di stile corrispondenti al dispositivo dell'utente (vedi CSS che bloccano il rendering).
Infine, ti consigliamo di minimizzare il CSS per rimuovere gli spazi vuoti o i caratteri aggiuntivi (vedi Minimizzare il CSS). In questo modo, invii ai tuoi utenti il bundle più piccolo possibile.
Indicazioni specifiche per lo stack
AMP
Usa strumenti come l'ottimizzatore AMP per i layout AMP con rendering lato server.
Drupal
Potresti usare un modulo per incorporare codice JavaScript e CSS fondamentale e usare l'attributo defer per codice JavaScript e CSS non fondamentale.
Joomla
Esistono diversi plug-in Joomla che possono esserti utili per incorporare le risorse di importanza critica o rimandare le risorse meno importanti.
WordPress
Esistono diversi plug-in di WordPress che possono esserti utili per incorporare le risorse di importanza critica o rimandare le risorse meno importanti.