CSS inutilizzato

Silktide carica le tue pagine in un browser reale e misura quanto di ogni foglio di stile viene effettivamente utilizzato per visualizzare la pagina. I fogli di stile con una grande quantità di stili inutilizzati vengono segnalati, insieme al potenziale risparmio.

Perché è importante

I browser non possono mostrare una pagina finché non hanno scaricato ed elaborato il suo , quindi ogni regola non utilizzata continua a ritardare il momento in cui i tuoi contenuti vengono visualizzati. Il CSS inutilizzato si accumula naturalmente: temi e framework includono stili per ogni funzionalità, che tu la utilizzi o meno, e gli stili obsoleti raramente vengono eliminati quando i design cambiano. Il risultato è che i visitatori aspettano stili che non vengono mai applicati.

Come risolvere il problema

Rimuovi gli stili che non utilizzi più. Gli strumenti di compilazione possono farlo automaticamente analizzando i tuoi template e conservando solo il CSS a cui fanno riferimento.
Suddividi i fogli di stile di grandi dimensioni, in modo che ogni pagina carichi solo gli stili di cui ha bisogno, invece di un unico pacchetto che contiene gli stili di tutte le pagine.
Per gli stili di cui una pagina ha bisogno, dai priorità a quelli che visualizzano la prima schermata e fai caricare il resto senza bloccare il caricamento:

<!-- Si carica senza bloccare la prima visualizzazione -->
<link rel="preload" href="rest.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="rest.css"></noscript>

Fai attenzione alla rimozione automatica: gli stili utilizzati solo da , o solo su altre pagine che condividono il foglio di stile, potrebbero essere rimossi per errore.

Come esegue i controlli Silktide

Carica la pagina in un browser reale e registra quali regole CSS vengono applicate durante il caricamento della pagina.
Per ogni foglio di stile, misura quanti dei suoi byte non sono mai stati utilizzati.
Segnala ogni foglio di stile con una quantità significativa di codice inutilizzato, mostrandone le dimensioni attuali, la percentuale inutilizzata e i byte che potresti risparmiare.

Risoluzione dei problemi

Il CSS viene utilizzato, ma non immediatamente

La misurazione riguarda il caricamento iniziale della pagina. Gli stili che si applicano solo in un secondo momento, ad esempio al passaggio del mouse, nelle finestre modali o dopo che JavaScript ha mostrato dei contenuti, vengono considerati inutilizzati anche se alla fine la pagina ne ha bisogno. Si tratta comunque di informazioni utili: questi stili non devono bloccare la prima visualizzazione, quindi possono essere caricati separatamente.

Il foglio di stile è condiviso in tutto il sito

Un foglio di stile condiviso risulta per lo più "inutilizzato" su ogni singola pagina. Può essere un compromesso ragionevole, poiché il file viene dopo la prima visualizzazione della pagina. Prima di suddividerlo, valuta il costo della prima visita rispetto alla praticità.