Come differire l'analisi di JavaScript in WordPress

Che tu gestisca un sito Web WordPress o qualsiasi altro sito Web, dovresti sapere che una misura fondamentale delle prestazioni del tuo sito Web è la velocità della pagina.

Se utilizzi uno degli strumenti di test delle prestazioni del sito come GTmetrix o Google PageSpeed ​​Insights, potrebbe suggerirti di posticipare l'analisi di JavaScript.

Ora, la frase può creare confusione, ma svolge un ruolo significativo nell'aumentare il tempo di caricamento del tuo sito web.

Quindi, cosa significa differire l'analisi di JavaScript?

Bene, di questo parleremo più avanti in dettaglio. In breve, differire l'analisi di JavaScript consente al browser di caricare prima il contenuto del sito Web, senza attendere il completamento del download degli script.

Questo processo è essenziale poiché i browser eseguono il rendering e scaricano JavaScript dal server prima di caricare qualsiasi altro contenuto del sito Web. Ciò danneggia la velocità del tuo sito Web e interrompe il tempo di caricamento della pagina.

Per fortuna, posticipare l'analisi di JavaScript è il modo migliore per mitigare il problema.

In questo articolo ho spiegato i cinque metodi collaudati per rinviare l'analisi di JavaScript in WordPress. Ma prima, otteniamo maggiori informazioni sul significato della frase e sappiamo se è necessario rinviare l'analisi di Javascript.

Diamo il via!

Cosa intendi per differire l'analisi di JavaScript in WordPress?

Prima di comprendere la tecnica per rinviare l'analisi JavaScript, dovresti sapere come un browser Web esegue il rendering di una pagina Web.

Per cominciare, quando il tuo browser invia una richiesta al tuo server web, riceve la pagina, che viene scaricata sotto forma di documento HTML. Questo documento HTML include testo, codice che esegue il rendering di vari elementi DOM e diverse risorse come immagini, fogli di stile e script.

Per impostazione predefinita, il browser scarica queste risorse in sequenza. Il rendering della pagina Web riprende solo dopo che tutte le risorse sono state scaricate. Inoltre, le grandi risorse influiscono negativamente sul tempo di caricamento della tua pagina web.

Ogni volta che il tuo browser esamina il codice per eseguire il rendering del tuo sito Web, interrompe il rendering se trova JavaScript. Il processo viene interrotto finché non riesce a recuperare e analizzare il file JavaScript. Questo ha un impatto negativo sulla velocità del tuo sito web.

Per fortuna, il processo di rinvio dell'analisi di JavaScript notifica al browser di attendere il download e l'analisi di un file JavaScript fino al completamento del caricamento del contenuto principale del tuo sito web. A questo punto, i tuoi visitatori possono interagire con il tuo sito Web in modo che il tempo necessario per scaricare e analizzare JavaScript non comprometta più il tempo di caricamento del tuo sito.

Come sapere che è necessario rinviare l'analisi di JavaScript?

Come abbiamo detto in precedenza, gli strumenti di test delle prestazioni del sito come GTmetrix, Google PageSpeed ​​Insights o WP Engine Speed ​​Tool spesso suggeriscono di posticipare l'analisi di JavaScript quando analizzano il tuo sito web.

GTmetrix, in particolare, ti fornisce un voto ed elenca gli script specifici che devono essere posticipati per migliorare la velocità di caricamento della tua pagina.

Puoi semplicemente inserire l'URL del tuo sito Web e attendere che lo strumento lo valuti. Al termine della valutazione, vai alla scheda PageSpeed ​​ed espandi la sezione Rinvia l'analisi di JavaScript.

Questa sezione offre un elenco di script non essenziali caricati durante il processo di rendering, come mostrato nell'esempio seguente:

Attributi asincroni e differiti

È fondamentale assicurarsi che il download di uno script non interferisca con il rendering della pagina Web. Ci sono due modi per farlo:

• Asincrono
• Differire

Puoi includere l'attributo async nel tag script come:

 <script src= “path/to/script” async> </script>

Questo dice al tuo browser di caricare lo script in modo asincrono. Per essere precisi, il browser scarica la risorsa non appena la incontra nel codice ma procede all'analisi dell'HTML mentre la risorsa è ancora in fase di download.

D'altra parte, puoi aggiungere l'attributo defer al tag di script come:

 <script src= “path/to/script” defer> </script>

