Un audit CSS esamina la quantità di stili, il loro utilizzo e la specificità dei selettori. «Inutilizzato» significa che una regola non è stata usata nello stato della pagina sottoposto al test. Potrebbe servire quando si apre un menu o cambia la larghezza della finestra.
Scegli le pagine e le interazioni da verificare
Seleziona pagine con elementi di interfaccia diversi, come un'intestazione condivisa, un elenco di prodotti o un modulo. Includi l'apertura dei menu, gli errori di convalida e il cambio di scheda. Prima e dopo la modifica usa le stesse larghezze della finestra e le stesse interazioni.
Analizza una pagina pubblica con CSS Scanner di Milten. Annota il foglio di stile e i problemi rilevati. Aggiungi ai test manuali gli stati che l'analisi non copre.
Non eliminare CSS solo in base alla percentuale inutilizzata
Considera questo esempio illustrativo: un menu è chiuso al caricamento della pagina. I suoi stili possono essere inutilizzati all'inizio, ma necessari quando viene aperto. Prova l'interazione prima di considerare superflua una regola.
La documentazione di Coverage di Chrome DevTools spiega come registrare l'uso di CSS e JavaScript durante le interazioni. Una regola inutilizzata in una singola registrazione non è necessariamente inutile in tutto il sito.
Per ogni regola da eliminare, individua il file sorgente o il passaggio di compilazione che la genera. Modifica il sorgente, ricompila e verifica il risultato, anziché intervenire direttamente su un file minificato.
Controlla i duplicati e la specificità
Dichiarazioni ripetute possono applicarsi in condizioni diverse. Verifica le media query, gli stati degli elementi e l'ordine della cascata. Dopo aver unito le regole, controlla che gli stessi elementi ricevano ancora gli stili previsti.
Un altro esempio è aggiungere ripetutamente !important per cambiare il colore di un pulsante. Esamina prima le regole in conflitto e la loro specificità. La guida MDN alla specificità aiuta a esprimere nel sorgente le priorità desiderate.
Verifica l'aspetto e le interazioni dopo la pubblicazione
Analizza nuovamente l'URL dopo la modifica. Oltre alla dimensione del file, prova i pulsanti, i moduli e i menu. Controlla gli a capo e gli indicatori di messa a fuoco su dispositivi mobili e schermi grandi.
Usa Design Tokens per esaminare valori condivisi di colori e spaziatura. Se il problema di visualizzazione riguarda il markup, consulta la guida alla verifica HTML.
Eliminare il CSS inutilizzato rende sempre la pagina più veloce?
Anche l'ordine di caricamento, il trasferimento delle risorse e JavaScript influiscono sulla velocità. Confronta i risultati di Speed Scanner nelle stesse condizioni.
Basta l'analisi automatica?
Devi verificare anche le interazioni rilevanti e diverse larghezze della finestra. Registra separatamente l'ambito dell'analisi automatica e gli stati controllati manualmente.
Analizza il CSS di una pagina pubblica. Salva le condizioni iniziali e i problemi rilevati prima di apportare modifiche.
