Indice
Come impostare Async JavaScript
Async JavaScript è un plug-in gratuito di WordPress che s’interfaccia perfettamente con Autoptimize un altro plug-in della stessa casa di produzione.
In breve questo plug-in offre un modo semplice per differire il parsing del JavaScript utilizzando async o defer, che ci aiuta a risolvere, il più delle volte, il fastidioso errore Defer parsing of JavaScript di Gtmetrix, andiamo a vedere come configurarlo.
Enable Async JavaScript / Method
Una volta installato e attivato il plugin, andiamo su Settings / Enable Async JavaScript e attiviamolo.
Poi in Async JavaScript Method ci chiederà di scegliere il metodo Async o Defer:
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.
Ovviamente la scelta migliore varia in base al tuo sito dovresti testare entrambe i metodi e vedere quale si adatta meglio.
Più in basso, potete anche scegliere come gestire il jQuery, ma bisogna fare attenzione perché molti temi e plug-in si affidano ampiamente a jQuery, quindi se state tentando di differire il parser degli script jQuery potreste rompere alcune delle funzionalità principali del sito.
Per cui l’approccio più sicuro è escludere jQuery, ma potete fare degli esperimenti con il differimento. Assicuratevi solo di testare il vostro sito se funziona correttamente.
Volendo, è anche possibile includere o escludere manualmente script specifici dal differimento, oltre a una funzione di facile utilizzo che consente di puntare a temi o plugin specifici attivi sul sito.
Async Javascript è Gtmetrix
C’è un ulteriore metodo per testare le migliori impostazioni per il nostro sito trovando la migliore configurazione per Autoptimize e Async Javascripte attraverso l’utilizzo di Gtmetrix.
Prima di tutto andiamo su sito Gtmetrix e registriamoci per avere la chiave API che ci servirà per configurare la sezione wizard di Async JavaScript.
Creiamo un nuovo account e accediamo al nostro profilo.
In alto a destra troveremo clicchiamo sulla voce Gtmetrix API KEY.
Ora copiamo la chiave che troveremo in altro a destra sotto la nostra email e incolliamola nella configurazione di Async JavaScript.
Passaggio 1: chiave API GTmetrix
Se non l’hai ancora fatto, prendi una chiave API da Gtmetrix in modo che Async JavaScript possa ottenere i tuoi risultati PageSpeed / YSlow. Ecco come fare:
1. Vai a Gtmetrix (Se non hai già un account registrati)
2. Accedi al tuo account Gtmetrix.
3. Se non hai ancora generato la tua chiave API, fai clic su Genera chiave API
4. Copia il tuo nome utente e la chiave API nei campi email e chiave API
5. Seleziona il server desiderato.
Ora clicchiamo su Proceed to step 2
Passaggio 2: risultati del test iniziale
A questo punto Async JavaScript eseguirà una query su Gtmetrix e recupererà i punteggi PageSpeed e YSlow del sito testando tutte le combinazioni possibili.
Test: Async
Test: defer
Test: Async (escluso jQuery)
Test: defer (escluso jQuery)
Passaggio 3: Results & Recommendations
Una volta terminato di testare il tuo sito con le opzioni di configurazione più comuni, il plug-in determinerà i risultati migliori.
Prima però di applicare queste impostazioni è importante verificare che il sito funzioni ancora correttamente.
Per fare ciò fai clic sul link in basso per aprire il tuo sito in una nuova scheda / finestra per simulare le impostazioni e verifica che tutto funzioni correttamente e assicurati anche di controllare che la console non dia eventuali errori JavaScript.
Dopo aver eseguito la simulazione, fai clic sul pulsante Step 4 per continuare.
Passaggio 4: applicare le impostazioni
Se dopo aver simulato il differimento il sito funziona ancora correttamente e non ci sono errori JavaScript nella console clicca su SI altrimenti clicca su NO.
A questo punto se hai eseguito la simulazione su Defer e sebbene ci sia stato un miglioramento delle prestazioni riportate, hai riscontrato comunque qualche errore nel sito, nella maggior parte dei casi il problema riscontrato si riferisce a jQuery (di solito a causa di JavaScript incorporato che si basa su jQuery) la soluzione migliore è quella di escluderlo.
Di seguito Async riporterà i collegamenti che possono essere utilizzati per eseguire ulteriori simulazioni su ciascuna delle configurazioni con jQuery escluso.
Ti basterà fare clic su ciascuno dei collegamenti e verificare la funzionalità del sito e gli eventuali errori di console.
Simulazione Async (jQuery escluso)
Simulazione Defer (jQuery escluso)
Adesso seleziona uno dei due metodi e fai clic sul pulsante Settings per accedere alla pagina della configurazione manuale.
Further Hints & Tips
A questo punto se abbiamo installato Autoptimize, Async JavaScript lo segnalerà fornendoci la configurazione più adatta per il nostro sito in quanto ciò potrà migliorare ulteriormente la velocità del nostro sito
A fine procedimento ci ritroveremo una schermata del genere:
Ora non ci resterà che seguire le indicazioni di configurazione e il gioco è fatto!
*Nota naturalmente ogni sito web è diverso, quindi le tue configurazioni potrebbero essere diverse da quello riportate qui in questo esempio.