Rinviare l'analisi di Javascript - 5 modi per risolverlo e aumentare la velocità (2024)

Come qualcuno che sta cercando di capire come differire l'analisi di Javascript, riteniamo che tu abbia un problema. Possiedi o hai visitato il sito web di qualcuno che conosci (forse un cliente?) E ci vuole un'eternità per caricarlo. E quando lo hai eseguito attraverso gli strumenti di test della velocità del sito web, hai ricevuto una raccomandazione che non sei sicuro di come implementare.

In questo articolo, condivideremo diversi modi su come differire Javascript e correggere questo avviso e, in definitiva, rendere il caricamento del sito Web più veloce, senza generare questo errore!

Se hai poco tempo, ecco alcune azioni rapide che puoi fare:

Istruzioni su come differire l'analisi di JavaScript

1. Scarica il plug-in Async qui.
2. Fare clic su Plugin> Aggiungi nuovo> Carica il plugin e seleziona il file che hai appena scaricato.
3. Fare clic su Attivare del plugin installato.
4. Vai a Plugin e fai clic su Impostazioni profilo per il plugin Async che hai appena installato.
5. Cliccando su Abilita Javascript asincrono, o Applica asincrono come due dei modi più comuni per applicare la correzione.
6. Testa il tuo sito web, per vedere che tutto funziona ancora bene.

Perché è importante la procedura per implementare il defer parsing di Javascript? Se non rimandi l'analisi di Javascript, sembrerà che il tuo sito web si stia caricando lentamente. Javascript è essenzialmente un importante elemento costitutivo del linguaggio del web, consente agli sviluppatori web di creare funzionalità "dinamiche".

Tuttavia, nella maggior parte dei casi, i file Javascript tendono a diventare piuttosto grandi. Potrebbero anche accedere da server di terze parti. Questo rallenta il download. Ma questo è solo metà del problema.

Il problema più grande è che se non c'è parsing differito di Javascript, il browser è BLOCCATO dalla visualizzazione del contenuto. Il sito web NON RENDE. E che aspetto ha un utente? Sembra che il sito sia lento, guasto o completamente morto. 

Il problema è aggravato sui dispositivi mobili, dove la potenza di elaborazione disponibile, insieme alla larghezza di banda disponibile, rendono l'esperienza ancora peggiore.

E cosa faranno gli utenti che avranno un'esperienza del genere? Rimbalzeranno via dal tuo sito web, per non tornare mai più!

Se sei nel settore del web da un po 'e stai cercando di migliorare la SEO del tuo sito web, sai già che le prestazioni del sito web lo sono cruciale per migliorare la visibilità del tuo motore di ricerca.

E se hai utilizzato Google PageSpeed ​​Insights per controllare il tuo sito web, oltre a "differire l'analisi di Javascript" ci sono avvisi ancora più criptici, come quello che dice "Elimina le risorse che bloccano il rendering".

Questa roba tecnica sembra avere il maggiore impatto sulla velocità di caricamento! 

Eliminare?! Ma come dovrei eliminare questi file cruciali dal mio sito web?

Non preoccuparti, siamo qui per aiutarti a correggere questi avvisi, risolvere questi problemi e, in definitiva, velocizzare il caricamento delle tue pagine!

Perché tu non è necessario rimuoverli. Tutto quello che devi fare è differire l'analisi di JavaScript.

Dai un'occhiata a questo breve video qui sotto per vedere quanto sia semplice differire l'analisi di Javascript utilizzando uno dei metodi seguenti:

In non geekspeak, ciò significa che devi modificare alcune cose nel tuo WordPress, per consentire alla pagina di caricare i tuoi contenuti prima di caricare o analizzare i tuoi file JavaScript. 

Questo perché, se non si rimanda l'analisi di Javascript, il rendering del sito Web diventa un'operazione molto pesante e, come abbiamo detto sopra, il sito Web sembrerà non funzionante.

Per garantire che l'utente rimanga sul sito, vorremmo fargli sapere che qualcosa sta realmente accadendo e mostrare il contenuto all'utente, invece di aspettare che il browser faccia tutto il lavoro pesante prima di mostrare effettivamente qualcosa all'utente . 

