Rimuovere il codice css inutilizzato

Quando analizziamo il sito web con LightHouse o Google Pagespeed, ci potremmo travare di fronte a questo avviso:

Riduci il codice Css inutilizzato

La riduzione delle regole CSS inutilizzate può ridurre il comportamento di blocco della visualizzazione per accelerare il caricamento della pagina e migliorare l’esperienza sulla pagina dei visitatori.

Per impostazione predefinita, i file CSS sono considerati bloccanti il rendering, poiché ritardano il First Paint finché il browser non ha terminato di eseguirli.

A seconda del layout e del dispositivo dei tuoi visitatori, il caricamento di regole CSS non necessarie per il rendering dei contenuti Above The Fold può avere un forte impatto sulle prestazioni della tua pagina, sia misurate che percepite.

rimuovere codice css Illustrazione che mostra un dottore che somiglia a George Clooney operare una donna

Cos’è il CSS inutilizzato?

Non importa quanto tu sia esperto come sviluppatore, ci sono buone probabilità che il tuo sito web contenga CSS che non hanno alcun impatto sugli elementi correnti della pagina. Ad esempio, framework come Bootstrap sono dotati di dozzine di stili CSS di cui probabilmente non avrai bisogno. Se hai aggiunto una funzionalità durante lo sviluppo e l’hai rimossa in seguito, potrebbero esserci ancora regole associate a quella funzionalità persistenti nei tuoi fogli di stile. I CSS non utilizzati non fanno altro che aggiungere peso morto alle tue applicazioni e contribuiscono alla crescita delle dimensioni della pagina web, quindi devi avere il minor codice in eccesso possibile.

Tipi di CSS inutilizzati

Quando si parla di CSS inutilizzati, generalmente rientrano in due categorie. Entrambe le categorie influiscono sulle prestazioni della tua pagina, anche se in modi diversi. Sono:

1) CSS non critici

Si tratta di regole CSS che non vengono utilizzate per eseguire il rendering dei contenuti Above The Fold ma che possono comunque essere utilizzate per altre pagine o per applicare stili ai contenuti Below The Fold.

2) Regole CSS morte

Le regole CSS morte si riferiscono a stili che non vengono più utilizzati. Potrebbero essere residui di versioni precedenti del tuo sito o parte di test e/o utilizzo temporaneo.

 

Perché devi rimuovere i CSS inutilizzati?

Poiché i CSS definiscono il modo in cui viene visualizzato il contenuto di un documento HTML, il browser dell’utente deve scaricare e analizzare tutti i file CSS esterni prima di poter iniziare il rendering del contenuto. Di conseguenza, più CSS contiene una pagina web, più tempo gli utenti dovranno attendere per vedere qualcosa sui loro schermi.

Integrare piccoli CSS nel file HTML e minimizzare i fogli di stile esterni può aiutare a ottimizzare il rendering dei contenuti, ma eliminare i CSS inutili è una strategia molto più efficace per migliorare le prestazioni complessive.

La combinazione di tutti questi metodi garantisce che gli utenti visualizzino i contenuti con la rapidità consentita dalla loro connessione Internet. Oltre a rallentare le prestazioni generali del tuo sito web, un eccesso di CSS può causare grattacapi agli sviluppatori. I fogli di stile puliti e ordinati sono più facili da mantenere rispetto a quelli disordinati. Fai un favore ai tuoi utenti e a te stesso abbandonando i CSS inutilizzati.

In che modo i CSS non utilizzati influiscono sulle prestazioni della pagina?

Ogni volta che una pagina viene caricata, il browser deve scaricare, analizzare ed eseguire tutti i fogli di stile esterni prima di poter eseguire il rendering di qualsiasi cosa sulla pagina.

Questo perché i fogli di stile stessi contengono regole che influenzano lo stile della pagina, che devono essere stabilite prima che il browser possa visualizzare qualsiasi contenuto.

Se i fogli di stile contengono regole CSS morte o non critiche, allora sono inutilmente più grandi del necessario.

Naturalmente, più grande è il file CSS, più tempo impiega il browser per scaricarlo, analizzarlo ed eseguirlo.

In che modo i CSS inutilizzati influiscono sulla performance della Pagina?

