Chi Siamo Area Clienti Promo del Mese Dicono di Noi Portfolio FAQ Blog
Contattaci
WordPress

WP Rocket: Ottimizzazione File CSS e JavaScript per la Velocita

Gianluca Gentile
Gianluca Gentile
· 7 min di lettura

WP Rocket: Ottimizzazione File CSS e JavaScript per la Velocita

La ottimizzazione dei file CSS e JavaScript rappresenta una delle funzionalita piu potenti di WP Rocket e anche quella che puo avere il maggiore impatto sulle prestazioni del tuo sito WordPress. File CSS e JavaScript non ottimizzati sono tra le cause principali di punteggi bassi su Google PageSpeed Insights e di tempi di caricamento elevati. In questa guida approfondiamo ogni singola opzione della sezione Ottimizzazione File di WP Rocket, spiegando come configurarla correttamente e come risolvere i problemi piu comuni.

Perche CSS e JavaScript Rallentano il Tuo Sito

Un sito WordPress medio carica tra 10 e 30 file CSS e JavaScript diversi, provenienti dal tema, dai plugin e da servizi esterni come Google Analytics, font e widget social. Ogni file rappresenta una richiesta HTTP separata che il browser deve completare prima di poter visualizzare la pagina. Inoltre, molti di questi file contengono codice non necessario per la pagina specifica che il visitatore sta visualizzando.

I problemi principali sono:

Sezione ottimizzazione file di WP Rocket con le opzioni per minificazione CSS e JavaScript e rimozione CSS non utilizzato

Ottimizzazione dei File CSS

Minifica i File CSS

La minificazione rimuove spazi vuoti, commenti e caratteri non necessari dai file CSS, riducendo la loro dimensione senza alterare la funzionalita. Questa opzione e sicura da attivare nella stragrande maggioranza dei casi e produce una riduzione media delle dimensioni dei file CSS del 15-20 per cento.

Ti consigliamo di attivare sempre questa opzione. In rari casi, la minificazione puo causare problemi con file CSS che contengono sintassi non standard. Se noti problemi di visualizzazione dopo la attivazione, prova a escludere i file CSS specifici che causano il problema.

Combina i File CSS

Questa opzione unisce tutti i file CSS in un unico file, riducendo il numero di richieste HTTP. Tuttavia, con il protocollo HTTP/2 (supportato dalla maggior parte dei server moderni), il vantaggio di combinare i file e ridotto perche HTTP/2 gestisce efficientemente le richieste multiple in parallelo.

WP Rocket stesso sconsiglia questa opzione per i siti che utilizzano HTTP/2. Ti consigliamo di lasciarla disattivata a meno che il tuo server non supporti HTTP/2 o che test specifici dimostrino un miglioramento delle prestazioni sul tuo sito.

Ottimizza la Distribuzione del CSS (Remove Unused CSS)

Questa e la funzionalita piu impattante di tutta la sezione ottimizzazione file. La opzione “Remove Unused CSS” (Rimuovi CSS non utilizzato) analizza ogni pagina del tuo sito e rimuove tutto il codice CSS che non viene utilizzato in quella pagina specifica. Questo puo ridurre la dimensione del CSS caricato fino all 85 per cento.

Il funzionamento e il seguente: WP Rocket invia la URL di ogni pagina al suo servizio cloud, che analizza il contenuto e identifica quali regole CSS sono effettivamente necessarie. Il CSS non utilizzato viene rimosso e il CSS rimanente viene servito in modo ottimizzato.

Vantaggi della rimozione del CSS non utilizzato:

Attenzione: questa funzionalita puo occasionalmente causare problemi di visualizzazione se rimuove CSS che in realta e necessario ma non viene rilevato dalla analisi automatica. Questo succede tipicamente con elementi che appaiono dinamicamente (menu a tendina, popup, slider) o con CSS applicato tramite JavaScript.

Ottimizzazione dei File JavaScript

Minifica i File JavaScript

Come per il CSS, la minificazione del JavaScript rimuove commenti, spazi e caratteri non necessari. Attiva questa opzione per una riduzione media delle dimensioni del 10-15 per cento. E generalmente sicura, ma in caso di problemi puoi escludere singoli file.

Combina i File JavaScript

Anche per il JavaScript, la combinazione dei file e sconsigliata sui server con HTTP/2. Inoltre, combinare file JavaScript puo causare piu problemi rispetto alla combinazione dei file CSS, perche i conflitti tra script sono piu frequenti. Ti consigliamo di lasciare questa opzione disattivata.

Carica JavaScript in Modo Differito (Defer)

Questa opzione aggiunge la attributo “defer” ai file JavaScript, facendo in modo che vengano scaricati in parallelo con il rendering della pagina ma eseguiti solo dopo che il parsing HTML e completato. Questo elimina il blocco del rendering causato dal JavaScript e migliora significativamente il First Contentful Paint (FCP) e il Largest Contentful Paint (LCP).

Ti consigliamo di attivare questa opzione e di utilizzare la modalita sicura (Safe Mode) che esclude automaticamente jQuery dalla deferrizzazione. jQuery e utilizzato da moltissimi temi e plugin e la sua deferrizzazione puo causare errori JavaScript visibili agli utenti.

Ritarda la Esecuzione del JavaScript (Delay)

Questa e la funzionalita piu aggressiva di ottimizzazione JavaScript. La opzione “Delay JavaScript Execution” impedisce completamente il caricamento di determinati script fino a quando il visitatore non interagisce con la pagina (click, scroll, tocco, pressione di un tasto). Questo migliora drasticamente i tempi di caricamento iniziale perche il browser non deve scaricare ed elaborare script che non servono immediatamente.

Script che beneficiano particolarmente del ritardo:

Dashboard WP Rocket che mostra lo stato della ottimizzazione dei file e le opzioni disponibili

Come Gestire le Esclusioni

Le esclusioni sono fondamentali per evitare problemi causati dalla ottimizzazione aggressiva dei file. WP Rocket permette di escludere file specifici dalla minificazione, dalla combinazione, dalla deferrizzazione e dal ritardo. Ecco come procedere:

  1. Attiva la opzione di ottimizzazione che desideri
  2. Testa il sito in una finestra di navigazione in incognito
  3. Se noti problemi (layout rotto, funzionalita non funzionanti, errori JavaScript nella console), identifica il file responsabile
  4. Aggiungi il percorso del file nella sezione esclusioni della opzione che causa il problema
  5. Svuota la cache e verifica che il problema sia risolto

Come Identificare il File Problematico

Per identificare quale file causa problemi dopo la attivazione di una opzione di ottimizzazione, utilizza gli strumenti per sviluppatori del browser (F12). Controlla la scheda Console per errori JavaScript e la scheda Elements per verificare che gli stili CSS siano applicati correttamente. Se non riesci a identificare il file specifico, prova a disattivare la opzione e riattivala escludendo i file uno alla volta.

Configurazione Consigliata per la Maggior Parte dei Siti

Ecco la configurazione che consigliamo come punto di partenza per la maggior parte dei siti WordPress:

Risoluzione dei Problemi Comuni

Layout Rotto dopo la Ottimizzazione CSS

Se il layout del sito appare rotto dopo aver attivato la rimozione del CSS non utilizzato, prova queste soluzioni in ordine:

  1. Svuota la cache di WP Rocket e del browser
  2. Aggiungi le URL delle pagine problematiche nella lista di esclusione della opzione Remove Unused CSS
  3. Se il problema riguarda elementi dinamici (menu, slider), aggiungi i selettori CSS nella sezione “Safelist” per impedirne la rimozione
  4. Contatta il supporto di WP Rocket con dettagli sul problema specifico

Funzionalita JavaScript Non Funzionanti

Se dopo la deferrizzazione o il ritardo del JavaScript alcune funzionalita smettono di funzionare (slider, menu hamburger, moduli di contatto), identifica lo script responsabile dalla console del browser e aggiungilo alle esclusioni della opzione corrispondente.

Per una configurazione professionale della ottimizzazione dei file CSS e JavaScript, contattaci per una analisi personalizzata del tuo sito. Offriamo anche servizi di hosting WordPress con ottimizzazione delle prestazioni inclusa.

Guide Correlate della Serie WP Rocket

#defer js #minify javascript #ottimizzazione css #remove unused css