Per inciso, se stai cercando di rendere veloce il tuo WordPress, ci sono alcuni plugin come questo che può fare una vera differenza nelle prestazioni in pochi minuti (con uno sforzo minimo o nullo).

Se sei interessato, WP Rocket puoi impostare il differimento dell'analisi di Javascript e molte altre modifiche per rendere il tuo sito più veloce, basta fare clic sul banner qui sotto per verificarlo. 

Non sei pronto per utilizzare un plug-in per ora? Continuare a leggere... 

Che cos'è il differimento dell'analisi di JavaScript?

Rinviare l'analisi di Javascript significa utilizzare "defer" o "async"per evitare il blocco del rendering di una pagina. Questo comando HTML indica al browser di eseguire / analizzare gli script dopo (rinviare) o in modo asincrono (in parallelo) al caricamento della pagina. Ciò consente la visualizzazione del contenuto senza attendere il caricamento degli script .

Impostando il differimento dell'analisi di JavaScript, sarai in grado di caricare i tuoi contenuti più velocemente e con alta priorità.

Perché è così?

Vedi sotto questo eccellente spiegatore che mostra come vengono caricate le pagine web e come i file JavaScript ostacolano notevolmente il tempo di caricamento del tuo sito web.

Continuando con il video sopra, diamo una breve occhiata a cosa succede quando qualcuno visita il tuo sito web: 

1. Quando un utente fa clic su un collegamento che punta al tuo sito Web, il browser dell'utente lo richiederà al tuo server, che il tuo server "servirà" al browser dell'utente.
2. Il browser dell'utente riceve e vede il contenuto HTML della tua pagina web e inizierà a renderlo. Inizierà a costruire la tua pagina web dall'alto verso il basso.
3. Se trova file JavaScript lungo il percorso, il browser si fermerà e lo recupererà (se si tratta di un file esterno), quindi lo analizzerà
4. Solo dopo aver recuperato e analizzato completamente ogni singolo script continuerà a caricare il resto del contenuto.

Probabilmente stai già iniziando a vedere dove si trova il problema.

Quando le tue pagine hanno molti file JavaScript, può avere un impatto enorme sul tempo di caricamento del tuo sito web, negativamente.

Il browser dell'utente mostrerà continuamente l'icona di caricamento o la ruota che gira durante l'analisi e il caricamento degli script prima che mostri il contenuto effettivo, ciò è particolarmente visibile sui browser mobili o sugli utenti con connessioni dati a bassa velocità.

Se ci vogliono più di pochi secondi, specialmente se stai servendo i tuoi script da un server esterno (e quel server sembra avere problemi al momento), i tuoi visitatori inizieranno a diventare nervosi.

Durante questo periodo, l'utente non vede altro che una pagina bianca vuota. Non è una delle cose più frustranti su Internet? Tutto dovrebbe essere istantaneo sul web, perché devono aspettare il caricamento della tua pagina?

Se un utente attende più di 4 secondi, inizierà a diventare nervoso. Oltre gli 8 secondi e il tuo sito web è praticamente morto: l'utente rimbalzerà su un altro sito web.

Hai perso un visitatore e probabilmente i suoi affari. 

La complicazione aggiuntiva è che molte volte questi file JS vengono aggiunti al tuo sito Web da plugin e temi essenziali che hai installato, quindi non puoi eliminarli facilmente.

Quindi, che cosa fate?

Per risolvere questo problema, è necessario rinviare l'analisi di JavaScript. Funziona analizzando i tuoi script una volta che il contenuto principale è stato caricato. Guarda l'immagine qui sotto per vedere esattamente l'impatto nel tempo di caricamento. Come possiamo vedere il comando defer forza il browser a eseguire il Javascript in un secondo momento, mentre l'async consente che le cose avvengano parallelamente al download.

