Differire jQuery in WordPress

Perché differire jQuery?

jQuery è ancora incluso in ogni installazione di WordPress e la maggior parte dei temi lo carica senza differirlo. Ciò significa che blocca il parsing HTML a ogni singolo caricamento di pagina. Ecco come risolvere il problema.

Ultima revisione di Arjen Karel a marzo 2026

jQuery è presente sul 74% di tutte le pagine web secondo il Web Almanac 2024, in gran parte spinto da WordPress. Eppure solo il 47% delle pagine mobile utilizza l'attributo defer su qualsiasi script. Ciò significa che la maggioranza dei siti WordPress continua a caricare jQuery in modo sincrono, bloccando il parsing HTML e ritardando ogni metrica di paint sulla pagina, specialmente il Largest Contentful Paint.

Dai un'occhiata all'immagine qui sotto. Mostra la differenza nel parsing HTML tra script normali, differiti e asincroni. Se jQuery non è differito, il browser bloccherà il parsing HTML fino all'esecuzione dello script. Se jQuery è differito, il browser non dovrà bloccare il parser. E questo ti farà risparmiare molto tempo. Per un confronto completo, consulta async vs defer e come questo influisce sui Core Web Vitals.

Il motivo per cui gli sviluppatori di temi non differiscono jQuery di default è legato al codice legacy. Alcuni plugin aggiungono script (inline) che dipendono da jQuery. Se jQuery viene caricato in modalità differita ma lo script che necessita di jQuery non lo è, si verificherà un conflitto (e un errore).

Metodo 1: Differire jQuery manualmente

Passaggio 1: Trovare dove viene accodato jQuery

Per prima cosa, trova dove jQuery è incluso nel tuo tema WordPress. Di solito si trova nel file functions.php del tema o direttamente nel file header.php. Cerca righe come:

wp_enqueue_script('jquery');    

Ora sappiamo che l'handle di jQuery si chiama 'jquery'.

Passaggio 2: Utilizzare un child theme

Se stai modificando un tema genitore, crea prima un child theme. In caso contrario, le tue modifiche verranno sovrascritte al successivo aggiornamento del tema.

Passaggio 3: Accodare jQuery con l'attributo 'defer'

Nel file functions.php del tuo child theme aggiungi il seguente codice e modificalo per farlo corrispondere alla posizione e all'handle del tuo file jQuery. Stiamo utilizzando la strategia defer di WordPress 6.3:

function defer_jquery() {
  if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy'  => 'defer']);
    wp_enqueue_script('jquery');
  }
}
add_action('wp_enqueue_scripts', 'defer_jquery',100);

Analizziamolo nel dettaglio:

• wp_deregister_script('jquery'): Annulla la registrazione dello script jQuery predefinito.
• wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy' => 'defer']);: Registra jQuery con la strategia 'defer'.
• wp_enqueue_script('jquery'): Accoda lo script jQuery modificato.

Et voilà: ora hai differito con successo jQuery sul tuo sito WordPress. E come bonus, ora sai come differire qualsiasi script perché il processo è esattamente lo stesso! Per ulteriori tecniche di differimento oltre a WordPress, consulta i 16 metodi per differire JavaScript.

Fai attenzione agli script inline. WordPress 6.3 rimuoverà silenziosamente la strategia defer se il tuo script ha script inline collegati nella posizione after tramite wp_add_inline_script(). Se differisci jQuery ma viene ancora caricato in modo sincrono, controlla se qualche plugin sta aggiungendo script inline all'handle di jQuery.

Metodo 2: utilizzare un plugin

Plugin come WP Core Web Vitals rendono estremamente semplice differire jQuery e molti plugin possono persino gestire le complicazioni che potrebbero derivarne differendo anche le dipendenze e utilizzando alcuni altri trucchi come il caching degli eventi jQuery fino a quando jQuery non è stato eseguito.

Metodo 3: CloudFlare

