Nella sezione Opportunità del report Lighthouse sono elencati tutti i fogli di stile con CSS inutilizzato con un potenziale risparmio di almeno 2 KiB. Rimuovi il CSS inutilizzato per ridurre i byte non necessari consumati dall'attività di rete:
In che modo il CSS inutilizzato rallenta le prestazioni
L'utilizzo di un tag <link> è un modo comune per aggiungere stili a una pagina:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" />
...
</head>
</html>
Il file main.css scaricato dal browser è noto come foglio di stile esterno, in quanto viene memorizzato separatamente dal codice HTML che lo utilizza.
Per impostazione predefinita, un browser deve scaricare, analizzare ed elaborare tutti i fogli di stile esterni rilevati prima di poter visualizzare o visualizzare qualsiasi contenuto sullo schermo di un utente. Non avrebbe senso che un browser tenti di visualizzare i contenuti prima che i fogli di stile siano stati elaborati, in quanto i fogli di stile potrebbero contenere regole che influiscono sullo stile della pagina.
Ogni foglio di stile esterno deve essere scaricato dalla rete. Questi viaggi extra in rete possono aumentare notevolmente il tempo di attesa prima di poter visualizzare i contenuti sullo schermo.
Il codice CSS inutilizzato rallenta anche la creazione dell'albero di rendering in un browser. L'albero di rendering è simile all'albero DOM, ma include anche gli stili per ciascun nodo. Per creare la struttura di rendering, un browser deve percorrere l'intero albero DOM e verificare quali regole CSS si applicano a ciascun nodo. Maggiore è il numero di CSS inutilizzati, maggiore è il tempo che un browser potrebbe potenzialmente dedicare al calcolo degli stili per ciascun nodo.
Come rilevare il codice CSS inutilizzato
La scheda Copertura di Chrome DevTools può aiutarti a scoprire CSS critici e non critici. Consulta la sezione Visualizzare i CSS usati e inutilizzati con la scheda Copertura.
Incorpora CSS critici e posticipa i CSS non critici
Analogamente a quanto accade per l'incorporamento del codice 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.
Valuta la possibilità di automatizzare il processo di estrazione e incorporamento del codice CSS "Above the Fold" utilizzando lo strumento Critico.
Scopri di più nella pagina Rimandare i CSS non fondamentali.
Indicazioni specifiche per lo stack
Drupal
Valuta la possibilità di rimuovere le regole CSS inutilizzate. Collega solo le librerie Drupal necessarie alla pagina o al componente in una pagina. Per maggiori dettagli, consulta la sezione Definire una libreria.
Joomla
Valuta la possibilità di ridurre o cambiare il numero di estensioni di Joomla che caricano CSS inutilizzati nella tua pagina.
WordPress
Valuta la possibilità di ridurre, o cambiare, il numero di plug-in di WordPress che caricano file CSS inutilizzati nella tua pagina.