Pertanto, quando un utente visita il tuo sito, il tuo browser continuerà invece ad analizzare tutto dall'alto verso il basso, ma salterà i tuoi file JavaScript per dopo. In questo modo, i tuoi utenti potranno vedere immediatamente i tuoi contenuti senza dover aspettare. 

Se hai guardato il video sopra, hai visto che gli attributi "async" e "defer" sono di grande aiuto.

Ma come lo faresti su WordPress? Inoltre, quando è il momento giusto per usarli? Vediamo e iniziamo!

Analizza il tuo sito web

Prima di iniziare, devi sapere se devi implementare o meno la correzione Javascript differita sul tuo sito. Per scoprire se è necessario, puoi utilizzare diversi strumenti immediatamente disponibili online.

Alcuni esempi sono i seguenti:

1. GTMetrix

Funziona controllando le metriche di PageSpeed ​​e Yslow e ti dà un punteggio da F ad A. Ti danno anche consigli e suggerimenti su come migliorare il tuo sito web se vengono rilevati problemi. Ti dirà specificamente se è necessario differire l'analisi di JavaScript. 

In generale, il punteggio dovrebbe essere almeno 71.

L'immagine sotto mostra un sito web che non necessita di rinvio. 

2. PageSpeed ​​Tools

uno strumento sviluppato da Google, PageSpeed ​​Insights è un altro strumento completo che fornisce informazioni complete sui problemi di prestazioni del tuo sito insieme a suggerimenti per risolverli proprio come GTMetrix.

Una delle cose migliori di questo strumento è che include collegamenti a guide e risorse approfondite per aiutarti a risolvere tutti i tuoi problemi di prestazioni. L'immagine sotto mostra un sito web che ha bisogno di implementare l'analisi differita di JavaScript.

3. Pingdom Tools 

Un altro popolare strumento di test delle prestazioni del sito Web disponibile gratuitamente per tutti.

Sebbene non sembri dirti esplicitamente se è necessario differire l'analisi di JavaScript, puoi controllare quanto tempo è necessario per il caricamento degli script grazie alla loro pagina dei risultati completa.

L'immagine sotto mostra un sito web che ha quasi metà della sua pagina composta da JavaScript, un ottimo indicatore del fatto che potresti voler rinviare i tuoi script. 

4.  Varvy Page Speed 

Un altro ottimo strumento che ti dirà se il tuo sito ha script di blocco del rendering.

La cosa migliore è che ti consente di sapere esattamente cosa sono, proprio come nell'immagine qui sotto: 

Va bene, d'accordo!

Ora hai accesso a strumenti che possono aiutarti a determinare se è necessario implementare l'analisi differita dei file JavaScript.

Ma potresti chiederti perché non implementarlo e lasciarlo solo? Se rinvii l'analisi di JavaScript in modo errato può rompere le cose e può essere frustrante risolverlo se non sei esperto di tecnologia.

La semplice attivazione della modalità di differimento non significa che tutto è impostato per essere dimenticato e funzionerà correttamente. Dovrai controllare se hai fatto bene e assicurarti che tutto funzioni ancora come previsto. 

Ad esempio, se usi jQuery, devi scegliere attentamente quale dei tuoi script dovresti rimandare perché sembra che ci sia un problema con defer e jQuery.

In aggiunta a ciò, scoprirai che ci sono un sacco di domande su Stack Overflow su jQuery, async e defer che spesso riguarda il modo in cui dovresti implementare defer e async, se necessario, ai tuoi script che si basano su jQuery. 

Allora, quali sono i risultati? Hai bisogno di rinviare i tuoi script?

In tal caso, scopriamo ora come differire JavaScript in WordPress!

Come differire l'analisi di JavaScript in WordPress

Rinviare l'analisi di JavaScript in WordPress può essere abbastanza semplice.

Puoi semplicemente installare uno delle migliaia di plugin nel repository di WordPress e sei a posto. Ma ci sono anche modi avanzati per farlo se hai bisogno di maggiore controllo, specialmente se stai usando script complessi per rendere il tuo sito più coinvolgente e interattivo. 