Il caricamento di regole CSS inutilizzate rallenta il caricamento della pagina fornendo file CSS inutilmente grandi.
A causa di questi file CSS inutilmente più grandi, al browser viene impedito di svolgere altre attività critiche, ritardando eventualmente il First Paint della tua pagina e aumentando la quantità di tempo che i tuoi visitatori trascorrono aspettando che la pagina visualizzi qualcosa.

Nel complesso, ridurre la quantità di CSS inutilizzati può ridurre il tempo di esecuzione del browser e la larghezza di banda consumata, con conseguente caricamento della pagina più veloce

Come rimuovere manualmente i CSS inutilizzati

Se utilizzi Chrome, la scheda DevTools dispone di un pratico strumento che ti consente di vedere quale codice viene eseguito su una pagina e cosa non lo è. Per accedere a questo strumento, attenersi alla seguente procedura:

  • Apri Chrome DevTools
  • Apri il menu dei comandi con: cmd + maiusc + p
  • Digitare “Copertura” e fare clic sull’opzione “Mostra copertura”.
  • Seleziona un file CSS dalla scheda Copertura che aprirà il file nella scheda Origini

Qualsiasi CSS accanto a una linea verde continua significa che il codice è stato eseguito. Il rosso fisso significa che non è stato eseguito. Una riga di codice che è sia rossa che verde significa che è stato eseguito solo parte del codice su quella riga.

devtools codice css inutilizzato

Solo perché uno stile non viene utilizzato su una pagina non significa che non venga utilizzato altrove, quindi dovresti controllare diverse pagine del tuo sito e tenere traccia di quali regole continuano a comparire nell’elenco inutilizzato. Puoi farlo copiando e salvando i risultati di ciascun controllo in un documento di Fogli Google. Quelli che appaiono di più possono probabilmente essere rimossi in modo sicuro.

Strumenti per rimuovere CSS non utilizzati

La maggior parte degli sviluppatori ha di meglio da fare che eliminare le regole CSS inutilizzate una per una. Ecco perché esistono numerosi strumenti progettati per automatizzare il processo. Ecco una panoramica degli strumenti più popolari progettati per aiutare gli sviluppatori web a rimuovere i CSS inutilizzati dai loro progetti web:

1.UnusedCSS

Il nome semplice è indicativo della facilità d’uso di questo programma. Basta collegare l’URL del tuo sito web a UnusedCSS e lasciare che faccia tutto il lavoro. Oltre a identificare e rimuovere le regole CSS inutilizzate, ti dice quanta memoria hai salvato. Puoi provare UnusedCSS gratuitamente, ma devi pagare un abbonamento mensile per scaricare i file CSS ripuliti. I membri Premium possono pianificare ottimizzazioni CSS automatiche e avere accesso ad altre funzionalità; tuttavia, va notato che UnusedCSS funziona solo con siti Web live, quindi non è utile in fase di test.

2. PurifyCSS#

PurifyCSS è uno strumento gratuito che rimuove i CSS inutilizzati dai file HTML, PHP, JavaScript e CSS prima della pubblicazione. Lo svantaggio è che è necessario specificare manualmente quali file scansionare uno per uno, il che rende il processo un po’ noioso. Invece di modificare i file originali, PurifyCSS genera un nuovo file con il CSS ottimizzato. Poiché PurifyCSS non funziona con i siti Web live, dovrai utilizzarlo in un ambiente di sviluppo. Potresti voler utilizzare PurifyCSS durante lo sviluppo e aggiornare a UnusedCSS in seguito.

3.PurgeCSS

PurgeCSS è stato ispirato da PurifyCSS, quindi sembra molto simile, ma è un po’ più snello e intuitivo da usare. Funziona confrontando i tuoi contenuti con i file CSS e rimuovendo i selettori che non hanno una corrispondenza. L’unico svantaggio principale è che devi inserire manualmente i CSS nella whitelist non nei percorsi specificati, il che può essere un grattacapo se il tuo sito web utilizza determinati plugin come i moduli HTML.

4. UnCSS#

UnCSS è più accurato di PurgeCSS poiché esamina le pagine Web effettive anziché i singoli file, ma è più lento e richiede una maggiore configurazione manuale. UnCSS è molto utile se utilizzato con altri strumenti. Ad esempio, puoi combinare UnCSS con Grunt e Node.js per automatizzare la rimozione dei CSS inutilizzati.

