Sappiamo tutti quanto sia difficile riuscire a passare la valutazione dei segnali vitali di Google PageSpeed Insights. Ad ogni scansione c’è sempre qualcosa che non va, e non è così strano trovarsi davanti al monito “minimizza il CSS”. Ma come puoi minimizzare il CSS quando tutto quello che hai sul tuo sito è essenziale?
La risposta, a volte, è più semplice di quanto puoi pensare: bisogna assottigliare il CSS già esistente, senza rinunciare a nulla.
Ad esempio, sapevi che indipendentemente da quante funzioni e widget usi di Jetpack, WordPress carica automaticamente tutta la libreria di questo noto (e ben nutrito) plugin?
Perciò, nelle righe a seguire ti sveleremo come evitare il caricamento di tutta la libreria CSS di Jetpack. Sostanzialmente, aggiungeremo una regola del genere “carica solo il CSS corrispondente a quello che sto effettivamente usando di Jetpack”.
Raggiungere questo intento è davvero semplice, vedrai. E siamo sicuri che ti darà una mano anche per quanta riguarda i valori registrati da Google PageSpeed Insights.
Pronto per cominciare?
Come rimuovere libreria CSS Jetpack
Perché rallentare il tuo sito con del CSS che non usi? Snellisci un po’ la libreria CSS di Jetpack e il tuo sito ti ringrazierà.
Per rimuovere la libreria CSS inutilizzata di Jetpack, è necessario aggiungere una regola PHP al file functions.php di WordPress. Ci sono due metodi per riuscirci:
il primo consiste nell’aggiungere manualmente la regola al file functions.php di WordPress, ma noi lo sconsigliamo in quanto è rischioso modificare questo file e, inoltre, bisogna aggiungere la regola ogni volta che WordPress si aggiorna.
Il secondo metodo, che vedremo nei prossimi paragrafi, consiste nell’aggiungere la stessa regola PHP tramite un plugin che crea uno snippet PHP, in modo da non dover modificare il file functions.php originale. Questo metodo, oltre a essere più sicuro perché non richiede la modifica del file functions.php, consente anche di aggiornare WordPress senza dover riscrivere ogni volta la regola.
Per iniziare, dunque, è necessario installare un plugin per snippet PHP. Esistono diversi plugin di questo genere, due dei migliori sono: Code Snippets e Woody code snippets, noi vedremo le istruzioni passo passo per il primo.
Per installare Code Snippets, recati nel tuo wp-admin alla voce Plugin > Aggiungi nuovo.
Digita Code Snippets nel campo di ricerca in alto a destra per far apparire il plugin. Installa il plugin premendo su Installa adesso e, al termine dell’installazione, clicca sul tasto Attiva che appare.
A questo punto, non ti resta che creare lo snippet PHP con la regola per eliminare la libreria CSS inutilizzata di Jetpack. Come accennato nei capitoli precedenti, questa regola non elimina completamente la libreria CSS, ma fa sì che venga caricato solo il codice CSS necessario ai componenti Jetpack adoperati.
Per procedere, recati con il puntatore del mouse sulla voce Snippets nella sezione a sinistra e clicca su Aggiungi nuovo.
Digita un titolo per lo snippet (es. Remove Jetpack CSS) e incolla il codice PHP presente qui sotto:
add_filter( 'jetpack_sharing_counts', '__return_false', 99 ); add_filter( 'jetpack_implode_frontend_css', '__return_false', 99 );
Assicurati che la voce Esegui lo snippet ovunque sia spuntata, poi premi sulla voce Salva le modifiche ed infine su Attiva, in alto a destra.
Ecco fatto! Ora WordPress caricherà solo il codice CSS di Jetpack necessario e il sito risulterà molto più leggero e veloce.