In questa sezione, esamineremo cinque diversi modi per eseguire l'analisi differita di JavaScript in WordPress: tramite plug-in, tramite functions.php e la modifica manuale del codice. 

Ci sono così tanti plugin nel repository di WordPress che possono aiutarti a migliorare le prestazioni del tuo sito web.

Ci sono quelli dedicati a un'attività particolare come la minimizzazione del codice HTML e ci sono plug-in che cercano di incorporare tutte le modifiche relative alle prestazioni in un plug-in come avere la possibilità di minimizzare e differire i file CSS e JavaScript, implementare e sfruttare la cache del browser (che abbiamo ampiamente trattato in questo articolo) E più. 

Tuttavia, non tutti i plugin sono creati uguali. Alcuni funzionano alla grande, altri funzionano bene e alcuni non funzionano affatto e potrebbero persino compromettere alcune o tutte le funzionalità del tuo sito. 

(Se preferisci che qualcuno sia esperto a gestirlo per te, puoi farlo usando un concerto Fiverr economico facendo clic sul pulsante in basso.)

1. Rimanda l'analisi di Javascript utilizzando il plug-in Async

Onestamente, consigliamo vivamente di optare per un plug-in premium (che è estremamente economico) ma hai la certezza di correggere non solo questo avviso, ma un'intera gamma di problemi di velocità di caricamento del sito web.

Inizieremo con uno dei più popolari che hanno lo scopo di svolgere un singolo lavoro definito da questo articolo.

Una delle scelte più popolari per eseguire questo lavoro è Async Javascript. Questo plugin si concentra sul miglioramento delle prestazioni del tuo sito modificando il modo in cui i tuoi script vengono caricati e, come WP Rocket di seguito, include anche funzionalità avanzate aggiuntive che ti consentono di escludere determinati script dal differimento.

Ecco i passaggi che devi eseguire per utilizzare questo plugin.

1. Scarica il plug-in Async qui.
2. Fare clic su Plugin> Aggiungi nuovo nel backend WP.
3. Fare clic su Carica il plugin e seleziona il file che hai appena scaricato.
4. In alternativa, cerca Async Javascript e fai clic su Ora l'installazione.
5. Fare clic su Attivare del plugin installato.
6. Vai a Plugin e fai clic su Impostazioni profilo per il plugin Async che hai appena installato.
7. Ti consigliamo di fare clic su Abilita Javascript asincrono, o Applica asincrono come due dei modi più comuni per applicare la correzione.
8. Se questi non funzionano, puoi provare alcune combinazioni diverse.
9. Testa il tuo sito web, per vedere che tutto funziona ancora bene.

Forse uno dei suoi punti di forza è che oltre alla possibilità di escludere determinati script dal differimento, hai anche la possibilità di scegliere quali script differire invece:

Potresti anche notare che hai la possibilità di asincronizzare o rinviare uno script. Per ulteriori informazioni sulla differenza tra i due, puoi leggere questo articolo.

Una caratteristica unica di questo plugin è che puoi specificare di escludere un certo tema o plugin.

C'è anche un'opzione per integrare GTMetrix sul tuo sito in modo da poter sempre controllare le sue prestazioni. Tieni presente che ogni volta che esegui un test, tuttavia, verrà detratto un credito API dal tuo account GTMetrix.

Mentre alcune persone lo consiglieranno JavaScript differito WP, questo plugin non è stato aggiornato da più di 3 anni e non è stato testato con le ultime 3 versioni principali, quindi ti consigliamo vivamente di non utilizzare questo. Potrebbe ancora funzionare, ma non è stato testato, quindi è un rischio che non dovresti correre.

Se hai un sito relativamente semplice e stai cercando di migliorare ulteriormente i tuoi tempi di caricamento, questo potrebbe essere proprio ciò di cui hai bisogno. Questo plugin non richiede alcuna configurazione: installa, attiva e dimentica.

Ancora una volta, tieni presente che questo non è raccomandato per siti complessi come l'e-commerce a causa della sua mancanza di opzioni di modifica avanzate e per la sua età. Essere in grado di mettere a punto le opzioni di differimento di JavaScript è fondamentale per i siti grandi e complessi.

