Eliminare Risorse Blocco Rendering WordPress (Guida 2025)

1Shares

Imbattersi in problemi con JavaScript e CSS che bloccano il rendering sul tuo sito WordPress può essere frustrante. Questi problemi possono rallentare il tuo sito web e influire sulle sue prestazioni.

Un sito lento può allontanare i visitatori e avere un impatto negativo sul posizionamento nei motori di ricerca. È fondamentale imparare come eliminare risorse blocco rendering.

Quando controlli il tuo sito web su Google PageSpeed Insights, potresti vedere un suggerimento per eliminare queste risorse che bloccano il rendering. Sfortunatamente, lo strumento non fornisce istruzioni chiare su come risolvere questo problema specifico in WordPress.

La buona notizia è che esistono strumenti che possono rendere la correzione di JavaScript e CSS che bloccano il rendering meno complicata di quanto sembri.

Puoi utilizzare un plugin di caching come WP Rocket o un plugin di ottimizzazione come Autoptimize per ottimizzare il tuo sito minimizzando e differendo gli script, il che riduce i tempi di caricamento e migliora i punteggi di PageSpeed.

In questa guida, ti accompagneremo attraverso i passaggi per eliminare risorse blocco rendering sul tuo sito WordPress.

1. Cosa Sono le Risorse JavaScript e CSS che Bloccano il Rendering?

Le risorse JavaScript e CSS che bloccano il rendering sono file che impediscono al browser di visualizzare (“renderizzare”) il contenuto principale di una pagina web prima che questi file stessi siano stati scaricati ed elaborati.

Ogni sito web WordPress ha un tema e dei plugin che aggiungono file JavaScript (per interattività, animazioni, tracciamenti) e CSS (per lo stile e il layout) al frontend del tuo sito.

Questi script possono aumentare il tempo di caricamento della pagina e, soprattutto, possono “bloccare” il rendering della pagina visibile.

Eliminare Risorse Blocco Rendering WordPress Guida 2025 — Problema di blocco del rendering evidenziato in Google Pagespeed Insights

Il browser di un utente, quando incontra un file JS o CSS nel codice HTML (tipicamente nella sezione <head>), deve mettere in pausa la costruzione della pagina visibile, scaricare quel file, eseguirlo (per JS) o applicarlo (per CSS), e solo dopo può continuare a mostrare il resto del contenuto.

Questo significa che gli utenti, specialmente con connessioni più lente, devono attendere qualche millisecondo (o secondo!) in più per vedere effettivamente qualcosa sullo schermo, anche se il contenuto testuale potrebbe essere già stato scaricato.

L’obiettivo è eliminare risorse blocco rendering non essenziali per la visualizzazione iniziale. Questi script e fogli di stile sono definiti “render-blocking“.

I proprietari di siti web WordPress che cercano di ottenere un punteggio Google PageSpeed elevato dovranno affrontare questo problema per ottimizzare i Core Web Vitals, in particolare il Largest Contentful Paint (LCP).

2. Che Cos’è il Punteggio Google PageSpeed?

Google PageSpeed Insights è uno strumento di test della velocità del sito web creato da Google per aiutare i proprietari di siti web a ottimizzare e testare i loro siti.

Questo strumento testa il tuo sito web rispetto alle linee guida sulla velocità di Google e offre suggerimenti per migliorare il tempo di caricamento della pagina.

Ti mostra un punteggio basato sul numero di “audit” (controlli) che il tuo sito supera. La maggior parte dei siti web ottiene un punteggio tra 50 e 70.

Tuttavia, alcuni proprietari di siti web si sentono obbligati a raggiungere 100 (il punteggio più alto che una pagina può ottenere).

3. È Davvero Necessario il Punteggio Perfetto “100”?

Lo scopo di Google PageSpeed Insights è fornirti linee guida per migliorare la velocità e le prestazioni del tuo sito. Detto questo, non sei obbligato a seguire queste regole alla lettera per ottenere 100.

Ricorda che la velocità è solo una delle tante metriche di ottimizzazione per i motori di ricerca (SEO) che aiutano Google a determinare come classificare il tuo sito. La velocità è così importante perché migliora l’esperienza utente sul tuo sito.

Una migliore esperienza utente richiede molto più della semplice velocità. Devi anche offrire informazioni utili, un’interfaccia utente migliore e contenuti coinvolgenti con testo, immagini e video.

Quindi, il tuo obiettivo dovrebbe essere quello di creare un sito web veloce che offra un’ottima esperienza utente, non necessariamente raggiungere un punteggio arbitrario di 100.

