Come risolvere il problema di minimizzazione CSS in WordPress?

WordPress utilizza software, temi e plugin di base per dare forma a un sito web. I fogli di stile a cascata o CSS sono la spina dorsale del design del tuo layout e ciascuno di questi elementi aggiungerà il proprio CSS. Puoi visualizzare i file CSS utilizzati sul tuo sito guardando l'origine della pagina nel browser. L'ottimizzazione di questi file CSS è necessaria per migliorare la velocità di caricamento della pagina di un sito WordPress.

Cos'è Minimizza CSS?

Questo aiuta a comprimere e ridurre le dimensioni del file, riducendo così il tempo necessario per scaricare questi file dal server. Gli sviluppatori utilizzano i commenti nei file CSS per scopi di comprensione e monitoraggio. Tuttavia, questi commenti non sono necessari per la funzionalità e quindi la loro rimozione non influirà sul design funzionante del tuo sito web.

Perché minimizzare i CSS?

La prossima domanda che ti viene in mente è perché qualcuno dovrebbe rimuovere spazi e commenti da un file di testo per ridurre le dimensioni di pochi KB. Il problema è che se non riduci le dimensioni del file, Google PageSpeed ​​Insights e altri strumenti di misurazione della velocità mostreranno una raccomandazione per ridurre al minimo i file CSS.

• Puoi trovare questo problema come "Riduci CSS" nella sezione "Opportunità" dello strumento Google PageSpeed ​​Insights.
• Lo strumento ti mostrerà anche la dimensione dei risparmi che puoi ottenere con la minimizzazione CSS.
• Il problema "Riduci CSS" interesserà First Contentful Paint (FCP) e Largest Contentful Paint (LCP). Poiché LCP fa parte di Core Web Vitals, la tua esperienza di pagina sarà influenzata se non minimizzi i file CSS.
• La pubblicazione di file CSS minimizzati risolverà questo problema e puoi scoprire che il controllo è stato superato e visualizzato in verde nella sezione "Verifiche superate".

Esempio di riduzione di contenuto e file