Questo dice al tuo browser di non scaricare le risorse fino a quando non completa l'analisi della pagina web. Al termine dell'analisi e del rendering, scarica l'elenco degli script posticipati incontrati in precedenza.

La principale differenza tra gli attributi asincroni e differiti è quando le risorse vengono scaricate.

Se si dispone di un'applicazione Web compatta, si consiglia di utilizzare il differimento per assicurarsi che le interdipendenze siano soddisfatte. Inoltre, se hai solo pochi script nel percorso di rendering, non ti dispiacerebbe alcuna differenza tra l'uso di entrambi questi attributi.

Ecco un esempio per comprendere gli attributi asincroni e differiti:

Diciamo che hai due script JS1 e JS2.

La condizione è che JS2 appaia nel codice dopo JS1, JS2 ha una dipendenza da JS1, ma JS1 è maggiore di JS2.

Ora, se usi async , potrebbe essere possibile che JS2 termini il download prima che JS1 venga scaricato completamente. Ciò porta a un errore poiché JS2 viene eseguito in assenza di JS1.

D'altra parte, se usi defer , JS1 e JS2 vengono scaricati in sequenza, assicurandosi che non ci siano errori.

Perché è necessario rinviare l'analisi di JavaScript?

Abbiamo accennato in precedenza che la velocità della pagina è l'aspetto più critico che crea o interrompe le prestazioni del tuo sito web. Poiché i file JavaScript sono piuttosto grandi e richiedono più tempo per essere caricati, ritardare la loro esecuzione per un po' si rivela utile per aumentare la velocità del tuo sito web.

Di seguito sono riportati alcuni dei motivi per cui è necessario rinviare l'analisi di JavaScript in WordPress:

1. Per aumentare le classifiche di ricerca:

Quando Google o qualsiasi altro motore di ricerca valutano il tuo sito Web per un posizionamento nei motori di ricerca, considerano la velocità della pagina come punto di misura critico. Se il tuo sito web si carica più velocemente, è destinato ad apparire nella prima pagina dei risultati dei motori di ricerca.

Secondo la ricerca, 1 persona su 2 si aspetta che una pagina venga caricata in meno di 2 secondi. Se il tuo sito web non riesce a caricarsi in modo appropriato entro 2 secondi, Google favorirà il tuo concorrente invece di te. Pertanto, potrebbe avere un impatto negativo sulle tue classifiche di ricerca.

Pertanto, è necessario posticipare l'analisi di JavaScript in modo che ci sia un aumento significativo del tempo di caricamento del tuo sito web.

Se stai cercando più opzioni per velocizzare il tuo sito Web WordPress, dai un'occhiata a queste 7 tecniche SEO on-page che raddoppieranno il tuo traffico di ricerca.

2. Per aumentare il tasso di conversione:

Se il tuo sito web si carica più lentamente, i tuoi visitatori sono obbligati a lasciarlo e cercare altre opzioni migliori. Poiché i tuoi utenti sono spesso alla ricerca di informazioni rapide e affidabili sul tuo sito Web, una pagina a caricamento lento può essere un killer dell'umore.

Allo stesso modo, se gestisci un sito affiliato e vendi prodotti attraverso il tuo sito web, ti aspetteresti che i tuoi utenti intraprendano più azioni su di esso. Tuttavia, una pagina web più lenta può scoraggiare i tuoi visitatori dall'intraprendere qualsiasi azione.

La ricerca presentata su HubSpot mostra che un ritardo anche di un secondo nel tempo di caricamento del sito fa diminuire il tasso di conversione del 7% . Ecco quanto è fondamentale aumentare il tempo di caricamento del tuo sito web e aumentare il tasso di conversione.

La tecnica per posticipare l'analisi di JavaScript ti aiuta ad aumentare la velocità del tuo sito web e a migliorarne il tasso di conversione.

3. Per fornire una migliore esperienza utente:

Una follia! I siti Web più lenti creano un'esperienza utente terribile. Se il caricamento del tuo sito Web richiede più tempo del solito, puoi aspettarti che i tuoi visitatori lascino il tuo sito Web, aumentando così la sua frequenza di rimbalzo.