Consigliamo di utilizzare le regole di Google PageSpeed come suggerimenti. Se puoi implementarli facilmente senza rovinare l’esperienza utente, ottimo. Altrimenti, dovresti cercare di fare il più possibile per ottimizzare, e poi non preoccuparti eccessivamente del resto.

Eliminare risorse blocco rendering è un passo importante, ma non l’unico.

4. Come Eliminare Risorse Blocco Rendering in WordPress (Metodi)

Con questo in mente, daremo un’occhiata a cosa puoi fare per correggere JavaScript e CSS che bloccano il rendering in WordPress. Tratteremo 2 metodi basati su plugin che aiuteranno a eliminare risorse blocco rendering in WordPress.

Puoi scegliere quello che funziona meglio per il tuo sito web:

Metodo 1: Risolvere con WP Rocket (Plugin Premium)
Metodo 2: Risolvere con Autoptimize (Plugin Gratuito)

Immergiamoci e facciamo funzionare il tuo sito senza intoppi!

Metodo 1: Risolvere con WP Rocket (Plugin Premium)

Per questo metodo, useremo il plugin WP Rocket. È il miglior plugin di caching e ottimizzazione per WordPress sul mercato e ti consente di migliorare rapidamente le prestazioni del tuo sito web senza competenze tecniche o una configurazione complicata.

Innanzitutto, devi installare e attivare il plugin WP Rocket. Per maggiori dettagli, puoi consultare la nostra guida dettagliata su come installare un plugin di WordPress.

WP Rocket funziona immediatamente dopo l’attivazione: attiverà il caching con impostazioni ottimali per il tuo sito web. Per impostazione predefinita, non attiva le opzioni di ottimizzazione JavaScript e CSS.

Queste ottimizzazioni possono potenzialmente influire sull’aspetto del tuo sito web o su alcune funzionalità, motivo per cui il plugin ti consente di abilitare queste impostazioni facoltativamente.

Per fare ciò, devi visitare la pagina Impostazioni » WP Rocket e passare alla scheda “Ottimizzazione File“.

Da qui, scorri semplicemente fino alla sezione “File CSS” e spunta le caselle accanto a:

Minifica file CSS: Rimuove spazi bianchi e commenti dai file CSS per ridurne le dimensioni.
Combina file CSS: Unisce più file CSS in uno solo per ridurre il numero di richieste HTTP (meno rilevante con HTTP/2, ma può ancora dare benefici). Testa attentamente dopo aver attivato questa opzione, a volte può causare problemi.
Impostazioni di ottimizzazione CSS in WP Rocket
Ottimizza consegna CSS: Questa è l’opzione chiave per eliminare risorse blocco rendering relative al CSS. WP Rocket offre due metodi:
- Rimuovi CSS non utilizzato (Remove Unused CSS): Questo metodo (generalmente il più performante ma più intensivo lato server per la generazione iniziale) analizza le tue pagine e genera CSS critico specifico per ogni pagina (il CSS necessario per visualizzare la parte superiore della pagina – “above the fold”), inserendolo inline nell’HTML. Il resto del CSS viene caricato in modo asincrono (non bloccante).
  Rimozione di CSS inutilizzati con WP Rocket
- Carica CSS asincronamente (Load CSS Asynchronously): Questo metodo genera un CSS critico “universale” per l’intero sito (o per tipi di post) e lo carica inline, mentre il resto del CSS viene caricato in modo asincrono. È meno preciso ma più veloce da generare.

Nota: L’ottimizzazione della consegna CSS, specialmente “Rimuovi CSS non utilizzato“, potrebbe influire sull’aspetto iniziale del tuo sito web (un breve “flash” di contenuto non stilizzato o FOUC). Devi testare accuratamente il tuo sito web su più dispositivi e dimensioni dello schermo.

Successivamente, devi scorrere fino alla sezione “File JavaScript“.

Da qui, puoi spuntare le seguenti opzioni per il massimo miglioramento delle prestazioni:

Minifica file JavaScript: Rimuove spazi bianchi e commenti per ridurre le dimensioni.
Combina file JavaScript: Unisce i file JS. Simile al CSS, testa attentamente perché può rompere la funzionalità se l’ordine degli script è importante e non gestito correttamente.
Carica JavaScript in modalità differita (Load JavaScript deferred): Aggiunge l’attributo defer ai tag <script>. Il browser scarica lo script in parallelo mentre analizza l’HTML, ma lo esegue solo dopo che l’HTML è stato completamente analizzato, prima dell’evento DOMContentLoaded. Questo elimina il blocco del rendering.
Ritarda l’esecuzione di JavaScript (Delay JavaScript execution): Una tecnica più aggressiva. Ritarda il caricamento di tutto il JavaScript (inclusi script di terze parti come Analytics, Pixel, ecc.) finché non c’è un’interazione dell’utente (scroll, clic, ecc.). Molto efficace per migliorare il tempo di caricamento iniziale e i punteggi PageSpeed, ma deve essere testato a fondo perché potrebbe ritardare funzionalità importanti se non si configurano correttamente le esclusioni.
(Opzionale) Modalità sicura per jQuery: Lascia questa opzione deselezionata a meno che tu non riscontri problemi specifici con script che usano jQuery in modo non standard (inline).
Ottimizzare la distribuzione di JavaScript

Non dimenticare di fare clic sul pulsante “Salva Modifiche” per memorizzare le tue impostazioni. Dopodiché, potresti anche voler svuotare la cache in WP Rocket prima di testare nuovamente il tuo sito web con Google PageSpeed Insights.

Sul nostro sito di test, siamo riusciti a ottenere un punteggio molto alto e il problema del blocco del rendering è stato risolto sia nei punteggi mobile che desktop dopo aver configurato correttamente WP Rocket.

Metodo 2: Risolvere con Autoptimize (Plugin Gratuito)

Per questo metodo, utilizzeremo un plugin separato realizzato specificamente per migliorare la consegna dei file CSS e JS del tuo sito web. Sebbene questo plugin svolga il suo lavoro, non ha le altre potenti funzionalità (caching di pagina, ottimizzazione database, ecc.) offerte da WP Rocket.

La prima cosa che devi fare è installare e attivare Autoptimize, un plugin gratuito per accelerare le prestazioni del sito web. Per maggiori dettagli, puoi consultare la nostra guida dettagliata su come installare un plugin di WordPress.

Una volta attivato, devi andare su Impostazioni » Autoptimize per configurare le impostazioni del plugin.

Innanzitutto, spunta la casella accanto a “Ottimizza codice JavaScript?” nel blocco “Opzioni JavaScript“.

Qui, puoi anche scegliere di aggregare (combinare) i file JS spuntando “Aggrega file JS?“. Tuttavia, come per WP Rocket, testa attentamente se abiliti l’aggregazione. Potrebbe essere meglio lasciarla disattivata inizialmente.

Successivamente, scorri verso il basso fino alla casella “Opzioni CSS” e spunta l’opzione “Ottimizza codice CSS?“.

Analogamente a JS, puoi scegliere se aggregare i file CSS con “Aggrega file CSS?” (testa attentamente). Un’opzione chiave qui per eliminare risorse blocco rendering è “Inline e Defer CSS?” (o una simile opzione per generare CSS critico).

Abilitare questa opzione farà sì che Autoptimize generi il CSS critico e lo inserisca inline, caricando il resto in modo asincrono.

Puoi ora fare clic sul pulsante “Salva le modifiche e svuota la cache” per memorizzare le tue impostazioni.

Vai avanti e testa il tuo sito web con lo strumento PageSpeed Insights. Con queste impostazioni di base, abbiamo risolto con successo il problema del blocco del rendering sul nostro sito demo.

Se ci sono ancora script che bloccano il rendering, puoi tornare alla pagina delle impostazioni del plugin e rivedere le impostazioni avanzate sia nelle opzioni JavaScript che CSS.

Ad esempio, puoi consentire al plugin di includere JS inline o rimuovere script che sono esclusi per impostazione predefinita (come jquery.js – attenzione a non escluderlo se necessario).

Quindi, fai semplicemente clic sul pulsante “Salva le modifiche e svuota la cache” per salvare le modifiche e svuotare la cache del plugin.

Una volta terminato, vai avanti e controlla di nuovo il tuo sito web con lo strumento PageSpeed Insights.

Come Funziona Autoptimize?

Autoptimize aggrega (opzionalmente) tutti i JavaScript e CSS accodati. Successivamente, crea file CSS e JavaScript minimizzati e serve copie memorizzate nella cache come async o defer (per JS) o con CSS critico inline (per CSS).

Ciò ti consente di risolvere il problema degli script e degli stili che bloccano il rendering. Tuttavia, tieni presente che, come qualsiasi strumento di ottimizzazione aggressivo, può anche influire sulle prestazioni o sull’aspetto del tuo sito web se non configurato correttamente.

5. Cosa Fare se le Risorse che Bloccano il Rendering Persistono?