Un avvertimento sulla rimozione dei CSS non utilizzati#
Gli strumenti discussi in questo tutorial non sono perfetti. Esistono alcuni metodi diversi per identificare i selettori CSS rouge; tuttavia, far corrispondere i selettori agli elementi nel DOM può essere complicato se si hanno elementi che dipendono da API e script di terze parti.

Se vuoi provare a rimuovere manualmente i CSS inutilizzati, devi prestare particolare attenzione in modo da non paralizzare accidentalmente la tua applicazione eliminando qualcosa di importante. Detto questo, dovresti conoscere il tuo sito web meglio di chiunque altro e la funzionalità di controllo di DevTools può fornire informazioni preziose per aiutarti a creare CSS più rigorosi fin dall’inizio.

Come automatizzare la rimozione dei CSS inutilizzati con UnCSS

Ora vediamo come possiamo utilizzare uno degli strumenti sopra elencati per ridurre i tuoi fogli di stile. Questo tutorial, grazie a Dean Hume, spiegherà come configurare Node.js, Grunt, UnCSS e un altro plugin chiamato CSSmin su una macchina Windows per rimuovere automaticamente i CSS inutilizzati e minimizzare i risultati.

1. Installa Node.js
Scarica l’ultima distribuzione dal sito Web Node.js e segui le istruzioni di installazione.
2. Installa Grunt
Apri Node.js e inserisci quanto segue nel prompt dei comandi:

npm install -g grunt-cli

3. Apri la cartella del tuo progetto
Utilizzando il prompt dei comandi di Node.js, vai alla cartella contenente i file che desideri che UnCSS esegua la scansione. Puoi farlo inserendo il percorso del file. Per esempio:

cd C:TestProject

4. Installa UnCSS e CSSMin
Inserisci quanto segue nel prompt dei comandi di Node.js:

npm install grunt-uncss grunt-contrib-cssmin --save-dev

UnCSS e il pacchetto CSSMin verranno installati nella cartella del progetto specificata.

5. Crea un file gruntfile.js
Crea un file JavaScript chiamato gruntfile.js nella directory principale del tuo progetto. Gruntfile.js funge da file di configurazione per plugin come UnCSS. Inserisci questo codice nel prompt dei comandi di Node.js:

module.exports = function (grunt) {
    grunt.initConfig({
        uncss: {
            dist: {
                files: [
                    { src: 'index.html', dest: 'cleancss/tidy.css' }
                ]
            }
        },
        cssmin: {
            dist: {
                files: [
                    { src: 'cleancss/tidy.css', dest: 'cleancss/tidy.css' }
                ]
            }
        }
    });

    // Load the plugins
    grunt.loadNpmTasks('grunt-uncss');
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    // Default tasks
    grunt.registerTask('default', ['uncss', 'cssmin']);
};

Le istruzioni di cui sopra indicano a UnCSS di scansionare il file index.html alla ricerca di CSS non utilizzati e di creare un file CSS ridotto all’interno di una cartella denominata cleancss. Il plugin CSSmin minimizzerà quindi il nuovo file CSS, che verrà chiamato tidy.css per impostazione predefinita. Le ultime righe sono particolarmente importanti poiché caricano e registrano entrambi i plugin.

6. Esegui Grunt

Infine, devi tornare alla cartella del file sorgente ed eseguire Grunt in questo modo:

cd C:TestProject>grunt

Ciò dovrebbe mettere in azione UnCSS e CSSmin. Se hai fatto tutto correttamente, avrai un file CSS pulito e minimizzato che ti aspetta nella cartella specificata. Alcuni sviluppatori hanno affermato che questo metodo riduce la dimensione dei file CSS di oltre il 95%! Si tratta di un notevole risparmio con il minimo sforzo. È necessario eseguire il processo di configurazione solo una volta. In futuro, puoi semplicemente eseguire Grunt per rimuovere automaticamente il tuo progetto dai CSS inutilizzati.

Riepilogo

Oltre ai CSS inutilizzati, il tuo sito web probabilmente ha del codice HTML e JavaScript di cui potrebbe fare a meno. Prima di iniziare a concatenare, minimizzare e comprimere i tuoi file, assicurati che non siano pieni di codice non necessario e rimuovi i CSS inutilizzati.