2. WP Rocket

Attualmente il principale plug-in per le prestazioni di WordPress in circolazione, WP Rocket offre non solo la possibilità di differire l'analisi dei file JavaScript ma anche dei file CSS. Oltre a ciò, ottieni tonnellate di altre opzioni di miglioramento delle prestazioni.

Alcune caratteristiche includono quanto segue: 

• Minificazione: riduce le dimensioni del codice del tuo sito in modo che venga caricato più velocemente. Lo fa rimuovendo spazi bianchi e altri caratteri non necessari dal codice senza influire sulla sua funzionalità di base.
• Concatenazione: combina più file CSS e JavaScript in uno solo.
• Caricamento lento: questa è la modalità di differimento per i file video e altri contenuti multimediali come le immagini. Ritarda il caricamento di questi file ad alta intensità di risorse fino a quando l'utente non li scorre verso il basso.

Una delle cose migliori di WP Rocket è che una volta installato e attivato, puoi semplicemente lasciarlo da solo e otterrai automaticamente miglioramenti delle prestazioni.

Tuttavia, puoi configurare le impostazioni avanzate per un aumento delle prestazioni ancora maggiore, ma tieni presente che alcune di esse potrebbero avere effetti negativi sul tuo sito. E per questo motivo, la loro opzione di rinvio per i file JavaScript e CSS non è abilitata per impostazione predefinita perché se fatta attenzionelessly, possono rompere le cose.

Per fortuna puoi escludere determinati script dal rinvio.

Puoi provare a escludere prima tutti i tuoi script e poi rimandare l'analisi dei file Javascript uno per uno finché non trovi quello problematico. Loro hanno ampia documentazione per aiutarti in questo. In questo modo, sarai in grado di massimizzare i miglioramenti delle prestazioni senza interrompere o sacrificare alcune o tutte le funzionalità del tuo sito web.

