Come minimizzare i file CSS / JavaScript in WordPress (3 modi)

Nessuno vuole un sito web lento. I tempi di caricamento lenti frustrano i visitatori e danneggiano le classifiche di ricerca.

Come specialisti nell’ottimizzazione delle prestazioni di WordPress, abbiamo scoperto che la minifica dei file CSS e JavaScript può aiutare a creare un sito web più veloce ed efficiente.

In questa guida vi mostreremo come minificare facilmente i file CSS e JavaScript in WordPress per migliorare le prestazioni e la velocità, aumentando l’esperienza dell’utente e la visibilità sui motori di ricerca.

Cos’è la minimizzazione e quando è necessaria?

Il termine “minificare” è usato per descrivere un metodo che riduce le dimensioni dei file del sito WordPress. Ciò avviene rimuovendo gli spazi bianchi, le linee e i caratteri non necessari dal codice sorgente.

Ecco un esempio di codice CSS normale:

body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}

Dopo la minificazione del codice, l’aspetto sarà questo:

body{margin:20px;padding:20px;color:#333;background:#f7f7f7}
h1{font-size:32px;margin-bottom:10px}

Di solito, si raccomanda di minificare solo i file che vengono inviati al browser dell’utente. Questo include i file HTML, CSS e JavaScript.

È possibile minificare anche i file PHP, ma questo non migliorerà la velocità di caricamento delle pagine per gli utenti. Questo perché PHP è un linguaggio di programmazione lato server, cioè viene eseguito sui server prima di essere inviato al browser web del visitatore.

Il vantaggio della minificazione dei file è il miglioramento della velocità e delle prestazioni di WordPress, poiché i file compatti sono più veloci da caricare.

Tuttavia, alcuni esperti ritengono che il miglioramento delle prestazioni sia molto ridotto per la maggior parte dei siti web e che non valga la pena di farlo. La minimizzazione rimuove solo pochi kilobyte di dati nella maggior parte dei siti WordPress. È possibile ridurre maggiormente il tempo di caricamento delle pagine ottimizzando le immagini per il web.

Se state cercando di ottenere un punteggio di 100/100 su Google PageSpeed Insights o sullo strumento GTMetrix, la minificazione di CSS e JavaScript migliorerà significativamente il vostro punteggio.

Detto questo, vediamo come minificare facilmente CSS/JavaScript sul vostro sito WordPress. Esamineremo 3 diverse opzioni tra cui potete scegliere:

Siete pronti? Iniziamo con il metodo più consigliato.

Metodo 1. Minimizzare CSS/JavaScript in WordPress usando WP Rocket

Questo metodo è più semplice ed è consigliato a tutti gli utenti. Funziona indipendentemente dall’hosting WordPress utilizzato.

Per prima cosa, è necessario installare e attivare il plugin WP Rocket. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.

WP Rocket è il miglior plugin per il caching di WordPress sul mercato. Permette di aggiungere facilmente il caching a WordPress e di migliorare significativamente la velocità del sito web e i tempi di caricamento delle pagine.

Per maggiori dettagli, consultate il nostro tutorial su come installare e configurare WP Rocket in WordPress.

Dopo l’attivazione, è necessario visitare la pagina Impostazioni ” WP Rocket e passare alla scheda “Ottimizzazione dei file”.

Da qui è necessario selezionare l’opzione Minimizza file CSS.

WP Rocket vi mostrerà un avviso che indica che questa operazione potrebbe danneggiare il vostro sito. Procedete e cliccate sul pulsante “Attiva la minimizzazione dei CSS”. Potete sempre disattivare questa opzione se dovesse causare problemi al vostro sito.

Successivamente, è necessario scorrere verso il basso fino alla sezione File JavaScript.

Qui è sufficiente selezionare la casella accanto all’opzione “Minimizza i file JavaScript”.

Anche in questo caso, verrà visualizzato un avviso che indica che questa operazione potrebbe danneggiare il sito. Fare clic sul pulsante “Attiva la minimizzazione di JavaScript”.

Quindi, non dimenticate di fare clic sul pulsante “Salva modifiche” per memorizzare le impostazioni.

WP Rocket inizierà a minificare i file CSS e JavaScript. Potete cancellare la cache nelle impostazioni del plugin per assicurarvi che inizi a usare i CSS e i JavaScript minificati per il prossimo visitatore del sito.

Metodo 2. Minimizzare CSS/JavaScript in WordPress con SiteGround

Se utilizzate SiteGround come provider di hosting WordPress, potete minificare i file CSS utilizzando SiteGround Optimizer.

SiteGround Optimizer è un plugin di ottimizzazione delle prestazioni che funziona sulla propria piattaforma. Funziona bene con il PHP Ultrafast per migliorare i tempi di caricamento del sito.

È sufficiente installare e attivare il plugin SiteGround Optimizer sul proprio sito WordPress. Per maggiori dettagli, consultare la nostra guida passo-passo su come installare un plugin per WordPress.

Successivamente, è necessario fare clic sul menu SG Optimizer nella barra laterale dell’amministrazione di WordPress.

Si accede così alle impostazioni di SG Optimizer.

Da qui è necessario fare clic sul pulsante “Vai al frontend” sotto “Altre ottimizzazioni”.

Nella schermata successiva, sarà possibile gestire il front-end CSS.

È necessario attivare la levetta accanto all’opzione “Minify CSS files”.

Successivamente, è necessario passare alla scheda JavaScript e attivare la levetta accanto all’opzione “Minify JavaScript Files”.

È tutto! Ora potete svuotare la cache di WordPress e visitare il vostro sito web per caricare le versioni minificate dei file CSS e JS.

Metodo 3. Minimizzare CSS/JavaScript utilizzando Autoptimize

Questo metodo è consigliato agli utenti che non sono su SiteGround e non utilizzano WP Rocket.

Per prima cosa, è necessario installare e attivare il plugin Autoptimize. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l’attivazione, è necessario visitare la pagina Impostazioni ” Ottimizzazione automatica per configurare le impostazioni del plugin.

Da qui è necessario selezionare l’opzione “Ottimizza codice JavaScript” in Opzioni JavaScript.

Successivamente, è necessario scorrere verso il basso fino alle Opzioni CSS.

Una volta lì, si deve selezionare la casella accanto all’opzione “Ottimizza codice CSS”.

Non dimenticate di fare clic sul pulsante “Salva modifiche” per memorizzare le impostazioni.

Quindi è possibile fare clic sul pulsante Svuota cache per iniziare a utilizzare i file minificati. Il plugin può essere utilizzato anche per correggere JavaScript e CSS che bloccano il rendering in WordPress.

Speriamo che questo articolo vi abbia aiutato a minificare CSS e JavaScript sul vostro sito WordPress. Vi consigliamo di consultare anche la nostra guida sull’ottimizzazione di Core Web Vitals in WordPress e la nostra scelta dei migliori page builder drag-and-drop per WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.