Analisi CSS
Analisi dei fogli di stile: dimensione file, copertura, specificità dei selettori e dichiarazioni duplicate.
Vantaggi
Copertura CSS al byte
Misurazione precisa del CSS utilizzato vs inutilizzato per file. Scopri esattamente quanti kilobyte il browser scarica inutilmente e riduci il peso della pagina.
Controllo della specificità
Report su specificità minima, media e massima dei selettori con i top 10 più pesanti. Mantiene la cascata prevedibile e gli stili facili da mantenere.
Rilevamento duplicati e !important
Scoperta automatica di dichiarazioni ripetute e uso eccessivo di !important. Riduci la dimensione del CSS senza perdere funzionalità.
Mappa completa degli stili
Panoramica di ogni file collegato — esterno e inline — con dimensioni, tipi e percentuali di copertura. Media query, prefissi vendor, colori e font in un unico report.
Come funziona
Strumenti
FAQ
Il browser scarica e analizza tutto il CSS prima di iniziare il rendering. Gli stili extra aumentano il tempo di blocco, rallentando FCP e LCP. Rimuovere il CSS inutilizzato è uno dei modi più efficaci per velocizzare il caricamento.
La specificità determina quale regola CSS vince in caso di conflitto. Un'alta specificità porta a «guerre di selettori» e rende la manutenzione difficile. Il report evidenzia i selettori problematici per semplificare la cascata.
!important rompe la cascata CSS naturale e rende gli stili imprevedibili. Ogni nuovo !important ne richiede un altro per sovrascriverlo. Il report elenca tutte queste dichiarazioni per un refactoring graduale.
Dimensione totale CSS, numero di file, regole e selettori, percentuale di stili inutilizzati, top specificità, lista duplicati, dichiarazioni !important, media query, prefissi vendor, palette colori e font in uso.
L'analisi di una singola pagina richiede generalmente meno di un minuto. Il servizio carica la pagina in un browser reale, raccoglie tutti i fogli di stile e analizza la copertura in condizioni reali.