Dovresti considerare di rinviare l'analisi di JavaScript in modo che i file JS vengano eseguiti solo dopo il caricamento del contenuto della tua pagina web. Questa tecnica ti aiuta ad accelerare il tuo sito Web WordPress e offre un'esperienza eccellente ai tuoi utenti.

Cinque diversi metodi per rinviare l'analisi di JavaScript in WordPress

Per posticipare l'analisi di JavaScript, puoi scegliere uno dei tre percorsi principali, tra cui:

• Collegare
• Metodo Varvy
• File Functions.php

Utilizzando questi percorsi, abbiamo creato cinque diversi metodi per posticipare l'analisi di JavaScript in WordPress.

Metodo 1: utilizzo del plug-in JavaScript asincrono gratuito

Async JavaScript è un plugin gratuito per WordPress che aiuta a eliminare JavaScript che blocca il rendering nei contenuti above-the-fold.

Il plug-in ti offre il pieno controllo di quali script aggiungere o escludere un attributo asincrono o differito per aumentare le prestazioni del tuo sito Web WordPress. La cosa che dovresti ricordare prima di scegliere tra async e differire è:

• Async scarica JavaScript durante l'analisi dei file HTML, ma poi interrompe l'analisi HTML per eseguire i file JavaScript.
• Rinvia il download di JavaScript mentre si esegue ancora l'analisi dei file HTML e attende di eseguirlo al termine dell'analisi HTML.

Ecco tutti i passaggi per rinviare l'analisi di JavaScript in WordPress utilizzando il plug-in JavaScript Async:

Innanzitutto, reindirizza a Plugin -> Aggiungi nuovo dalla dashboard di WordPress.

Ora cerca il plug-in JavaScript Async sulla barra di ricerca, quindi Installalo e attivalo .

Una volta completata l'installazione e l'attivazione del plug-in, vai alla pagina Impostazioni per apportare le modifiche necessarie.

Ora, seleziona l'opzione Abilita JavaScript asincrono e seleziona Rinvia come metodo JavaScript asincrono come mostrato nell'immagine qui sotto:

Per opzioni più avanzate, puoi scorrere fino alla pagina. Qui puoi includere gli script a cui vuoi applicare i tag asincroni e rinviati e anche aggiungere un elenco di script da escludere.

Puoi anche elencare i plug-in e i temi che puoi escludere da qualsiasi modifica apportata dal plug-in JavaScript Async.

Dopo aver apportato le modifiche necessarie, scorri verso il basso fino alla fine della pagina e premi il pulsante Salva impostazioni .

Metodo 2: utilizzo del plug-in WP Rocket

WP Rocket è definito come uno dei più potenti plug-in di memorizzazione nella cache di WordPress che consente di caricare rapidamente il tuo sito Web in pochi clic. Il plug-in offre la memorizzazione nella cache della pagina, il precaricamento della cache, la compressione di file statici e molte altre fantastiche funzionalità.

Oltre a questo, WP Rocket ti aiuta anche a rinviare l'analisi di JavaScript nella scheda Ottimizzazione file della dashboard di WP Rocket.

Dopo aver acquistato, installato e attivato il plug-in WP Rocket, reindirizza all'opzione Impostazioni e fai clic sulla scheda Ottimizzazione file dal menu per iniziare.

Successivamente, scorri verso il basso fino alla sezione File JavaScript, seleziona l'opzione Carica JavaScript differito e abilita la modalità provvisoria per jQuery .

Quando hai completato l'intero processo, scorri verso il basso fino alla fine della pagina e fai clic sul pulsante Salva modifiche .

Metodo 3: utilizzo del plug-in Total Cache W3

W3 Total Cache è un altro plugin essenziale per WordPress che migliora la SEO e l'esperienza utente del tuo sito web. Aumenta le prestazioni del tuo sito web e riduce i tempi di caricamento sfruttando l'integrazione della Content Delivery Network (CDN).

W3 Total Cache è gratuito e molto efficace. Puoi utilizzare questo plugin per rinviare l'analisi di JavaScript sul tuo sito Web WordPress.

Ecco tutti i passaggi per rinviare l'analisi di JavaScript in WordPress utilizzando il plug-in W3 Total Cache:

Innanzitutto, reindirizza a Plugin -> Aggiungi nuovo dalla dashboard di WordPress.

Ora cerca il plug-in W3 Total Cache sulla barra di ricerca e quindi Installalo e attivalo .

