La sezione Opportunità del report Lighthouse elenca tutti gli URL che bloccano la prima visualizzazione della pagina. L'obiettivo è ridurre l'impatto di questi URL che bloccano la visualizzazione incorporando risorse fondamentali, rinviando le risorse non critiche e rimuovendo tutto ciò che non viene utilizzato.
Quali URL vengono segnalati come risorse che bloccano la visualizzazione?
Lighthouse segnala due tipi di URL che bloccano la visualizzazione: script e fogli di stile.
Un tag <script> che:
- Si trovi nel campo
<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 corrisponde specificatamente al dispositivo dell'utente.media="all"è considerato blocco della visualizzazione.
Come identificare le risorse critiche
Il primo passo per ridurre l'impatto delle risorse che bloccano la visualizzazione è identificare ciò che è critico e ciò che non lo è. Utilizza la scheda Copertura in Chrome DevTools per identificare CSS e JS non fondamentali. Quando carichi o esegui una pagina, la scheda indica quanto codice è stato utilizzato e quanto è stato caricato:
Puoi ridurre le dimensioni delle pagine spedendo solo il codice e gli stili necessari. Fai clic su un URL per esaminare il file nel riquadro Origini. Gli stili nei file CSS e il codice nei file JavaScript sono contrassegnati con due colori:
- Verde (critico): stili richiesti per la prima visualizzazione; codice fondamentale per la funzionalità di base della pagina.
- Rosso (non critico): stili che vengono applicati a contenuti non immediatamente visibili; codice non utilizzato nella funzionalità di base della pagina.
Come eliminare gli script che bloccano la visualizzazione
Una volta identificato il codice critico, spostalo dall'URL di blocco del rendering a un tag script incorporato nella pagina HTML.
Quando la pagina si carica, avrà ciò di cui ha bisogno per gestire la funzionalità di base della pagina.
Se un URL che blocca la visualizzazione contiene codice non critico, puoi tenerlo nell'URL e poi contrassegnarlo con gli attributi async o defer (consulta anche Aggiunta di interattività con JavaScript).
Il codice che non viene utilizzato deve essere rimosso (consulta la sezione Rimuovere il codice inutilizzato).
Come eliminare i fogli di stile che bloccano il rendering
Analogamente al codice incorporato in un tag <script>, gli stili critici incorporati sono necessari per la prima colorazione all'interno di un blocco <style> in head della pagina HTML.
Dopodiché carica gli altri stili in modo asincrono utilizzando il link preload (consulta la sezione Rimandare i CSS inutilizzati).
Potresti automatizzare il processo di estrazione e incorporamento del codice CSS "Above the Fold" utilizzando lo strumento Critico.
Un altro approccio per eliminare gli stili che bloccano la visualizzazione è suddividerli in diversi file, organizzati per query supporti. Quindi aggiungi un attributo multimediale a ogni link del foglio di stile. Durante il caricamento di una pagina, il browser blocca solo la prima colorazione per recuperare i fogli di stile corrispondenti al dispositivo dell'utente (consulta la sezione CSS di blocco del rendering).
Infine, ti consigliamo di minimizzare il codice CSS per rimuovere eventuali spazi vuoti o caratteri aggiuntivi (consulta la sezione Minimizza CSS). In questo modo avrai la certezza di inviare il bundle più piccolo possibile ai tuoi utenti.
Indicazioni specifiche per lo stack
AMP
Utilizza strumenti come lo strumento di ottimizzazione AMP per eseguire il rendering lato server dei layout AMP.
Drupal
Potresti utilizzare un modulo per incorporare codice JavaScript e CSS fondamentale o potenzialmente caricare asset in modo asincrono tramite JavaScript, ad esempio il modulo Aggregazione CSS/JS avanzata.
Joomla
Esistono diversi plug-in Joomla che possono aiutarti a incorporare asset critici o a rimandare risorse meno importanti.
WordPress
Esistono diversi plug-in WordPress che possono aiutarti ad incorporare asset critici o a rimandare risorse meno importanti.