WP Rocket è un plugin premium, ma dato il prezzo e le funzionalità fornite (non solo il differimento e l'asincronizzazione dei file JS ma molte altre ottimizzazioni che sono garantito per rendere il tuo sito web più veloce), riteniamo che valga davvero il prezzo.

Scarica WP Rocket

3. Pacchetto Speed ​​Booster

Un altro ottimo plug-in per le prestazioni all-in-one che ti consente di differire l'analisi dei file Javascript è Pacchetto Speed ​​Booster. È simile a WP Rocket in termini di funzionalità, ma è gratuito. Ha la maggior parte delle funzionalità di base di WP Rocket come la minimizzazione, il differimento, la rimozione di file non necessari, ecc.

Di seguito puoi vedere alcune delle funzionalità disponibili nel plugin: 

Nella scheda Avanzate, puoi scegliere di escludere alcuni script dallo spostamento a piè di pagina o dal rinvio o entrambi. Tuttavia, puoi aggiungere solo fino a 4 script esclusi, il che è certamente un limite per siti complessi e di grandi dimensioni. 

Nel complesso, è una buona alternativa gratuita a WP Rocket, adatta per piccoli siti.

4. Utilizzo dei tweaks di functions.php

E se non vuoi usare i plugin?

C'è un altro trucco che puoi fare per differire l'analisi di Javascript in WordPress ed è modificando il file functions.php del tuo tema.

Copia semplicemente il codice qui sotto e incollalo nella parte inferiore del file function.php del tuo tema: 

function defer_parsing_of_javascript ( $url ) {
  if ( FALSE === strpos( $url, '.js' ) ) return $url;
  if ( strpos( $url, 'jquery.js' ) ) return $url;
    return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_javascript', 11, 1 ); 

Tieni presente che potresti rovinare il tuo sito se lo fai male, quindi presta molta attenzione e assicurati di modificare il file corretto nel tema corretto e di incollare lo snippet di codice nella posizione corretta. Assicurati di non cancellare / modificare nient'altro.

Per fortuna, puoi creare un tema figlio per apportare modifiche sicure al tuo file functions.php. Inoltre, se sostituisci o aggiorni il tuo tema, puoi facilmente conservare tutte le tue modifiche personalizzate nel file. Ecco un ottimo articolo che spiega come creare un tema figlio. Dopo aver creato un tema figlio, incolla lo snippet di codice nel file function.php del bambino, salvalo ed è tutto pronto.

Per saperne di più: Il blocco dei messaggi è attivo

5. Modifica manualmente il codice

Questo potrebbe sembrare spaventoso, soprattutto se non sei appassionato di codifica, ma per gli utenti avanzati, modificare manualmente il codice è un ottimo modo per differire l'analisi dei file JavaScript in WordPress. 

Varvy ha un ottimo snippet di codice che consente al contenuto iniziale della tua pagina web di caricarsi completamente prima di caricare qualsiasi altro script esterno. Lo snippet di codice è di seguito:

  function downloadJSAtOnload () {
    var element = document.createElement ("script");
    element.src = "//www.tuodominio.com/defer.js";
    document.body.appendChild (elemento);
  }
  se (window.addEventListener)
    window.addEventListener ("load", downloadJSAtOnload, false);
  altrimenti se (window.attachEvent)
    window.attachEvent ("onload", downloadJSAtOnload);
  altro window.onload = downloadJSAtOnload;

Sostituisci defer.js con il tuo file di script. Dopo averlo modificato per riflettere il tuo script, incollalo appena prima del tuo HTML etichetta. In WordPress, puoi farlo modificando il file footer.php del tuo tema.

Anche in questo caso, si consiglia di utilizzare un tema figlio se si dovessero creare modifiche nei file del tema. Una piccola nota: la modifica di footer.php tramite il child theme è diversa da functions.php: devi copiare l'intero footer.php del tuo tema principale insieme al suo contenuto nel child theme e quindi apportare / aggiungere le modifiche. 

Se non vuoi preoccuparti di modificare il tuo footer.php, puoi usare un plugin chiamato Intestazioni e piè di inserimento. 

Basta incollare lo snippet di codice nella casella "Script in piè di pagina", premere salva e avrai lo script aggiunto nell'area inferiore del codice del tuo sito, sopra il etichetta. 

E questi sono tutti i modi in cui puoi differire l'analisi di JavaScript in WordPress! Ma funzionano? Hanno migliorato le prestazioni del tuo sito? Controlliamo i risultati!

Testare i risultati

Per testare i risultati, vai su GTMetrix.com, PageSpeed ​​Insights e Pingdom Tools per vedere se il tuo livello di prestazioni e il tempo di caricamento sono migliorati.

In GTMetrix, il tuo punteggio dovrebbe essere almeno 71. Più sono, meglio è! Un punteggio perfetto vorrebbe questo :-) 

In PageSpeed ​​Insights, cerca "prime pitture":

In genere, quando si verifica se l'implementazione dell'analisi differita di JavaScript ha comportato il rinvio degli script, mirare a risultati verdi in First Contentful Paint e First Significante Paint.

Confronta prima e dopo il differimento e controlla se migliorano.

Per gli strumenti di Pingdom, dai un'occhiata alla sezione dell'ordine di caricamento e verifica se la maggior parte, se non tutti, i tuoi file di script vengono caricati per ultimi. Confronta prima e dopo il rinvio e controlla se i file di script hanno cambiato posizione nell'ordine di caricamento (cioè sono stati caricati prima o dopo). 

I risultati ti hanno soddisfatto? Se è così, ottimo lavoro! In caso contrario, prova a sperimentare di più. Se hai utilizzato altri metodi nel nostro elenco, prova a utilizzare plug-in avanzati che ti consentono di personalizzare ulteriormente le opzioni di differimento e prestazioni. Inoltre, controlla alcuni consigli di Google nella sezione successiva. Potrebbero aiutarti.

Come differire l'analisi di JavaScript utilizzando uno script

Esistono diverse tecniche che puoi utilizzare per differire l'analisi di JavaScript. La sezione successiva discute cosa è necessario fare. 

In sintesi, è necessario eseguire quanto segue:

1. Copia il codice sottostante e aggiungilo subito prima del file tag nel tuo HTML.
2. Sostituisci example.js nel codice seguente con il file contenente lo script da rinviare.
3. Salva le modifiche.
4. Testa il tuo sito web per vedere l'effetto.

Diamo un'occhiata a questi passaggi in modo più dettagliato:

• Utilizzare uno script per chiamare un file JS esterno una volta terminato il caricamento della pagina iniziale. Su varvy.com, Patrick Sexton suggerisce un metodo che consente il caricamento del contenuto del sito Web, prima di caricare un JS (per garantire che l'utente possa vedere prima il contenuto). Ciò garantisce che il percorso di caricamento critico non sia influenzato da script che causano il blocco del rendering. Il metodo prevede la creazione di un file esterno che non è necessario per la visualizzazione iniziale del contenuto. Aggiungendo quindi il seguente script appena prima del file nell'HTML. L'esempio seguente utilizza un file example.js, che dovrebbe essere aggiornato di conseguenza. 

  <script type="text/javascript">
      function downloadJSAtOnload() {
          var element = document.createElement("script");
          element.src = "example.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>

  Al termine del caricamento della pagina Web, lo script inizierà il download e l'esecuzione esempio.js - il problema è che dovrai creare il file manualmente.

• Utilizzo degli attributi async o defer. Il tag JS async or differire gli attributi agiscono in modo simile: il modo in cui funzionano è tale da ridurre al minimo la quantità di tempo in cui l'analisi dell'HTML si ferma per attendere il download e l'esecuzione degli script. Asincrono consente che il download dei file JS avvenga in modo asincrono, piuttosto che sincrono, ovvero viene aperto un nuovo thread da scaricare mentre l'HTML continua ad analizzare. Defer indica al browser di eseguire lo script DOPO il completamento del caricamento della pagina. Questo è un altro modo per consentire il completamento dell'analisi della pagina e quindi non creare un impatto sul tempo di caricamento. Entrambi questi tag riducono al minimo il blocco del rendering di JS. Nell'utilizzo di entrambi, il JS non ha bisogno di attendere che l'HTML termini l'analisi prima di iniziare a scaricarlo o eseguirlo, il che garantisce che la pagina venga comunque caricata rapidamente. Guarda come avviene l'esecuzione rispettivamente per async e defer nelle immagini sottostanti.
  
  

• Sposta JavaScript in fondo alla pagina. Il terzo e ultimo suggerimento è di spostare qualsiasi <script> tag nella parte inferiore delle pagine (soprattutto se non sono critici, come gli annunci). Questo metodo non è l'ideale, perché il browser sarà ancora occupato fino a quando l'ultimo script non sarà stato completamente scaricato ed analizzato. Dato che il browser sembra occupato, alcuni visitatori potrebbero non interagire con la pagina fino a quando non viene caricata completamente, con il risultato di un'esperienza utente potenzialmente negativa.

Suggerimenti da Google

Google ha tantissime risorse per migliorare le prestazioni del tuo sito web. Hanno anche una pagina dedicata a migliorare il tempo di caricamento degli script del tuo sito, che puoi controllare qui.

Nel menu a sinistra puoi anche trovare altre risorse che ti aiutano a migliorare le prestazioni del tuo sito. Assicurati di controllarli anche se il rapporto di PageSpeed ​​Insights ha segnalato problemi ad essi correlati.

Per una panoramica, Google suggerisce che dovresti invece incorporare gli script critici e asincronizzare o rinviare gli script non critici. Ciò significa che gli script richiesti dal tuo sito dovrebbero essere incorporati nell'HTML. Questo è, tuttavia, il lavoro degli sviluppatori di temi e plugin di WordPress, ma se dovessi creare il tuo tema o plugin, tienilo a mente.

Per saperne di più:  Come assumere (GRANDI) sviluppatori Javascript

Oltre a ciò, Google ha anche delineato un modo per identificare manualmente quale dei tuoi script blocca il rendering della tua pagina web avendo un tempo di caricamento molto lungo. Puoi farlo utilizzando gli strumenti di sviluppo di Chrome copertura scheda.

Posticipa CSS inutilizzato

Un problema simile che potresti vedere verificarsi in questi giorni, anche nello strumento Pagespeed Insights, è il differimento dei CSS inutilizzati. Anche se questo è un problema simile, le sue radici sono in qualche modo diverse. In sostanza, il CSS dovrebbe essere ristrutturato per risolvere questo problema correttamente.

{loadpostion imh-incorpora}

Domande frequenti

Come posso correggere il differimento dell'analisi di JavaScript in WordPress?

Per correggere il differimento dell'analisi di Javascript in WordPress, è necessario apportare alcune piccole modifiche al codice. Puoi trovare tutti gli script e aggiungere il file differire tag ad essi, oppure potresti installare un plugin che lo faccia automaticamente. È inoltre possibile creare uno script che carichi i file in modo asincrono, come dimostrato nella sezione Come differire l'analisi di Javascript utilizzando uno script di questo articolo.

Cos'è il differimento di JavaScript?

Il differimento dell'analisi di Javascript è il processo che indica al browser dei visitatori del tuo sito web di caricare file specifici DOPO il caricamento della pagina. Ciò consente all'utente di vedere il contenuto della pagina molto più rapidamente rispetto a se non si implementasse l'analisi differita di Javascript

Qual è la differenza tra Javascript asincrono e differito?

Async significa che il contenuto Javascript viene caricato come una propria nuova connessione, parallelamente a qualsiasi altro codice esistente. Con async, il browser crea un nuovo thread di elaborazione che non rallenterà i download esistenti mentre il Javascript viene scaricato ed eseguito. Defer d'altra parte, chiede al browser di analizzare lo script, dopo che il resto del contenuto è stato scaricato. Sebbene questo di solito sia un bene per la velocità, potrebbero esserci alcuni problemi con il tuo contenuto, se fa riferimento allo script che è stato differito (perché non sarà disponibile).

Come posso minimizzare JavaScript in WordPress?

Per minimizzare Javascript in WordPress, dovrai implementare un plugin che lo faccia automaticamente. Puoi leggere di più su questo qui. 

Avvolgere Up

E hai appena visto come differire l'analisi di JavaScript in WordPress.

Abbiamo imparato che può essere ottenuto tramite plug-in o tramite modifiche manuali. Ha un sacco di vantaggi per il tuo sito come SEO migliorato, migliore esperienza utente e tempi di caricamento più rapidi. È quindi importante assicurarsi di rinviare il maggior numero di script possibile per ottenere i massimi vantaggi in termini di prestazioni.

Ma ricorda, tieni sempre un backup e prova molto per assicurarti di aver differito gli script corretti! Potrebbe sembrare noioso, ma se fatto bene, i vantaggi e i guadagni sono enormi.

Se vuoi davvero massimizzare la velocità di caricamento del tuo sito web, ti suggeriamo di lasciarlo ai professionisti come i ragazzi di WP Rocket, per ottenere i massimi benefici da questa e centinaia di altre azioni per rendere il caricamento del tuo sito web più veloce.

Visita WP Rocket per rendere il tuo sito web più veloce oggi  

L'autore

Autore: Davide AttardSito web: https://www.linkedin.com/in/dattard/E-mail: davide@collectiveray.com

David ha lavorato nel settore online e digitale negli ultimi 21 anni. Ha una vasta esperienza nei settori del software e del web design utilizzando WordPress, Joomla e le nicchie che li circondano. Ha lavorato con agenzie di sviluppo software, società di software internazionali, agenzie di marketing locali e ora è responsabile delle operazioni di marketing presso Aphex Media, un'agenzia SEO. In qualità di consulente digitale, il suo obiettivo è aiutare le aziende a ottenere un vantaggio competitivo utilizzando una combinazione del loro sito Web e delle piattaforme digitali oggi disponibili. La sua miscela di esperienza tecnologica combinata con un forte senso degli affari conferisce un vantaggio competitivo ai suoi scritti.