Strumenti che ti aiutano a identificare i CSS non utilizzati in una pagina web per ottimizzare la velocità di caricamento del sito.
Introduzione
Uno dei problemi principali che si incorre quando si tenta di rimuovere dei selettori CSS inutilizzati dal proprio sito e che nella maggior parte dei casi si trova quasi tutto in un unico foglio di stile.
Se utilizzi WordPress, per esempio, troverai tutti i selettori raggruppati in un unico file dal nome style.css.
Al fine di ottimizzare una singola pagina caricando solo il codice necessario, può essere utile suddividere il foglio di stile principale in diversi fogli più piccoli che vengono caricati solo dove sono necessari.
Questa suddivisione potrebbe assomigliare a qualcosa di simile:
- index.css
- form.css
- front-page.css
- tabella.css
- commenti.css
Ecco due strumenti che ti aiuteranno a identificare il codice non utilizzato in una pagina del sito.
UnCSS online è uno strumento facile da utilizzare che ti permette di individuare in una pagina quale codice CSS sta effettivamente utilizzando.
Per utilizzarlo basta inserire nel tool online il codice l’HTML e il CSS che desideri ottimizzare.
Fatto questo devi cliccare sul pulsante UNCSS my styles.
Nel caso ci fosse qualche errore nel foglio di stile, ti sarà indicato il numero di riga.
Per correggerlo apri il fogli di stile con un editor come Notepad++, identifica la riga e correggi l’errore.
Cliccando su Copy to Clipboard ottieni il codice effettivamente utilizzato dalla pagina.
Il test è da ripetere su tutte le pagine del sito per identificare le porzioni di codice comuni e quelle che si possono associare ad una singola pagina.
Il codice di questo test è open source.
■ PurifyCSS Online – Remove unused CSS
PurifyCSS è un altro strumento per rimozione del codice inutilizzato.
A differenza del precedente tool, con PurifyCSS hai più funzionalità.
Puoi inserire il codice HTML e CSS negli appositi riquadri e vedere il risultato oppure inserire il link della pagina per fare una scansione mostrando, anche in questo caso, i risultati del test.
Inoltre effettua una compressione del codice per risparmiare byte con l’opzione Minify CSS.
Nel risultato è mostrata la percentuale di codice inutilizzato, il codice pulito e la differenza tra il file originale e il file ottimizzato.
Conclusione
Ti ho segnalato due strumenti per ottimizzare una pagina web togliendo i CSS inutilizzati.
Prima di procedere alla rimozione dei selettori non utilizzati, verifica che non ci siano porzioni di codice comuni a più pagine del sito, come avviene per esempio nei CMS WordPress.
Per approfondire
■ How to Remove Unused CSS and JavaScript in WordPress (torquemag.io)
■ How to safely remove unused CSS in WordPress – WebPerfTools