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

WP Rocket: Delay JavaScript Execution — Guida Completa

Gianluca Gentile
Gianluca Gentile
· 10 min di lettura

Che Cosa Significa Delay JavaScript Execution

La funzionalita Delay JavaScript Execution di WP Rocket e uno degli strumenti piu efficaci per migliorare le prestazioni percepite di un sito WordPress. Il principio di funzionamento e semplice: invece di caricare ed eseguire tutti gli script JavaScript al caricamento della pagina, WP Rocket li mette in pausa fino a quando l utente non interagisce con la pagina — con un click, uno scroll, un tocco su dispositivo mobile o la pressione di un tasto.

Questa tecnica si basa su un concetto fondamentale: la maggior parte degli script JavaScript non e necessaria per il rendering iniziale della pagina. Script come Google Analytics, pixel di tracciamento, widget di chat, slider, lightbox e social share button possono attendere qualche secondo senza che l utente percepisca alcuna differenza. Nel frattempo, il browser puo concentrare tutte le risorse sul rendering del contenuto visibile, producendo un First Contentful Paint e un Largest Contentful Paint significativamente piu rapidi.

La differenza rispetto alla navigazione senza Delay JS e spesso impressionante. Su un sito con 15-20 script esterni, il tempo di caricamento percepito puo passare da 3-4 secondi a meno di 1 secondo, perche il browser non deve piu scaricare, analizzare e eseguire centinaia di kilobyte di JavaScript prima di mostrare il contenuto.

Delay vs Defer: Due Approcci Diversi

E importante distinguere tra Delay JavaScript Execution e l attributo HTML defer, perche sono due tecniche differenti con effetti diversi.

L attributo defer dice al browser di scaricare lo script in parallelo al parsing dell HTML ma di eseguirlo solo dopo che il parsing e completato. Lo script viene comunque scaricato durante il caricamento della pagina e eseguito automaticamente, solo in un momento diverso. WP Rocket offre questa opzione come “Load JavaScript Deferred” ed e meno aggressiva del Delay.

Il Delay, invece, impedisce completamente il download e l esecuzione dello script fino all interazione dell utente. Lo script non viene nemmeno scaricato: il tag <script> viene modificato con un tipo personalizzato (type="rocketlazyloadscript") che il browser ignora. Solo quando l utente interagisce, un piccolo script di WP Rocket ripristina il tipo originale e attiva il caricamento.

In termini pratici, defer migliora il rendering iniziale ma non riduce il peso totale della pagina durante il caricamento. Delay elimina completamente il peso degli script fino all interazione, producendo un miglioramento molto piu significativo nelle metriche Core Web Vitals.

Impostazioni di ottimizzazione JavaScript in WP Rocket con opzione Delay JS

Impatto sui Core Web Vitals

Delay JavaScript Execution ha un impatto diretto su diverse metriche dei Core Web Vitals, le metriche che Google utilizza per valutare l esperienza utente e che influenzano il posizionamento nei risultati di ricerca.

Interaction to Next Paint (INP)

INP misura la reattivita del sito alle interazioni dell utente. Paradossalmente, il Delay JS puo avere un effetto negativo sull INP se non configurato correttamente. Quando l utente clicca per la prima volta, il browser deve caricare e eseguire tutti gli script ritardati contemporaneamente. Se ci sono molti script pesanti, questa esecuzione simultanea puo bloccare il main thread e ritardare la risposta all interazione.

Per mitigare questo effetto, e fondamentale escludere dal delay gli script che gestiscono direttamente le interazioni dell utente (menu di navigazione, accordion, tab, filtri di ricerca). Solo gli script non interattivi — tracciamento, analytics, widget passivi — dovrebbero essere ritardati.

Time to Interactive (TTI)

