Ridurre al minimo la dimensione del foglio di stile CSS è stato considerato da molti un buon modo per aumentare la velocità di caricamento del sito. Infatti, riducendo il file CSS di diversi kilobyte, il server impiegherà un tempo più breve per caricare e generare una pagina Web più veloce.
Nel caso in cui i tuoi articoli colpiscano la prima pagina di Digg, questo potrebbe anche essere uno dei pochi fattori decisivi (ce ne sono molti altri) se il tuo server andrà in crash o meno.
Alcuni dei metodi più comuni usati per minimizzare / ottimizzare un foglio di stile CSS consistono nell'eliminare selettori inutilizzati, spazi bianchi indesiderati, tabulazioni, commenti e modificare la dichiarazione della longhand alle notazioni di stenografia.
So che alcuni di voi qui non sono abbastanza esperti di tecnologia per modificare il proprio codice CSS, quindi qui vi fornirò alcuni degli strumenti utili che è possibile utilizzare per ottimizzare il codice CSS, anche se non si ha alcuna conoscenza di Codifica CSS
Controlla il tuo codice CSS
W3C CSS Validator
Il validatore CSS W3C è uno strumento che puoi utilizzare per convalidare il tuo CSS. Puoi scaricare il validatore Java sul tuo computer e utilizzarlo offline oppure utilizzare il modulo online per verificare il codice CSS.
CSS Validator Firefox Add-On
Per rendere più semplice la convalida del codice CSS, è disponibile l'estensione per Firefox - Validatore CSS - che puoi installare sul tuo browser. Una volta installato, puoi controllare facilmente e velocemente il tuo codice con un clic del tasto destro del mouse.
CSSCheck
Anche se il tuo codice CSS è convalidato, ciò non significa che sia privo di errori. La validazione significa solo che è conforme agli standard CSS impostati dal W3C. Se vuoi convalidare oltre a esaminare alcuni problemi di compatibilità del browser con il tuo foglio di stile, CSSCheck è un ottimo strumento per te.
Analizzatore CSS
CSS Analyzer è uno strumento utile che consente di convalidare il foglio di stile in base allo standard del W3C, eseguire un test di contrasto del colore e un test per garantire che le dimensioni pertinenti siano specificate in unità di misura relative.
Nel caso ti stia chiedendo, il test del contrasto del colore è quello di verificare che le combinazioni di colori di primo piano e di sfondo forniscano un contrasto sufficiente quando vengono visualizzate da qualcuno con deficit di colore o se visualizzate su uno schermo in bianco e nero.
Ripulisci il tuo codice CSS
Selettori Dust-Me
Dust-Me Selectors è un'estensione per Firefox che trova selettori CSS inutilizzati nella pagina che stai visualizzando. Mentre testate le pagine successive dello stesso dominio, il risultato viene confrontato con i dati precedenti e tutti i selettori incontrati vengono cancellati dall'elenco. Puoi usarlo per testare singole pagine o per spiderare l'intero sito.
Alla fine, otterrete un rapporto sui selettori che non vengono utilizzati da nessuna parte nel sito. È quindi possibile rimuovere tali selettori dal foglio di stile (codice minore significa file di dimensioni inferiori).
Checker di ridondanza CSS
Simile a Dust-Me Selectors, questo strumento controlla il tuo sito per selettori CSS inutilizzati e ridondanti. L'unica cosa che è diversa è che devi inserire manualmente l'URI per ogni pagina che vuoi testare.
Ottimizza e comprimi il tuo codice CSS
Una volta che hai completato il controllo della validità del tuo CSS e ripulisci il codice non necessario, è il momento di ottimizzare il file CSS e ridurlo alla dimensione più piccola possibile.
CSS Tidy
CSS Tidy è un software open source che puoi utilizzare per ottimizzare e comprimere il tuo file CSS. È disponibile in formato .exe (solo Windows) e in formato script php compresso (tutte le piattaforme, per gli sviluppatori Web). Quello che fa CSS Tidy è principalmente rimuovere il commento, spazi bianchi non necessari e modificare parte del codice in stenografia. Durante la compressione, puoi scegliere tra leggibilità del codice o compressione massima. A seconda della lunghezza del codice, è possibile ottenere facilmente un rapporto di compressione fino al 30% o più.
Dato che CSS Tidy è un progetto open source, ci sono stati diversi siti Web che utilizzano il codice e lo hanno trasformato in uno strumento online che le persone possono utilizzare. Qui ce ne sono un po:
- PULIZIA CSS
- Codice Beautifier
- CSS Formatter and Optimizer dal portale CSS
Altri ottimizzatori CSS
FlumpCakes CSS Optimizer
Un semplice ottimizzatore che offre diverse opzioni tra cui scegliere.
Robson CSS Compressor
Anche se potrebbe sembrare lo stesso di altri, ho trovato che il tasso di compressione per Robson CSS Compressor è il più alto tra tutti. Sebbene fornisca diverse opzioni per modificare l'impostazione, lasciando intatte tutte le opzioni (tutte le opzioni selezionate) produce sempre il risultato migliore.
Compressore CSS Drive CSS
Il compressore CSS offerto da CSS Drive è disponibile in due modalità che puoi utilizzare: normale e avanzato. Nella modalità normale, è sufficiente selezionare il livello di compressione desiderato (leggero, normale o super compatto) e il compressore CSS farà il resto. Nella modalità avanzata, ti vengono fornite più opzioni e una maggiore opinione su come si desidera ottimizzare il foglio di stile.
CSS Optimizer
L'ottimizzatore CSS di mabblog.com è un'applicazione a riga di comando per Mac e Linux. È pensato per coloro che sono più a loro agio con il terminale piuttosto che con un'interfaccia online. C'è anche una semplice versione online disponibile per coloro che vogliono farla finita rapidamente e finita.
Speriamo che gli strumenti qui elencati siano sufficienti per ottimizzare e ottimizzare il foglio di stile CSS. Se hai utilizzato altri strumenti che sono più utili di quelli sopra menzionati, condividili con noi nei commenti.