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 di blocco del rendering incorporando le risorse critiche, posticipando quelle non critiche e rimuovendo tutto ciò che non viene utilizzato.
Quali URL vengono contrassegnati come risorse che bloccano il rendering?
Lighthouse segnala due tipi di URL di blocco del rendering: script e fogli di stile.
Un tag <script> che:
- Si trova nella
<head>del documento. - Non ha un attributo
defer. - Non ha un attributo
async.
Un tag <link rel="stylesheet"> che:
- Non ha un attributo
disabled. Quando 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 elemento di blocco del rendering.
Come identificare le risorse critiche
Il primo passo per ridurre l'impatto delle risorse di blocco del rendering è 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 la quantità di codice utilizzata rispetto a quella caricata:
Puoi ridurre le dimensioni delle pagine inviando solo il codice e gli stili di cui hai bisogno. Fai clic su un URL per esaminare il file nel riquadro Risorse. Gli stili nei file CSS e il codice nei file JavaScript sono contrassegnati in due colori:
- Verde (critico): stili necessari per il primo rendering; codice fondamentale per la funzionalità di base della pagina.
- Rosso (non critico): stili che si applicano a contenuti non immediatamente visibili; codice non utilizzato nelle funzionalità principali della pagina.
Come eliminare gli script di blocco del rendering
Una volta identificato il codice critico,
sposta questo codice dall'URL di blocco del rendering a un tag script incorporato nella pagina HTML.
Quando la pagina viene caricata, avrà tutto il necessario per gestire le funzionalità principali.
Se in un URL di blocco del rendering è presente codice non critico,
puoi mantenerlo nell'URL
e poi contrassegnare l'URL con gli attributi async o defer
(vedi anche Aggiungere interattività con JavaScript).
Il codice che non viene utilizzato deve essere rimosso (vedi Rimuovi il codice inutilizzato).
Come eliminare i fogli di stile che bloccano il rendering
In modo simile all'incorporamento del codice in un tag <script>,
incorpora gli stili critici necessari per il primo rendering
all'interno di un blocco <style> all'head della pagina HTML.
Poi carica in modo asincrono il resto degli stili utilizzando il link preload
(vedi Differire 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 di blocco del rendering è dividere questi stili in file diversi, organizzati in base alla query supporti. Poi aggiungi un attributo media a ogni link del foglio di stile. Durante il caricamento di una pagina, il browser blocca solo la prima visualizzazione per recuperare i fogli di stile che corrispondono al dispositivo dell'utente (vedi CSS che bloccano il rendering).
Infine, ti consigliamo di minimizzare il CSS per rimuovere spazi bianchi o caratteri aggiuntivi (vedi Minimizzare il CSS). In questo modo, invii agli utenti il bundle più piccolo possibile.
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 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 asset 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.