TTI misura il tempo necessario perche la pagina diventi completamente interattiva. Con Delay JS attivo, il TTI misurato dagli strumenti automatici (Lighthouse, PageSpeed) appare significativamente migliore, perche gli script ritardati non vengono conteggiati fino all interazione. Questo porta a punteggi PageSpeed molto piu alti, anche se l esperienza reale dell utente durante la prima interazione potrebbe essere leggermente diversa.

Largest Contentful Paint (LCP)

Il beneficio piu consistente del Delay JS si manifesta sull LCP. Eliminando il carico di JavaScript durante il rendering iniziale, il browser puo allocare piu risorse al download e rendering delle immagini e del testo above-the-fold. Miglioramenti di 0.5-1.5 secondi sull LCP sono comuni dopo l attivazione del Delay JS.

Quali Script Ritardare

La regola generale e semplice: ritarda tutto cio che non e necessario per la visualizzazione iniziale e l interazione immediata dell utente. Ecco una classificazione pratica degli script in base alla loro idoneita al ritardo.

Script da ritardare con sicurezza:

Script da NON ritardare (escludere sempre):

Configurare le Esclusioni in WP Rocket

Per escludere script dal Delay JS, accedi alla sezione Ottimizzazione File di WP Rocket e scorri fino alla sottosezione “Delay JavaScript Execution”. Qui trovi un campo di testo dove puoi inserire i pattern degli script da escludere, uno per riga.

I pattern possono essere parti dell URL dello script o parole chiave contenute nel tag script. Ad esempio:

WP Rocket include gia alcune esclusioni predefinite per script noti che causano problemi se ritardati. Ma ogni sito ha una configurazione unica, e nella maggior parte dei casi dovrai aggiungere esclusioni personalizzate.

Impostazioni avanzate di WP Rocket per le esclusioni JavaScript

Script Interni vs Script Esterni

WP Rocket gestisce in modo diverso gli script interni (ospitati sul tuo server) e quelli esterni (caricati da domini terzi). Gli script esterni, come quelli di Google Analytics (googletagmanager.com) o Facebook (connect.facebook.net), vengono ritardati in modo particolarmente efficace perche il browser non deve nemmeno stabilire una connessione DNS con il server esterno fino all interazione.

Per gli script interni, il ritardo e altrettanto efficace ma puo creare problemi di dipendenza. Se uno script interno dipende da un altro script interno (ad esempio, uno slider che dipende da jQuery), entrambi devono essere ritardati oppure entrambi esclusi. Non puoi ritardare jQuery e escludere lo slider che lo richiede, perche quando lo slider tenta di eseguirsi troverebbe jQuery non ancora disponibile.

La gestione delle dipendenze e la sfida principale del Delay JS. WP Rocket risolve parzialmente questo problema caricando tutti gli script ritardati nell ordine originale al momento dell interazione, ma alcune librerie complesse con catene di dipendenze possono comunque causare errori di esecuzione.

Problemi di Compatibilita e Come Risolverli

Delay JavaScript Execution puo causare diversi tipi di problemi. Ecco i piu comuni e le relative soluzioni.

Cookie Banner Non Visibile

Se il cookie banner non appare al caricamento della pagina, lo script del banner viene ritardato. Questo e un problema critico per la conformita GDPR: il banner DEVE apparire prima di qualsiasi interazione. Aggiungi il nome dello script del tuo cookie plugin alla lista esclusioni (ad esempio cookieyes, complianz, iubenda).

Menu Mobile Non Funzionante

Se il menu hamburger non risponde al primo tocco su mobile, lo script che gestisce l apertura del menu e ritardato. Il primo tocco attiva il caricamento degli script, il secondo apre effettivamente il menu. Escludi lo script di navigazione del tema.

Google Analytics Non Traccia la Prima Pagina

Per definizione, se GA e ritardato, il pageview della prima pagina non viene tracciato fino all interazione. Se l utente legge la pagina senza interagire (scroll, click) e poi la chiude, la visita non viene registrata. Questo e un compromesso accettabile per la maggior parte dei siti: le prestazioni migliorano significativamente e la perdita di dati di tracciamento e generalmente inferiore al 5%.