Una volta completata l'installazione e l'attivazione del plug-in, vai su Prestazioni -> Impostazioni generali dalla barra laterale sinistra di WordPress per apportare le modifiche necessarie.

Successivamente, scorri verso il basso fino alla sezione Riduci a icona e seleziona l'opzione Abilita . Inoltre, seleziona l'opzione Manuale dalla modalità Riduci a icona e fai clic sul pulsante Salva tutte le impostazioni per continuare.

Ora, reindirizza alla scheda Prestazioni -> Riduci a icona dalla barra laterale sinistra e scorri verso il basso fino all'intestazione JS , dove puoi vedere la sezione Operazioni nelle aree con due tag HTML.

Seleziona Non bloccante utilizzando l'opzione "rinvia" nel tipo di incorporamento del tag Prima </head> .

Nella stessa sezione, puoi vedere l'intestazione di gestione dei file JS in cui devi selezionare il tuo tema WordPress attivo e fare clic sul pulsante Aggiungi uno script per includere l'URI di JavaScript che desideri analizzare.

Puoi aggiungere tutti gli URI che desideri facendo clic sul pulsante Aggiungi uno script .

Una volta completate le modifiche, fare clic sul pulsante Salva impostazioni ed elimina cache per continuare.

Successivamente, scorri verso il basso fino alla sezione CSS . È quindi possibile fare clic sul pulsante Aggiungi un foglio di stile sotto l'intestazione di gestione dei file CSS per inserire gli URI del foglio di stile CSS. Puoi aggiungerne più di uno in base ai suggerimenti forniti dagli strumenti di monitoraggio della velocità online.

Una volta completate le modifiche, fare clic sul pulsante Salva impostazioni ed elimina cache per continuare.

Metodo 4: utilizzo del metodo consigliato da Varvy

Un altro metodo, consigliato da Patrick Sexton di Varvy, utilizza uno script per chiamare un file JavaScript esterno una volta completato il caricamento della pagina iniziale. Ciò significa che il browser non scaricherà o eseguirà alcun JavaScript fino al termine del caricamento della pagina Web.

Puoi utilizzare questo metodo modificando lo snippet di codice fornito da Varvy e quindi aggiungendo lo script al file del tema immediatamente prima del tag di chiusura </body> .

Ecco il codice da aggiungere nella parte del corpo del tuo tema per rinviare l'analisi di JavaScript in WordPress:

 <script type="text/javascript"> 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; </script>

Nota: assicurati di modificare defer.js con il nome del tuo file JavaScript esterno. Successivamente, puoi utilizzare l'hook wp_footer per iniettare il codice tramite il file functions.php del tuo tema figlio.

Con questo approccio, puoi avvolgere il codice di Varvy in questo modo:

 /** Defer parsing of JavaScript with code snippet from Varvy */ add_action( 'wp_footer', 'my_footer_scripts' ); function my_footer_scripts(){ ?> REPLACE_WITH_VARVY_SCRIPT <?php }

Ecco ogni passaggio di questo metodo spiegato con immagini chiare:

Accedi alla dashboard di WordPress e vai su Aspetto -> Editor temi

Ora, fai clic sul file header.php dal lato destro dello schermo e quindi incolla il codice sopra menzionato prima di chiudere </body tag>.

Successivamente, fai clic sul pulsante Aggiorna file .

Metodo 5: utilizzo del file functions.php

Se hai un'idea sullo sviluppo di WordPress, dovresti avere familiarità con il fatto che non dovresti aggiungere script direttamente tramite il markup HTML. Invece, devi utilizzare le funzioni integrate di WordPress per richiedere risorse e anche eseguire il backup del tuo sito Web, se necessario.

Puoi utilizzare l'attributo defer ai tuoi file Javascript aggiungendo lo snippet di codice al tuo file functions.php .
Per questo, devi andare all'Editor temi dalla dashboard di WordPress. Successivamente, fai clic su functions.php e aggiungi il seguente codice:

 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 );