Un altro modo super semplice per differire jQuery è utilizzare Rocket Loader di CloudFlare. Rocket Loader funziona disabilitando tutti i tuoi script durante il caricamento della pagina per poi riabilitarli rapidamente in seguito. Questo trucco imita il differimento degli script ma presenta alcuni svantaggi:

• CloudFlare Rocket Loader interrompe una funzionalità del browser chiamata preload scanner. Con Rocket Loader gli script non vengono precaricati e potrebbe volerci un po' più di tempo affinché vengano scaricati ed eseguiti.
• CloudFlare Rocket Loader è uno strumento piuttosto grezzo. Non discrimina tra script importanti, meno importanti e script utili ma non indispensabili. Si limita a differire tutto senza alcuna distinzione, lasciandoti senza alcun controllo sul timing degli script.

I siti WordPress hanno un tasso di superamento dei Core Web Vitals del 45% su mobile secondo il Web Almanac 2025, e l'LCP risulta la metrica più debole con solo il 53%. Il caricamento render-blocking di jQuery è una delle cause più comuni. Differirlo non risolverà tutto, ma rimuove uno dei blocchi più grandi che si frappongono tra il tuo sito e un punteggio LCP positivo.

Testare le modifiche

Dopo aver differito jQuery, controlla il tuo sito. Apri la console del browser e cerca la presenza di errori. Clicca tra i tuoi menu, slider, form e qualsiasi elemento che utilizza JavaScript. Se qualcosa si rompe, la sezione di risoluzione dei problemi qui sotto ti aiuterà a sistemarlo.

Risoluzione dei problemi

Se riscontri dei problemi, questi rientreranno probabilmente in una di 3 categorie. La maggior parte dei problemi può essere individuata aprendo l'inspector e navigando nella scheda della console. In caso di problemi, probabilmente troverai degli avvisi che assomigliano a questo e che riportano 'Uncaught ReferenceError: jQuery is not defined':

Risolvere questi problemi non è così difficile. Accanto all'errore è presente un riferimento alla sua origine. Se riporta (index), molto probabilmente ha origine da uno script inline. Se si tratta di un altro file, è un problema di timing oppure ti sei dimenticato di differire anche quel file.

Script dipendenti

Script inline

$(function(){
 // do something
})

• Usa il trucco type="module". Il più recente <script type="module"> differirà anche il JavaScript inline.
• Inserisci gli script inline in un file esterno. Se hai bisogno di variabili, puoi aggiungerle in uno script inline direttamente sulla pagina, ma le principali funzioni dipendenti da jQuery dovrebbero risiedere in un file esterno che viene anch'esso differito.

Problemi di timing

Un altro problema, meno comune, ha origine dal timing. Se jQuery non è differito, verrà eseguito prima degli eventi DOMContentLoaded e load. Puoi fare affidamento su questo. Se è differito, uno script potrebbe essere eseguito dopo l'evento DOMContentLoaded. Ciò significa che se hai collegato un gestore di eventi sull'evento DOMContentLoaded, questo non verrà eseguito in modo affidabile. Se riscontri problemi come questi, prova a cambiare il trigger o a racchiudere la funzione all'interno di jQuery().

Nei siti WordPress monitorati da CoreDash, i siti che differiscono tutti gli script, incluso jQuery, hanno un p75 LCP di 2,1 secondi rispetto ai 3,4 secondi dei siti che caricano jQuery in modo sincrono. Si tratta di un miglioramento del 38% derivante da una singola modifica di configurazione. Dopo aver distribuito le tue modifiche, verifica il miglioramento con un Real User Monitoring. I punteggi di Lighthouse ti dicono se l'attributo defer sta funzionando, ma i dati sul campo (field data) dei visitatori reali ti dicono se il tuo LCP è effettivamente migliorato. Per maggiori informazioni su come il posizionamento degli script influisce sui Core Web Vitals, consulta la guida Core Web Vitals per WordPress. E come sempre, se sei bloccato non esitare a contattarmi!