Minificazione CSS

Silktide controlla se i fogli di stile scaricati dalla pagina sono stati minificati, cioè riscritti per rimuovere gli spazi, i commenti e le ripetizioni che interessano solo chi legge il codice. I fogli di stile non minificati sono più grandi del necessario e rallentano la visualizzazione della pagina.

La non cambia l'aspetto della pagina. Per esempio:

/* Prima della minificazione: leggibile, ma pesante */
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

/* Dopo: risultato identico, una frazione delle dimensioni */
h1,h2{background-color:#000}

Perché è importante

I fogli di stile di solito bloccano il rendering: il browser scarica il della pagina prima di mostrare qualsiasi cosa, quindi ogni byte superfluo in un foglio di stile prolunga direttamente il tempo in cui la pagina rimane vuota prima di apparire. La minificazione riduce spesso in modo sostanziale le dimensioni dei fogli di stile e il risparmio si ripete per ogni visitatore, a ogni visualizzazione di una pagina non memorizzata nella cache.

Poiché la minificazione è automatica e non modifica il comportamento, i fogli di stile di produzione non minificati sono quasi sempre il risultato di una svista: un passaggio di build saltato o file di sviluppo distribuiti per errore.

Come risolvere il problema

Attiva la minificazione CSS nel processo di build del sito. Ogni strumento di build moderno include un minificatore, generalmente attivato per impostazione predefinita nelle build di produzione.
Se il sito non ha un processo di build, controlla il : la maggior parte offre un'impostazione o un plugin che minifica automaticamente i fogli di stile.
Come ultima risorsa, passa i file a un minificatore indipendente prima di caricarli. Conserva gli originali leggibili: sono quelli che modifichi, mentre pubblichi l'output minificato.
Se un foglio di stile segnalato appartiene a terze parti, controlla se offrono una versione minificata, come fa la maggior parte di loro.

Come Silktide esegue il controllo

Carica la pagina in un browser reale, utilizzando il tipo di dispositivo, la velocità di connessione e la posizione di test configurati per i test di velocità.
Esamina ogni foglio di stile scaricato dalla pagina e stima quanto sarebbe più piccolo se venisse minificato.
Segnala ogni file con un possibile risparmio significativo e valuta la pagina in base al totale: un potenziale risparmio di circa 50 KB comporta una penalizzazione, mentre un risparmio di 250 KB o superiore viene valutato come scarso.

Risoluzione dei problemi

Il file sembra già minificato

I minificatori differiscono per livello di aggressività, quindi un foglio di stile leggermente compattato può ancora contenere risparmi significativi. Il controllo indica quanto potrebbe essere ridotto il file; eseguirlo con un minificatore aggiornato di solito permette di ottenere la differenza.

Abbiamo bisogno di fogli di stile leggibili per il debug

Conserva i file sorgente leggibili nel progetto ed esegui il debug con le mappe sorgente, che consentono agli strumenti per sviluppatori del browser di mostrare gli stili originali mentre ai visitatori viene fornita la versione minificata. Non è mai necessario distribuire codice leggibile per ottenere un debug leggibile.