La sezione opportunità di Lighthouse elenca tutte le URL che bloccano la visualizzazione iniziale di una pagina web. Per ridurre l’impatto negativo, si rinviano l’apertura di queste url rimuovendo qualsiasi altra cosa non viene utilizzata.
Lighthouse segnala tre tipi di URL che bloccano il rendering: script, fogli di stile e importazioni HTML
<script> che:<head> del documento.defer.async.<link rel="stylesheet"> che:disabled. Quando questo attributo è presente, il browser non scarica il foglio di stile.media che corrisponde al dispositivo dell’utente.<link rel="import"> che:async.Il primo passo per ridurre l’impatto delle risorse che bloccano il rendering è identificare quali di queste risorse sono realmente critiche e quali no. Utilizzare 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 tue pagine inviando solo il codice e gli stili di cui hai veramente gbisogno. Fai clic su un URL per ispezionare quel file nel pannello Sorgenti. Gli stili nei file CSS e il codice nei file JavaScript sono contrassegnati in due colori:
Dopo aver identificato il codice critico, sposta tale codice dall’URL di blocco del rendering in un tag di script incorporato nella tua pagina HTML. Quando la pagina viene caricata, avrà ciò di cui ha bisogno per gestire la funzionalità principale della pagina.
Se c’è un codice in un URL che blocca il rendering che non è critico, puoi tenerlo nell’URL e quindi contrassegnare l’URL con attributi async o defer (vedi anche Aggiunta di interattività con JavaScript ).
Il codice che non viene affatto utilizzato dovrebbe essere rimosso (consultare Rimuovere il codice non utilizzato ).
Simile al codice incorporato in un tag <script> , incorpora gli stili critici richiesti per il primo disegno all’interno di un blocco <style> all’inizio della pagina HTML. Quindi carica il resto degli stili in modo asincrono usando il link di preload (vedi Rinvia CSS inutilizzato ).
Prendi in considerazione l’idea di automatizzare il processo di estrazione e integrazione del CSS “Above the Fold” utilizzando lo strumento Critico .
Un altro approccio per eliminare gli stili di blocco del rendering è quello di suddividere tali stili in file diversi, organizzati per media query. Quindi aggiungere un attributo multimediale a ciascun collegamento al foglio di stile. Quando si carica una pagina, il browser blocca solo il primo disegno per recuperare i fogli di stile che corrispondono al dispositivo dell’utente (vedere CSS di blocco del rendering ).
Infine, vorrai minimizzare il tuo CSS per rimuovere eventuali spazi o caratteri extra (vedi Minify CSS ). Ciò garantisce che stai inviando il pacchetto più piccolo possibile ai tuoi utenti.
Per le importazioni HTML non critiche, contrassegnarle con l’attributo async . Come regola generale, l’ async dovrebbe essere usato il più possibile con le importazioni HTML.
< link rel = " import " href = " myfile.html " async >