Avete analizzato il vostro sito WordPress tramite un’applicazione per il test delle prestazioni web e vi siete scontrati con un avviso che vi chiede di differire il parsing di JavaScript in WordPress (defer parsing of JavaScript)?
Effettuare questa modifica può avere un impatto positivo sui tempi di caricamento delle pagine del vostro sito, specialmente per i visitatori da dispositivi mobili. Ma poiché l’avviso può essere un po’ difficile da capire, spiegheremo esattamente cosa significa differire il parsing del JavaScript e vi diremo come potete implementare questa modifica sul vostro sito WordPress.
Ecco cosa imparerete con questo articolo:
Se preferite saltare direttamente al tutorial, potete fare clic sull’ultimo link nell’elenco di cui sopra.
Cosa Significa Differire il Parsing del JavaScript in WordPress?
Se avete mai analizzato il vostro sito WordPress attraverso Google PageSpeed Insights, GTmetrix, o altri strumenti di test di velocità della pagina, probabilmente vi siete imbattuti nel suggerimento di differire il parsing del JavaScript.
Ma cosa significa veramente? E perché è un elemento importante da considerare per le prestazioni?
Fondamentalmente, quando qualcuno visita il vostro sito WordPress, il vostro server invia il contenuto HTML del vostro sito web al browser di quel visitatore.
Il browser del visitatore parte dall’alto e passa attraverso il codice per riprodurre il vostro sito. Se, muovendosi dall’alto verso il basso, trova un qualsiasi JavaScript, interromperà il rendering del resto della pagina fino a quando non sarà in grado di recuperare e analizzare il file JavaScript.
Lo farà per ogni script che trova, il che può avere un effetto negativo sui tempi di caricamento delle pagine del vostro sito, perché il visitatore sta di fronte a una schermata vuota mentre il suo browser scarica e analizza tutti i JavaScript.
Se un certo script non è necessario per il funzionamento centrale del vostro sito (almeno al momento del caricamento iniziale della pagina), non volete che sia d’intralcio al caricamento di parti più importanti del sito: è per questo motivo che gli strumenti di analisi di velocità della pagina dicono sempre di differire il parsing del JavaScript.
Cosa significa differire il parsing del JavaScript?
In sostanza, il vostro sito dirà ai browser dei visitatori di aspettare a scaricare e/o analizzare il JavaScript fino a quando il contenuto principale non avrà finito di caricare. A quel punto, i visitatori possono già vedere e interagire con la vostra pagina, quindi i tempi di attesa per scaricare e analizzare quel JavaScript non avranno più un impatto negativo.
Accelerando i tempi di caricamento dei vostri contenuti visibili, non solo farete felice Google ma creerete un’esperienza migliore e più veloce per i vostri visitatori.
Come Capire Se Avete Bisogno di Differire il Parsing del JavaScript
Per verificare se il vostro sito WordPress ha bisogno di differire il parsing del JavaScript, potete analizzare il vostro sito attraverso GTmetrix.
GTmetrix vi darà un voto ed elencherà anche gli script specifici che devono essere differiti:
I Diversi Metodi per Differire il Parsing del JavaScript
Ci sono alcuni modi diversi per differire il parsing del JavaScript. In primo luogo, esistono due attributi che potete aggiungere ai vostri script:
- Async
- Defer
Entrambi gli attributi consentono ai browser dei visitatori di scaricare il JavaScript senza mettere in pausa l’analisi HTML. Tuttavia, la differenza è che async non mette in pausa l’analisi HTML per scaricare lo script (come farebbe invece di default), ma mette in pausa il parser HTML per eseguire lo script una volta che questo stato scaricato.
Con defer, invece, i browser dei visitatori continueranno a scaricare gli script mentre analizzano l’HTML, ma aspetteranno di effettuare il parsing dello script fino a quando il parsing HTML non sarà stato completato.
Questo grafico di Growing with the Web fa un ottimo lavoro per spiegare la differenza:
Un’altra opzione, raccomandata da Patrick Sexton di Varvy, usa uno script per chiamare un file JavaScript esterno solo dopo che il caricamento della pagina iniziale è finito. Questo significa che i browser dei visitatori non scaricheranno o eseguiranno alcun JavaScript fino a quando il caricamento della pagina iniziale non sarà terminato.
Infine, un altro approccio che vedrete consiste nello spostare il vostro JavaScript in fondo alla pagina. Tuttavia, questo metodo non è una grande soluzione perché, anche se la vostra pagina sarà visibile prima, i browser dei visitatori continueranno a visualizzare la pagina come se fosse ancora in caricamento, fino alla fine di tutti gli script. Questo potrebbe impedire ad alcuni visitatori di interagire con la vostra pagina, pensando che il contenuto non sia completamente caricato.
Come Differire il Parsing del JavaScript in WordPress (4 Metodi)
Per differire il parsing del JavaScript in WordPress, ci sono tre soluzioni che potete intraprendere:
- Plugin: ci sono alcuni ottimi plugin WordPress, sia gratuiti che premium, per differire il parsing del JavaScript. Vi mostriamo come farlo con due popolari plugin.
- Il metodo Varvy: se siete esperti di tecnologia, potete modificare direttamente il codice del vostro sito e utilizzare lo snippet di codice di Varvy.
- Il file functions.php: potete aggiungere uno snippet di codice al file functions.php del tema child per differire automaticamente gli script.
Potete fare clic in alto per saltare direttamente al vostro metodo preferito o leggere tutte le tecniche per trovare quello che fa per voi.
1. Il Plugin Gratuito Async JavaScript
Async JavaScript è un plugin gratuito per WordPress creato da Frank Goossens, la stessa persona che sta dietro il popolare plugin Autoptimize.
Il suo plugin offre un modo semplice per differire il parsing del JavaScript utilizzando async o defer.
Per iniziare, è possibile installare e attivare il plugin gratuito da WordPress.org. Quindi, andate su Settings → Async JavaScript per configurare il plugin.
In alto, potete abilitare le funzionalità del plugin e scegliere tra async e defer. Ricordate che:
- Async scarica JavaScript mentre ancora analizza l’HTML ma poi mette in pausa l’analisi HTML per eseguire il JavaScript.
- Defer il scarica il JavaScript mentre ancora analizza l’HTML ma aspetta a eseguirlo fino a quando l’analisi HTML non è terminata.
Più in basso, potete anche scegliere come gestire il jQuery. Molti temi e plugin si affidano ampiamente a jQuery, quindi se state tentando di differire il parser degli script jQuery potreste rompere alcune delle funzionalità principali del sito. L’approccio più sicuro è escludere jQuery, ma potete fare degli esperimenti con il differimento. Assicuratevi solo di testare il vostro sito con cura.
Più in basso, è anche possibile includere o escludere manualmente script specifici dal differimento, compresa una bella funzione di facile utilizzo che consente di puntare a temi o plugin specifici attivi sul vostro sito:
2. Usare il Plugin WP Rocket
Qui a Kinsta non permettiamo l’installazione di gran parte dei plugin di cache: abbiamo però fatto un’eccezione per il plugin WP Rocket perché include un’integrazione che funziona perfettamente con la cache a livello server di Kinsta.
Oltre a una serie di altre funzionalità per l’ottimizzazione delle prestazioni, WP Rocket aiuta anche con il differimento del JavaScript grazie all’opzione che trovate nella scheda File Optimization delle impostazioni del plugin. Cercate l’opzione Load JavaScript deferred nella sezione JavaScript Files.
Come già detto per il plugin Async JavaScript, anche WP Rocket vi permette di escludere jQuery per evitare problemi di compatibilità con il contenuto del vostro sito:
3. Il Metodo Raccomandato da Varvy (con Codice)
In precedenza, abbiamo accennato che Patrick Sexton di Varvy consiglia di utilizzare uno snippet di codice che attende sia il download che l’esecuzione di JavaScript fino a quando il sito non completa il caricamento della pagina iniziale.
È possibile implementare questo metodo modificando lo snippet di codice fornito da Varvy e aggiungendo lo script al tema immediatamente prima della chiusura del tag </body>.
Ecco il codice dal sito di Varvy:
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
Assicuratevi di sostituire “defer.js” con il nome/percorso effettivo del file JavaScript che desiderate differire. In seguito è possibile utilizzare l’hook wp_footer per iniettare il codice tramite il file functions.php del tema child.
Con questo approccio, avvolgereste il codice di Varvy in qualcosa del genere:
function defer_parsing_of_js( $url ) {
if ( is_user_logged_in() ) return $url; //don't break WP Admin
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );In pratica, questo snippet dice a WordPress di aggiungere l’attributo defer a tutti i file JavaScript eccetto i jQuery.
È facile e veloce, ma non vi dà il livello di controllo granulare che invece offrirebbe un plugin come Async JavaScript.
Riepilogo
Differire il parsing del JavaScript sul vostro sito WordPress è un’azione importante per migliorare le prestazioni.
Una volta che avrete usato uno dei metodi di cui sopra per differire il parsing del JavaScript in WordPress, vi consigliamo di fare due cose:
- Fate dei test sul vostro sito per assicurarvi che il differimento di alcuni script non abbia rotto del contenuto visibile importante. Come già detto, questo può accadere comunemente con jQuery, ed è per questo che molti strumenti permettono di escludere i file jQuery.js. Tuttavia, potrebbe accadere anche con altri script.
- Analizzate di nuovo il vostro sito con GTmetrix per assicurarvi che il vostro sito stia differendo il maggior numero possibile di script (potreste non ottenere un punteggio perfetto se escludete jQuery, ma il vostro punteggio dovrebbe comunque migliorare).
Avete domande su come differire di JavaScript in WordPress? Scrivetecele nei commenti!
Brian ha una grande passione per WordPress, lo usa da più di dieci anni e sviluppa anche un paio di plugin premium. Brian ama i blog, i film e le escursioni. Entra in contatto con Brian su Twitter.
Grazie per l’articolo esaustivo ma manca il metodo per differire tramite il file functions.php.