Di seguito è riportato un esempio di piccola parte di codice CSS con spazi e commenti.

 /* Content */ div.content{ padding-left: 390px; background: #fff; position: relative; } div.panes{ max-width: 1400px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 40px; } .section{ padding-top: 40px; } /* End Content */

Vai al nostro strumento di minimizzazione CSS e incolla il codice sopra.

Fai clic sul pulsante "Invia" per ottenere il codice minimizzato come risultato.

Il codice minimizzato apparirà come di seguito:

 div.content{padding-left:390px;background:#fff;position:relative;}div.panes{max-width:1400px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 40px;}.section{padding-top:40px;}

Come puoi vedere, tutti i commenti e gli spazi bianchi vengono rimossi nell'output minimizzato. La maggior parte dei temi WordPress utilizza il file style.css e puoi utilizzare lo stesso strumento per caricare l'intero file style.css e ottenere il file minimizzato come risultato.

Fai clic sul pulsante "Download" per scaricare il file minimizzato sul tuo computer.

Il file di output finale avrà una singola riga che rimuove tutti gli spazi bianchi e i commenti con dimensioni ridotte.

Minimizzare CSS e JS in WordPress

Ora che hai capito lo scopo della minimizzazione e come funziona. Tuttavia, l'utilizzo di strumenti online per minimizzare i file non funzionerà in WordPress per i seguenti motivi:

• Ci saranno molti file utilizzati dal tuo tema, dai plugin e dal core di WordPress. Minimizzare e sostituire manualmente i file originali è un'attività che richiede tempo.
• I file verranno aggiornati con il tema, il plug-in e l'aggiornamento principale di WordPress. Pertanto, il file caricato manualmente verrà sostituito con la versione normale ad ogni aggiornamento.

Per evitare questo problema manuale, puoi utilizzare un plug-in di minimizzazione per eseguire il lavoro in modo automatico e dinamico senza influire sul processo di aggiornamento. Questi plugin comprimeranno i tuoi file e verranno pubblicati con l'estensione .min che indica che il file minimizzato viene pubblicato al posto del file originale.

A volte, il tuo tema e i tuoi plug-in possono anche offrire una versione ridotta dei file e non è necessario ridurli nuovamente.

Come minimizzare i file CSS e JS in WordPress?

Ci sono molti plugin disponibili per minimizzare CSS e JavaScript in WordPress. Tuttavia, l'utilizzo dipende dalla situazione e spiegheremo diversi plugin che fanno il trucco per te. In Google PageSpeed ​​Insights, vedrai un collegamento a "Plugin WordPress" e fai clic su di esso. Questo ti porterà alla pagina del repository dei plugin di WordPress applicando un filtro di ricerca minify+CSS.

Rimozione delle stringhe di query

Prima di provare a minimizzare i tuoi file CSS, ti consigliamo di rimuovere i parametri della stringa di query allegati agli URL dei file. I lavori di minimizzazione per i file CSS e JS statici hanno un aspetto simile a quello di seguito:

 https://www.your-site.com/wp-content/themes/theme-name/style.css

Tuttavia, i file di temi e plug-in avranno un parametro di versione come stringa di query allegata all'URL. Generalmente, apparirà come sotto e questi URL sono considerati di natura dinamica.

 https://www.your-site.com/wp-content/themes/theme-name/style.css?ver=1626631618

Affinché la minimizzazione funzioni meglio, si consiglia di rimuovere le stringhe di query dagli URL dei file. Questo aiuterà anche CDN e altri sistemi (server e browser) a memorizzare nella cache i tuoi file in modo efficace. Considerando questo fatto, spiegheremo i plugin che offrono funzionalità di minimizzazione e rimozione di stringhe di query.

1. Colibrì – Opzione gratuita

Plugin come W3 Total Cache hanno centinaia di opzioni e sono difficili da configurare per i nuovi utenti di WordPress. D'altra parte, plugin semplici come Autoptimize combinano e minimizzano i file senza eseguirli separatamente. Questo potrebbe non funzionare su tutti gli ambienti di hosting, specialmente con i server HTTP/2 che non necessitano di combinare i file. Inoltre, la combinazione può facilmente interrompere il layout ed è meglio ridurre al minimo e combinare le opzioni separatamente per controllare il comportamento.

Hummingbird è uno dei migliori plugin gratuiti per minimizzare i CSS in WordPress. Offre anche una soluzione di memorizzazione nella cache completa in modo da poterla utilizzare come plug-in di memorizzazione nella cache per il tuo sito.

• Vai alla sezione "Plugin > Aggiungi nuovo" nel pannello di amministrazione di WordPress.
• Cerca "minifica" per trovare il plug-in "Colibrì - Ottimizza velocità, abilita cache, minimizza CSS e rinvia JS critico". Fai clic sul pulsante "Installa" e quindi su "Attiva" per iniziare a utilizzare il plug-in sul tuo sito.

• Il plugin ti chiederà di scansionare e consigliare le opzioni. Tuttavia, ci concentreremo sulle impostazioni per rimuovere la stringa di query e minimizzare i CSS in questo articolo.
• Vai alla sezione "Colibrì > Strumenti avanzati". Abilita l'opzione "Rimuovi stringhe di query dalle mie risorse" contro "Stringhe di query URL" nella sezione "Generale". Scorri verso il basso e fai clic sul pulsante "Salva modifiche".

• Vai al menu "Colibrì> Ottimizzazione risorse" e abilita l'opzione "Automatico" nella sezione "Risorse".
• Scorri verso il basso e abilita "File CSS" nella sezione "Configurazioni". Ricorda, appena sopra questa sezione hai un'opzione chiamata "Speedy" nella sezione "Risorse" per combinare i file CSS. Puoi disabilitarlo se trovi che il layout è rotto.

• Fai clic sul pulsante "Pubblica modifiche" per applicare le modifiche al tuo sito.

2. WP Rocket – Plugin Premium

WP Rocket è l'unico plugin premium che ha cambiato il modo in cui le persone ottimizzano i siti WordPress. Hai una semplice sezione del dashboard per navigare e attivare le opzioni richieste senza problemi.

• Acquista WP Rocket dal sito dello sviluppatore e installalo sul tuo sito.
• È necessario attivare la chiave di licenza per ottenere l'aggiornamento e il supporto del plug-in.
• Vai alla scheda "Ottimizzazione file" e abilita l'opzione "Riduci file CSS" nella sezione "File CSS".

Come accennato in precedenza, WP Rocket offre la minimizzazione e la combinazione come opzioni separate per i file CSS. Vedrai anche una raccomandazione per non abilitare l'opzione di combinazione per i server HTTP/2. In questo modo puoi attivare le opzioni richieste per ottenere un buon punteggio di velocità della pagina in Google PageSpeed ​​Insights e altri strumenti.

3. SiteGround Optimizer – Plugin fornito dall'hosting

Al giorno d'oggi, è una tendenza che molti provider di hosting offrano il proprio plug-in di ottimizzazione. Questa è l'opzione migliore perché il plugin funziona meglio sull'ambiente di hosting nativo. Spieghiamo qui con il plug-in SiteGround Optimizer e devi verificare con la tua società di hosting se offrono qualche plug-in per scopi di minimizzazione.

• Il plug-in SiteGround Optimizer viene preinstallato con il tuo sito quando installi WordPress nell'hosting SiteGround.
• Vai al menu "SiteGround> Frontend" e abilita "Riduci file CSS" nella sezione "CSS".

• Le tue impostazioni verranno salvate automaticamente e vedrai un messaggio di successo che mostra "Miniificazione CSS abilitata". Assicurati di fare clic sull'opzione "Elimina cache" visualizzata nella barra di amministrazione in alto per cancellare i vecchi file memorizzati nella cache.
• In caso di problemi nel frontend, utilizzare l'opzione "Escludi dalla minimizzazione CSS" per escludere file CSS specifici e risolvere il problema.

Come puoi vedere, il plug-in SiteGround Optimizer offre anche minimizzare e combinare come due diverse opzioni per gestire il risultato in modo efficace.

4. Minimizza con CDN come Cloudflare

Quasi tutti i proprietari di siti WordPress utilizzano Content Delivery Network (CDN) per accelerare la consegna di file statici HTML, CSS e JS. Poiché questi file sono statici e non cambiano continuamente, è una buona opzione utilizzare la funzione di minimizzazione nella configurazione del CDN invece di utilizzare in aggiunta un plug-in sul tuo sito. Qui spiegheremo l'abilitazione dell'opzione di minimizzazione in Cloudflare CDN. Potrebbe essere necessario verificare con il provider CDN come abilitare l'opzione di minimizzazione.

• Accedi all'account Cloudflare e seleziona il tuo sito per il quale desideri abilitare l'opzione Minify CSS.
• Vai alle impostazioni "Ottimizzazione" nella sezione "Velocità".
• Scorri verso il basso nel riquadro di destra e abilita l'opzione "CSS" contro "Riduci automaticamente".
• Le tue impostazioni vengono salvate automaticamente e la minimizzazione CSS è abilitata per il tuo sito WordPress con Cloudflare.

Ci sono due punti importanti a cui prestare attenzione quando si utilizza la funzione di minimizzazione con la configurazione del CDN:

• Assicurati che questa funzione non si sovrapponga se stai utilizzando il plug-in di memorizzazione nella cache o l'opzione di minimizzazione lato server. Ad esempio, il plug-in WP Rocket offre un componente aggiuntivo per configurare l'installazione di Cloudflare per evitare interferenze. Allo stesso modo, puoi configurare le impostazioni di Cloudflare nel pannello di hosting di SiteGround (chiamato Strumenti del sito).
• Ogni volta che aggiorni qualcosa sul tuo sito, vai alla configurazione del CDN ed elimina la cache. Ciò eviterà di servire vecchi file CSS e JS e inizierà a utilizzare le ultime versioni aggiornate.

Come faccio a sapere che la minimizzazione funziona?

Il modo più semplice per verificare se i tuoi file sono minimizzati o meno è controllare l'origine della pagina. Prima di abilitare le opzioni di minimizzazione, apri una qualsiasi delle tue pagine in Chrome o in un altro browser, fai clic con il pulsante destro del mouse su un'area vuota e seleziona l'opzione "Visualizza origine pagina". Questo aprirà il contenuto sorgente della pagina in una nuova scheda in cui puoi cercare style.css del tema. Ad esempio, di seguito viene mostrato come appare con il tema figlio GeneratePress che mostra style.css con il numero di versione.

Dopo aver rimosso la stringa di query e applicato minify, dovresti trovare tutti i file statici compressi e minimizzati con la versione .min.css. Nel nostro esempio, style.css del tema figlio GeneratePress sarà disponibile come style.min.css senza alcuna stringa di query come di seguito:

Un altro modo per verificare è testare il tuo sito web nello strumento Google PageSpeed ​​Insights. Dovresti vedere la voce "Riduci CSS" nella sezione "Verifiche superate" in colore verde. Questo indica che i file sono compressi e serviti con dimensioni ridotte.

Parole finali

Minimizzare CSS in WordPress è un compito semplice utilizzando plugin che aiutano a ridurre le dimensioni del file. Puoi utilizzare una delle opzioni sopra menzionate e risolvere il problema di minimizzazione CSS nello strumento Google PageSpeed ​​Insights. Sebbene il plug-in gratuito sia sufficiente per farlo, consigliamo sempre di utilizzare un plug-in premium come WP Rocket per ottenere un supporto adeguato, se necessario.