Differire jQuery in WordPress

Una guida per differire jQuery in WordPress

Saluti, appassionati di prestazioni! Sono entusiasta di condividere approfondimenti sull'ottimizzazione del vostro sito WordPress e sul miglioramento dei Core Web Vitals. Oggi vi mostrerò come differire il caricamento di jQuery, migliorando la velocità del vostro sito web e, di conseguenza, l'esperienza utente.

Perché differire jQuery?

jQuery, una robusta libreria JavaScript, è senza dubbio uno strumento potente, ma il suo caricamento sincrono a volte può rallentare il caricamento iniziale della pagina. Molti temi disponibili nei vari marketplace si basano su jQuery. Non che jQuery sia stato progettato per essere differito, ma sfortunatamente molti temi non differiscono jQuery. 

Quindi qual è il vantaggio principale di differire jQuery, vi chiederete? Bene, date un'occhiata all'immagine qui sotto. Mostra la differenza nell'analisi HTML tra script normali, differiti e asincroni. Se jQuery non è differito, il browser bloccherà l'analisi HTML finché lo script non sarà stato eseguito. Se jQuery è differito, il browser non dovrà bloccare il parser. E questo vi farà risparmiare un sacco di tempo, specialmente per quanto riguarda il Largest Contentful Paint. 

Il motivo per cui le build dei temi non differiscono jQuery per impostazione predefinita è a causa dell'eredità. Alcuni plugin aggiungono script (inline) che dipendono da jQuery. Se jQuery si carica in modo differito ma lo script che necessita di jQuery non è differito, ci sarà un conflitto (e un errore)

Metodo 1: Differire manualmente jQuery

Passaggio 1: Identificare l'inclusione di jQuery nel tuo tema

Per dare il via al processo di ottimizzazione, dobbiamo individuare dove jQuery è incluso nel vostro tema WordPress. Trovato comunemente nel file functions.php del tema o direttamente nel file header.php, cercate righe simili a:

wp_enqueue_script('jquery');    

Ora sappiamo che l'handle per jQuery si chiama 'jquery'. Capire dove jQuery è messo in coda pone le basi per il nostro viaggio di ottimizzazione.

Passaggio 2: Creare un tema child per una stabilità a lungo termine

Prima di apportare qualsiasi modifica, considerate la creazione di un tema child per salvaguardare le vostre modifiche da aggiornamenti futuri. Questo assicura che il vostro duro lavoro non venga sovrascritto quando il tema genitore riceve un aggiornamento. Creare un tema child è un po' come aggiungere un ulteriore strato di armatura alla struttura del vostro sito.

Passaggio 3: Mettere in coda jQuery con l'attributo 'defer'

Ora, tuffiamoci nei dettagli tecnici. Nel file functions.php del vostro tema child aggiungete il seguente codice e modificatelo per farlo corrispondere alla posizione del vostro file jQuery e al vostro handle. Utilizzeremo la nuova strategia di differimento

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:

• 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'): Mette in coda lo script jQuery modificato.

Et voilà: ora avete differito con successo jQuery sul vostro sito WordPress. E come bonus ora sapete come differire qualsiasi script perché il processo è esattamente lo stesso!

Metodo 2: utilizzare un plugin

I plugin come WP Core Web Vitals rendono facilissimo differire jQuery e molti plugin possono persino gestire le complicazioni che possono derivarne differendo anche le dipendenze ed eseguendo alcuni altri trucchi come la memorizzazione nella cache degli eventi jQuery fino a quando jQuery non è stato eseguito.

Metodo 3: CloudFlare

Un altro modo semplicissimo per differire jQuery è utilizzare Rocket Loader di CloudFlare. Rocket Loader funziona disabilitando tutti i vostri script durante il caricamento della pagina per poi abilitarli rapidamente di nuovo. Questo trucco imita il differimento degli script ma presenta alcuni inconvenienti

• CloudFlare Rocket Loader interrompe una funzione del browser chiamata preload scanner. Con Rocket Loader gli script non vengono precaricati e potrebbe volerci un po' più di tempo affinché i vostri script vengano scaricati ed eseguiti.
• CloudFlare Rocket Loader è uno strumento piuttosto grezzo. Non fa distinzione tra script importanti, meno importanti e utili. Differisce semplicemente tutto senza alcuna considerazione e vi lascia senza alcun controllo sulla tempistica degli script.
  

Test, Test, Test!

Dopo aver implementato queste modifiche, testate attentamente la funzionalità del vostro sito web. Prestate molta attenzione agli elementi interattivi, alle animazioni e alle funzionalità dipendenti da jQuery per assicurarvi che funzionino senza problemi. Test rigorosi garantiscono che l'ottimizzazione non introduca inavvertitamente alcun intoppo nella vostra interfaccia utente.

Risoluzione dei problemi

Se riscontrate dei problemi, probabilmente rientreranno in una di 3 categorie. La maggior parte dei problemi può essere trovata aprendo l'inspector e navigando fino alla scheda console. Se ci sono problemi probabilmente troverete degli avvisi che assomigliano a questo e recitano 'Uncaught ReferenceError: jQuery is not defined'

Risolverli non è così difficile. Accanto all'errore c'è un riferimento all'origine dell'errore. Se è (index) è molto probabile che provenga da uno script inline. Se è un altro file è un problema di tempistica oppure avete dimenticato di differire anche quel file.

Script dipendenti

Script Inline

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

• Usate il trucco type="module". Il più recente <script type="module"> differirà anche il JavaScript inline.
• Posizionate gli script inline in un file esterno. Se avete bisogno di variabili potete aggiungerle in uno script inline direttamente sulla pagina, ma le principali funzioni dipendenti da jQuery dovrebbero essere in un file esterno anch'esso differito. 

Problemi di tempistica

Un altro problema meno comune deriva dalla tempistica. Se jQuery non è differito, verrà eseguito prima dell'evento DOMContentLoaded e load. Potete contare su questo. Se è differito uno script potrebbe essere eseguito dopo l'evento DOMContentLoaded. Ciò significa che se avete collegato un gestore di eventi all'evento DOMContentLoaded, non verrà eseguito in modo affidabile. Se riscontrate problemi di questo tipo, provate a cambiare il trigger o ad avvolgere la funzione in jQuery(). 

E come sempre, se siete bloccati non esitate ad assumermi per una sessione di 2 ore!