Questo frammento dice a WordPress di aggiungere l'attributo defer a tutti i tuoi file JavaScript tranne JQuery.
Puoi anche aggiungere facilmente il seguente codice per utilizzare async o differire l'attributo ai tuoi file JavaScript tramite il file functions.php :

 add_filter('script_loader_tag', 'add_defer_tags_to_scripts'); function add_defer_tags_to_scripts($tag){ # List scripts to add attributes to $scripts_to_defer = array('script_a', 'script_b'); $scripts_to_async = array('script_c', 'script_d'); # add the defer tags to scripts_to_defer array foreach($scripts_to_defer as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' defer="defer" src', $tag); } # add the async tags to scripts_to_async array foreach($scripts_to_async as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' async="async" src', $tag); } return $tag; }

Bene, non dimenticare che prima di aggiungere gli attributi asincroni e differire ai tag di script, devi accodare ogni script in modo che WordPress possa accedervi. Ecco il codice per questo:

 add_action('wp_enqueue_scripts', 'enqueue_custom_js'); function enqueue_custom_js() { wp_enqueue_script('script_a', get_stylesheet_directory_uri().'/script_a.js'); wp_enqueue_script('script_b', get_stylesheet_directory_uri().'/script_b.js'); wp_enqueue_script('script_c', get_stylesheet_directory_uri().'/script_c.js'); wp_enqueue_script('script_d', get_stylesheet_directory_uri().'/script_d.js'); }

Quando hai finito di aggiungere il codice al file functions.php, fai clic sul pulsante Aggiorna file .

Ecco ogni passaggio di questo metodo spiegato con immagini chiare:

Accedi alla dashboard di WordPress e vai su Aspetto -> Editor temi

Ora, fai clic sul file functions.php che si trova sul lato destro dello schermo. È quindi possibile incollare il codice sopra menzionato e fare clic sul pulsante Aggiorna file per salvare le modifiche necessarie.

Plugin alternativi per rinviare l'analisi di JavaScript in WordPress

Se stai cercando altre opzioni oltre ai plugin Async JavaScript e WP Rocket per rinviare l'analisi di JavaScript in WordPress, ne hai molte. Alcuni di essi includono:

1. Pacchetto potenziamento velocità:

Questo è un plugin gratuito per WordPress con un'interfaccia facile da usare per aiutarti con l'ottimizzazione JavaScript e molte altre tecniche di ottimizzazione della velocità.

Pro di Speed ​​Booster Pack:

• Molto semplice e facile da usare e viene fornito con un'interfaccia utente interattiva
• Aiuta con l'ottimizzazione JavaScript, l'ottimizzazione CSS, il caricamento lento e l'integrazione della rete di distribuzione dei contenuti (CDN).
• Aggiornato regolarmente per prestazioni eccezionali e miglioramenti dei bug

Contro di Speed ​​Booster Pack:

• Esiste il rischio che l'abilitazione di questo plug-in o di una qualsiasi delle sue funzionalità possa entrare in conflitto con altri plug-in sul tuo sito web

2. JavaScript differiti di WP:

Questo plugin per WordPress posticipa il caricamento di tutti i JavaScript aggiunti tramite wp_enqueue_script(), utilizzando LABJS. Il risultato è la corretta ottimizzazione del tempo di caricamento.

Pro di WP Deferred JavaScripts:

• Molto facile da usare ed è una delle soluzioni più popolari sul mercato
• Progettato esplicitamente per rinviare l'analisi di JavaScript in WordPress, non solo come funzionalità aggiuntiva

Contro di WP Deferred JavaScripts:

• Aggiornamenti poco frequenti e forse incompatibili con le versioni più recenti di WordPress
• Può causare la rottura di altri plugin sul tuo sito web

FAQ (Domande frequenti)

Conclusione

È molto importante posticipare l'analisi di JavaScript in WordPress per migliorare la velocità e le prestazioni del tuo sito web. Ci auguriamo che troverai questo articolo perspicace poiché abbiamo presentato i diversi modi per eseguire questa tecnica, che prevede l'uso di plug-in e l'aggiunta di codici ai file del tema.

Nel caso in cui trovi difficoltà ad aggiungere codici ai file del tema, ti consigliamo vivamente di utilizzare i plug-in sopra menzionati per posticipare l'analisi di JavaScript. I plugin sono facili da usare e puoi completare l'intero processo in pochi clic.

Dopo aver completato il processo, assicurati di eseguire il tuo sito Web tramite gli strumenti di test delle prestazioni del sito come GTmetrix per assicurarti che il tuo sito Web rinvii il maggior numero possibile di script.

Hai dubbi e domande su come rinviare l'analisi di JavaScript in WordPress? Spara loro nella sezione commenti qui sotto!