Se la precisione del tracciamento e prioritaria, puoi escludere GA/GTM dal delay. In alternativa, utilizza l addon di WP Rocket per Google Analytics che ospita lo script localmente e lo ottimizza senza ritardarlo completamente.

Slider o Animazioni Non Partono

Se lo slider above-the-fold non si attiva fino all interazione, l utente vede immagini statiche impilate o un contenitore vuoto. Escludi la libreria dello slider (ad esempio swiper, slick, owl, splide) e il file di inizializzazione.

Metodologia di Test

Per configurare correttamente Delay JS senza rompere il sito, segui questa metodologia di test sistematica.

Fase 1 — Baseline. Prima di attivare il Delay JS, esegui un test PageSpeed su 3-5 pagine chiave del sito (homepage, una pagina interna, un articolo del blog, una landing page). Salva i risultati come riferimento.

Fase 2 — Attivazione completa. Attiva Delay JS senza alcuna esclusione. Questa e la configurazione piu aggressiva e probabilmente rompera qualcosa, ma ti da il punteggio massimo raggiungibile come riferimento.

Fase 3 — Test funzionale. Apri ogni pagina in navigazione incognito e verifica: il menu funziona? Lo slider parte? Il cookie banner appare? I form funzionano? Le animazioni si attivano? Prendi nota di ogni problema.

Fase 4 — Esclusioni mirate. Per ogni problema identificato, apri gli strumenti per sviluppatori (F12 > Console) e cerca errori JavaScript. L errore ti indica quale script sta fallendo. Aggiungi quel pattern specifico alla lista esclusioni.

Fase 5 — Verifica finale. Dopo aver aggiunto tutte le esclusioni necessarie, esegui nuovamente il test PageSpeed e il test funzionale. Il punteggio sara leggermente inferiore rispetto alla Fase 2 ma significativamente superiore alla Fase 1, e tutte le funzionalita saranno operative.

Fase 6 — Monitoraggio. Nelle settimane successive, monitora Google Search Console per eventuali segnalazioni di problemi di usabilita mobile e controlla Google Analytics per anomalie nel tracciamento. Se il bounce rate aumenta improvvisamente su specifiche pagine, potrebbe indicare un problema di funzionalita non rilevato durante i test.

Delay JS e Google Consent Mode

Con l introduzione di Google Consent Mode v2, la gestione del consenso cookie e diventata ancora piu critica. Lo script di consent (CMP) deve essere il primo a caricarsi, prima di Google Analytics, Google Ads e qualsiasi altro script di tracciamento. Se ritardi lo script CMP con Delay JS, l intera catena di consenso si rompe e i dati di tracciamento potrebbero non essere conformi al GDPR.

La configurazione corretta prevede di escludere dal delay lo script CMP e di ritardare tutti gli script di tracciamento che da esso dipendono. In questo modo, il CMP si carica immediatamente, raccoglie il consenso dell utente e gli script di tracciamento si attivano solo all interazione successiva, gia configurati con lo stato di consenso corretto.

Risultati Attesi e Metriche

Su un sito WordPress tipico con tema premium, page builder e 10-15 plugin attivi, l attivazione di Delay JS produce mediamente i seguenti miglioramenti:

Questi risultati variano significativamente in base al numero e al peso degli script presenti sul sito. Siti con pochi script leggeri vedranno miglioramenti marginali, mentre siti con molti script di terze parti vedranno trasformazioni drammatiche.

Guide Correlate della Serie WP Rocket

Hai difficolta con la configurazione del Delay JavaScript? Contattaci per ricevere assistenza tecnica. Per un hosting che gestisce JavaScript in modo ottimale, esplora i nostri piani di Hosting WordPress gestito.

Migliora il Tuo Sito WordPress

Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:

#Core Web Vitals #defer javascript #delay javascript #wp rocket js