A seconda di come i plugin e il tuo tema WordPress utilizzano JavaScript e CSS, può essere difficile eliminare risorse blocco rendering completamente senza rompere qualche funzionalità.

Mentre gli strumenti sopra possono aiutare moltissimo, i tuoi plugin potrebbero aver bisogno di determinati script per funzionare correttamente a un diverso livello di priorità o in un ordine specifico.

In tal caso, le soluzioni sopra (specialmente la combinazione aggressiva o il ritardo JS) possono interrompere la funzionalità di tali plugin o farli comportare in modo imprevisto.

Se, dopo aver provato le ottimizzazioni dei plugin, vedi ancora avvisi significativi su PageSpeed Insights o noti problemi sul sito:

Sii Selettivo: Invece di applicare ottimizzazioni (come delay JS o remove unused CSS) a tutto il sito, usa le opzioni di esclusione nei plugin (WP Rocket e Autoptimize le hanno) per escludere script o file CSS specifici che causano problemi. Potrebbe essere necessario sperimentare per trovare il giusto equilibrio.
Controlla Script di Terze Parti: Spesso, gli script di terze parti (Analytics, Pixel, Chat, Ads) sono i maggiori colpevoli. Valuta se sono tutti necessari. Caricali localmente se possibile (con plugin come Perfmatters o WP Rocket) o ritardane l’esecuzione.
Ottimizzazione del Tema: Un tema mal codificato può caricare molte risorse non necessarie o accodarle in modo errato. Considera un tema leggero e ben ottimizzato (come Astra, GeneratePress, Kadence).
Valuta i Plugin: Usa strumenti come Query Monitor per identificare plugin che caricano molti script sul frontend. C’è un’alternativa più leggera?
Non Ossessionarti con il 100: Ricorda l’obiettivo principale: un sito veloce e funzionale per gli utenti. Un punteggio di 90+ con un’ottima esperienza reale è meglio di un 100 ottenuto rompendo funzionalità.

Invece di mirare a eliminare completamente ogni avviso, a volte è meglio adottare approcci alternativi per mitigare l’impatto e velocizzare il sito in generale.

6. Ottimizzazioni Correlate a Livello Server (Apache/Nginx)

Sebbene i plugin facciano il grosso del lavoro per eliminare risorse blocco rendering, alcune configurazioni a livello server possono supportare questi sforzi migliorando la consegna generale delle risorse statiche.

Compressione Gzip/Brotli

La compressione riduce le dimensioni dei file (HTML, CSS, JS) inviati dal server al browser, velocizzando il download. Assicurati che sia abilitata sul tuo server.

Apache: Solitamente abilitata tramite il modulo mod_deflate nel file .htaccess o nella configurazione principale di Apache:

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
</IfModule>

Nginx: Abilitata tramite il modulo ngx_http_gzip_module nel file nginx.conf o nel server block specifico:
```
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_types text/plain text/css text/xml application/json application/javascript application/xml+rss text/javascript image/svg+xml;
```
Brotli offre una compressione migliore ma richiede l’installazione del modulo ngx_brotli e una configurazione simile a Gzip.

Caching del Browser (Expires Headers)

Questo dice ai browser per quanto tempo possono conservare una copia locale delle risorse statiche (CSS, JS, immagini), riducendo le richieste al server per le visite successive.

Apache: Configurato tramite mod_expires nel file .htaccess:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  ExpiresByType application/x-javascript "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
  ExpiresByType image/x-icon "access plus 1 year"
  ExpiresDefault "access plus 2 days"
</IfModule>

Nginx: Configurato usando la direttiva expires all’interno di blocchi location specifici nel server block:

location ~* \.(jpg|jpeg|gif|png|webp|svg|ico)$ {
    expires 1y;
    add_header Cache-Control "public";
}

location ~* \.(css|js)$ {
    expires 1M;
    add_header Cache-Control "public";
}

Queste ottimizzazioni server, sebbene non eliminino direttamente il blocco del rendering iniziale, contribuiscono a un’esperienza utente complessivamente più veloce.

Molti plugin di caching (come WP Rocket) possono gestire automaticamente l’aggiunta di queste regole per Apache. Per Nginx, spesso richiedono una configurazione manuale a livello server.

Approfondimenti e Risorse Correlate

Ora che hai imparato come affrontare le risorse che bloccano il rendering, potresti voler approfondire altri aspetti legati alle prestazioni e all’ottimizzazione del tuo sito WordPress.

Ecco alcune guide che potrebbero esserti utili: