Come eliminare il CSS inutilizzato in WordPress senza rompere il sito

Quando si parla di ottimizzazione delle prestazioni di un sito WordPress, uno dei suggerimenti che compare più spesso in PageSpeed Insights riguarda il CSS inutilizzato.

Molti interpretano questo messaggio come un invito a eliminare alcuni file CSS, ma in realtà il problema è più complesso. Rimuovere gli stili sbagliati può compromettere completamente il layout del sito.

Vediamo quindi cosa significa realmente “Unused CSS”, perché influisce sulle prestazioni e quali sono le strategie più sicure per ridurlo.

Che cos’è il CSS inutilizzato?

Ogni pagina del tuo sito carica uno o più fogli di stile (.css) contenenti migliaia di regole.

Il browser, però, utilizza solo una parte di queste regole per visualizzare la pagina corrente.

Tutto il resto rappresenta CSS inutilizzato.

Ad esempio:

• lo stile del modulo contatti viene caricato anche nella homepage;
• il CSS del WooCommerce viene caricato nelle pagine del blog;
• gli stili dello slider vengono caricati anche dove non esiste alcuno slider;
• il CSS di plugin non utilizzati in quella pagina viene comunque scaricato.

Questo aumenta la quantità di dati trasferiti e rallenta il rendering iniziale della pagina.

Perché Google segnala questo problema?

Google PageSpeed Insights non considera il CSS inutilizzato un errore, ma un’opportunità di ottimizzazione.

Quando il browser riceve un file CSS deve:

• scaricarlo;
• analizzarlo;
• costruire il CSSOM;
• combinarlo con il DOM;
• generare il Render Tree.

Più il foglio di stile è grande, maggiore sarà il tempo necessario prima che la pagina venga visualizzata completamente.

Questo influisce direttamente su metriche come:

• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• Interaction to Next Paint (INP)

Da dove arriva tutto questo CSS?

Nella maggior parte dei casi il problema non è WordPress, ma il tema e i plugin installati.

Un tema commerciale moderno può caricare:

• Bootstrap completo;
• Font Awesome;
• Swiper;
• Animate.css;
• librerie per popup;
• CSS per WooCommerce;
• CSS per portfolio;
• CSS per testimonial;
• CSS per eventi;
• CSS per blog.

Anche se nella pagina è presente soltanto un titolo e un’immagine.

Lo stesso vale per molti plugin che includono i propri file CSS in ogni pagina del sito, indipendentemente dal fatto che siano realmente necessari.

Perché i page builder peggiorano la situazione

I page builder come Elementor, WPBakery o altri editor visuali devono prevedere qualsiasi tipo di componente.

Per questo motivo generano spesso fogli di stile molto estesi.

Ogni widget disponibile porta con sé nuove regole CSS, che nella maggior parte delle pagine non vengono mai utilizzate.

Il risultato è un incremento significativo del peso complessivo della pagina.

Come individuare il CSS inutilizzato

Gli strumenti più utilizzati sono:

• Google PageSpeed Insights;
• Lighthouse;
• Chrome DevTools;
• GTmetrix.

In particolare, Chrome DevTools permette di visualizzare la percentuale di CSS realmente utilizzata attraverso la funzione Coverage.

In questo modo è possibile capire quali file sono quasi completamente inutilizzati.

Attenzione: non eliminare mai il CSS “a mano”

Uno degli errori più comuni consiste nell’aprire un file CSS e cancellare tutte le regole che sembrano inutilizzate.

È una pratica estremamente rischiosa.

Molti stili vengono applicati solo:

• al passaggio del mouse;
• durante un’animazione;
• dopo un’interazione JavaScript;
• nelle versioni responsive;
• in pagine specifiche del sito.

Eliminarli può provocare problemi difficili da individuare.

La soluzione migliore: caricare il CSS solo quando serve

L’approccio più efficace consiste nel non caricare affatto i file non necessari.

Ad esempio:

• il CSS di Contact Form 7 solo nelle pagine con il modulo;
• il CSS di WooCommerce solo nelle pagine del negozio;
• il CSS dello slider solo dove è presente lo slider;
• il CSS della galleria solo nelle pagine che la utilizzano.

Questo tipo di caricamento condizionale riduce notevolmente il peso della pagina.

Creare un tema custom aiuta davvero

Quando sviluppo un sito WordPress personalizzato, ogni componente possiede il proprio file CSS.

Ad esempio:

hero.css
faq.css
swiper.css
footer.css
contact.css

Ogni file viene caricato esclusivamente se quella sezione è presente nella pagina.

In questo modo il browser scarica soltanto ciò che serve realmente.

Rispetto ai temi commerciali, questa strategia permette di ridurre sensibilmente il numero di richieste HTTP e la quantità di CSS da elaborare.

Esempio pratico: caricare un file CSS solo nelle pagine in cui è necessario

In WordPress è possibile caricare un foglio di stile soltanto quando serve, evitando di appesantire tutte le pagine del sito.

Ad esempio, immaginiamo di avere un file faq.css dedicato esclusivamente alla pagina delle FAQ.

Nel file functions.php possiamo utilizzare wp_enqueue_style() insieme alla funzione is_page().

function mytheme_enqueue_styles() {

    // CSS generale del tema
    wp_enqueue_style(
        'main-style',
        get_template_directory_uri() . '/assets/css/style.css',
        array(),
        '1.0'
    );

    // CSS solo per la pagina FAQ
    if ( is_page('domande-frequenti') ) {

        wp_enqueue_style(
            'faq-style',
            get_template_directory_uri() . '/assets/css/faq.css',
            array(),
            '1.0'
        );

    }

}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_styles');

È sempre necessario eliminare tutto il CSS inutilizzato?

No.

L’obiettivo non deve essere raggiungere lo 0%.

In alcuni casi mantenere qualche regola inutilizzata è perfettamente accettabile se permette di semplificare la gestione del progetto.

L’importante è evitare di caricare centinaia di kilobyte di CSS completamente inutili.

Conclusioni

Ridurre il CSS inutilizzato significa aiutare il browser a visualizzare la pagina più velocemente.

La soluzione non consiste nell’eliminare manualmente le regole CSS, ma nel progettare il sito in modo che vengano caricati solo gli stili realmente necessari.

Nei siti WordPress sviluppati su misura questo approccio è molto più semplice da adottare, perché ogni componente può essere gestito in modo indipendente. Il risultato è un codice più pulito, prestazioni migliori e un impatto positivo sia sull’esperienza utente sia sulle metriche dei Core Web Vitals.

Se stai realizzando un nuovo sito WordPress o vuoi ottimizzare quello esistente, progettare correttamente il caricamento di CSS e JavaScript fin dall’inizio è uno degli interventi che offre i benefici più concreti nel lungo periodo.