Nella sezione Opportunità del report Lighthouse sono elencati tutti i fogli di stile con CSS inutilizzati 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 il rendimento
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,
perché viene archiviato separatamente dal codice HTML che lo utilizza.
Per impostazione predefinita, un browser deve scaricare, analizzare ed elaborare tutti gli stili di fogli di stile esterni che incontra prima di poter visualizzare o eseguire il rendering di qualsiasi contenuto sullo schermo di un utente. Non avrebbe senso che un browser tentasse di visualizzare i contenuti prima che i fogli di stile siano stati elaborati, perché 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 in rete aggiuntivi possono aumentare notevolmente il tempo che gli utenti devono attendere prima di vedere contenuti sui loro schermi.
Il CSS inutilizzato rallenta anche la costruzione della struttura di rendering da parte di un browser. L'albero di rendering è simile all'albero DOM, tranne per il fatto che include anche gli stili per ogni nodo. Per costruire la struttura di rendering, un browser deve esaminare l'intera struttura DOM e controllare quali regole CSS si applicano a ciascun nodo. Maggiore è il codice CSS inutilizzato, più tempo potrebbe essere necessario a un browser per calcolare gli stili per ogni nodo.
Come rilevare il CSS inutilizzato
La scheda Copertura di Chrome DevTools può aiutarti a scoprire CSS fondamentali e non critici. Consulta Visualizzare il CSS utilizzato e inutilizzato con la scheda Copertura.
Incorpora il CSS critico e rimanda il CSS non critico
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.
Valuta la possibilità di automatizzare il processo di estrazione e incorporamento del CSS "Above the Fold" utilizzando lo strumento Critical.
Scopri di più in Rimandare i CSS non critici.
Indicazioni specifiche per lo stack
Drupal
Potresti rimuovere le regole CSS inutilizzate e collegare solo le librerie Drupal necessarie
alle pagine o ai componenti in una pagina pertinenti. Per informazioni dettagliate, consulta la documentazione di Drupal.
Per individuare le librerie collegate che aggiungono CSS estraneo, prova a eseguire la copertura del codice in Chrome DevTools. Puoi individuare il tema o il modulo responsabile nell'URL del foglio di stile quando l'aggregazione CSS è disattivata nel tuo sito Drupal.
Cerca i temi e i moduli che hanno diversi fogli di stile elencati con molto rosso nella copertura del codice. I temi e i moduli devono allegare una raccolta di fogli di stile solo se viene effettivamente utilizzata nella pagina.
Joomla
Potresti ridurre, o cambiare, il numero di estensioni di Joomla che caricano file CSS inutilizzati nella tua pagina.
WordPress
Valuta la possibilità di ridurre o cambiare il numero di plug-in di WordPress che caricano CSS inutilizzati nella tua pagina.