Come differire l'analisi di JavaScript in WordPress

Pubblicato: 2021-07-22

Rinvia l'analisi di JavaScript in WordPress

Il caricamento del tuo sito richiede troppo tempo? Non importa se stai utilizzando un sito WordPress o altro, i tempi di caricamento elevati sono un problema critico che deve essere risolto al più presto.

Quindi, stai vagando lo stesso? Bene, se controlli personalmente il tuo sito, potresti ricevere il messaggio "Rinviare l'analisi di JavaScript in WordPress". Questo sembra complicato e talvolta non comprensibile perché non sei esperto di tecnologia.

Se segui il messaggio, vedrai un aumento della velocità di caricamento della pagina e svolge un ruolo significativo nel migliorare le conversioni e le entrate del sito.

Ora la domanda è: cosa significa differire l'analisi di JavaScript in WordPress?

Quindi, ecco una risposta rapida e breve. Il differimento dell'analisi di JavaScript in WordPress consente al browser di caricare prima il contenuto del sito Web senza leggere gli script per completare il download e aumentare il tempo di caricamento.

Questo semplice processo è importante perché i browser eseguono il rendering e scaricano il JavaScript dal server prima di caricare il contenuto del sito web. Questo naturalmente ostacola la velocità del sito Web e interrompe il tempo di caricamento.

Ma differire l'analisi di JavaScript in WordPress è la chiave per sbloccare il problema e puoi goderti le prestazioni del sito web senza aspettare minuti.

Questo post condividerà le cinque tecniche collaudate per rinviare JavaScript. Ma prima di saltare sulle soluzioni bisogna capire il vero significato di questo messaggio pop-up.

Quindi, senza ulteriori indugi, iniziamo!

Cosa significa differire l'analisi di JavaScript in WordPress?

Sai come i browser visualizzano la pagina web? In caso contrario, bisogna prima capirlo.

Quando il tuo browser riceve una richiesta dall'utente, la invia al server web e la pagina inizia a scaricarsi in formato HTML. Questo documento HTML include testo e codice che esegue il rendering di elementi DOM e diverse risorse come immagini, script e fogli di stile.

Tuttavia, il browser scarica le risorse in sequenza. Ma il rending della pagina riprende tutti i processi e offre effetti negativi sui tempi di caricamento. Anche questo a volte ostacola il processo e mostra il messaggio: la pagina non può essere scaricata o mostra un errore del server.

Ogni volta che il browser esamina il codice per eseguire il rendering del sito Web o delle pagine, interrompe il rendering se viene trovato JavaScript. Questo processo viene interrotto finché non è possibile recuperare e analizzare lo script. Inoltre, ha un impatto negativo sulla velocità del tuo sito web.

Ma con l'aiuto di Defer Parsing di JavaScript in WordPress aiuta a notificare al browser di scaricare la pagina o il contenuto principale del tuo sito e offre un caricamento rapido. A questo, gli utenti possono trovare il sito web.

Perché è necessario differire l'analisi di JavaScript in WordPress?

Se il caricamento del tuo sito Web richiede troppo tempo, dovresti aumentarne le prestazioni con le buone pratiche. Se non sei a conoscenza delle prestazioni del sito Web, esegui il test sul sito utilizzando i migliori strumenti come GT Metrix, Google Pagespeed Insights o WPEngine.

Si tratta di strumenti di test della velocità che spesso suggeriscono e ti offrono di rinviare l'analisi di JavaScript quando analizzi il sito. Ad esempio, proviamo con GT Metrix.

In GTMetrix troverai il voto del tuo sito in ogni pagina e script specifici che devono essere migliorati il prima possibile. Per utilizzare questo strumento è possibile inserire l'URL del sito Web e attendere i minuti, in modo che possa recuperare tutti i dati.

Una volta completato, vai alla scheda della velocità della pagina e migliora la velocità di caricamento ed espande la sezione Rinvia l'analisi di JavaScript.

Qui troverai l'elenco degli script di caricamento che vengono caricati durante il processo di rendering. Quindi leggi tutto attentamente.

Attributi Async VS Defer

Questo è importante per garantire che il download di uno script non interagisca con il rendering della pagina web. Quindi, i due metodi per farlo sono Async e differire.

Se vuoi iniziare con Async devi aggiungere il seguente tag di script.

Con questo, il tuo browser riceve un aggiornamento che il browser dovrebbe caricare lo script in modo asincrono. Per essere precisi, il browser scarica le sue risorse non appena incontra il codice ma analizza l'HTML mentre la risorsa è ancora in fase di download.
Mentre d'altra parte, puoi scegliere il secondo metodo Differisci attributo. Quindi, aggiungi lo script fornito.

Con questo tag dirai al tuo browser di non scaricare le risorse fino a quando non avrà completato l'analisi della pagina web. Una volta completato il processo, scarica gli script posticipati in cui si è imbattuto in precedenza.

La differenza principale che stai per verificare quando vengono scaricate entrambe le risorse. Per un migliore utilizzo di entrambi si dovrebbe controllare l'applicazione web.

Se la tua applicazione web è compatta, dovresti optare per il rinvio mentre se hai pochi script Async è il migliore. Bene, non troverai alcuna differenza in entrambi, ma la verità è che il rinvio è per file di grandi dimensioni e Async è per piccoli.

Per conoscere meglio la differenza tra Async e differire abbiamo condiviso un esempio. Continuare a leggere.

Supponiamo di avere due script java JS1 e JS2. E c'è una condizione che JS2 appaia nel codice dopo JS1, il che significa che JS2 dipende da JS1, ma è più grande di JS2.

Se stai usando Async, c'è la possibilità che JS2 possa terminare il suo download prima di JS1. Ciò può causare un errore poiché JS2 viene eseguito in assenza di JS1

E se stai usando rinvia entrambi gli script JS1 e JS2, scarica correttamente e non causa errori.

Pertanto, è meglio differire per caricare gli script e migliorare la velocità del sito Web o il tempo di caricamento.

Motivi per cui è necessario rinviare l'analisi di JavaScript

Come abbiamo detto prima se vuoi posizionarti nella prima pagina di Google dovresti avere un'elevata velocità di caricamento della pagina web. Approssimativamente, una pagina dovrebbe essere caricata in 2-3 secondi. Sfortunatamente, JavaScript rende la qualità della pagina e perdi molto traffico.

Ritardare il caricamento di una pagina può influire sul tuo sito Web in molti modi. Fortunatamente, differire l'analisi di JavaScript può aiutarti a risolvere questo problema. Dai un'occhiata e controlla i motivi per cui può aiutarti.

Aumenta le classifiche di ricerca

Ogni volta che Google valuta le prestazioni del tuo sito web per il ranking di ricerca, il fattore più importante che Google controlla è il tempo di caricamento del sito. Se il tuo sito web si carica più velocemente, appare naturalmente nella prima pagina dei risultati di ricerca.

Secondo la ricerca, abbiamo riscontrato che quando 1 persona su 2 attende il caricamento del sito Web, altrimenti passa alla seconda fonte. Inoltre, Google favorirà solo quei siti Web che non daranno loro problemi ai lettori e offriranno loro la migliore esperienza utente.

E se il tuo sito web impiega più di 4 secondi per caricarsi, ha un impatto negativo sulle prestazioni del tuo sito web. Quindi, è importante lavorare su JavaScript. E il differimento è solo il modo intelligente per aumentare la velocità del sito da normale a super.

Per i migliori risultati dovresti seguire le tecniche SEO per aumentare i tuoi contenuti e ottimizzare la velocità della pagina.

Aumenta il tasso di conversione

Un altro motivo principale per cui il tuo sito Web deve differire se desideri aumentare il tasso di conversione. Se il sito web si carica lentamente, ci sono possibilità che i tuoi clienti rimbalzino su altre fonti e tu perda traffico e vendite.

Gli utenti hanno fretta, spesso amano seguire il sito che mostra loro informazioni rapide. E se il sito funziona lentamente, questo sarà frustrante per loro e potrebbero non visitare più la tua pagina. Non importa su quale sito o blog stai lavorando.

Il tuo compito è fornire il meglio ai tuoi utenti. La ricerca su Hubspot rivela che i tempi di caricamento del sito Web spesso scendono del 7% di tasso di conversione. Con la tecnica di Defer Parsing di JavaScript in WordPress puoi aumentare la velocità del tuo sito più velocemente che migliora ulteriormente il tasso di conversione.

Regala la migliore esperienza utente

Non pensiamo che tu abbia bisogno di una spiegazione di questo motivo. È abbastanza naturale se la velocità del tuo sito è buona e gli utenti si stanno godendo i contenuti del tuo sito, puoi aspettarti che i tuoi visitatori siano contenti del sito.

E se il caricamento del tuo sito richiede più tempo del solito, gli utenti abbandoneranno il tuo sito e migliorerà la frequenza di rimbalzo.

Con Defer Parsing di JavaScript in WordPress puoi aggiornare i file Java che ti aiutano facilmente a caricare rapidamente i principali contenuti del sito web. Questo schema di caricamento rapido ti aiuta a velocizzare il sito Web migliorando l'esperienza dell'utente.

I cinque diversi metodi per differire l'analisi di JavaScript in WordPress

Ora siamo arrivati alla nostra sezione principale dell'articolo. Qui imparerai le cinque brillanti tecniche che ti aiutano a velocizzare il sito, a offrire la migliore esperienza utente e a darti un percorso per classificarti al primo posto.

Quindi, conosciamo i metodi.

Per rinviare l'analisi di JavaScript, i tre percorsi importanti che puoi scegliere sono plugin, metodo varvy e file functions.php. Con questi percorsi, puoi applicare i cinque metodi indicati.

Metodo 1: utilizzo del plug-in JavaScript asincrono gratuito

In WordPress, Async JavaScript è un plug-in gratuito che aiuta a sradicare JavaScript che blocca il rendering nel carico di contenuti.

Con questo plugin, puoi goderti il pieno controllo su java Script e Async o differire può facilmente contribuire ad aumentare la velocità del sito e migliorarne le prestazioni nelle pagine di ricerca. Tuttavia, ci sono alcuni suggerimenti che dovrai seguire mentre scegli Async e differisci.

Async può scaricare JavaScript durante l'analisi dei file HTML, ma poi interrompe l'analisi HTML per eseguire i file JavaScript.
Defer può scaricare i file JavaScript durante l'analisi dei file HTML, ma attende di eseguire i file dopo il completamento dell'analisi HTML.

Passiamo ora a una guida passo passo per rinviare l'analisi di JavaScript in WordPress utilizzando il plug-in Async.

Apri la dashboard di WordPress e passa alla scheda dei plugin.
Nella scheda del plug-in, fai clic sul pulsante Aggiungi nuovo e cerca il plug-in JavaScript Async.
Quando trovi il plugin, fai clic sul pulsante Installa e attivalo.
Quindi, una volta completata l'installazione, vai alle impostazioni e apporta le modifiche richieste.
Spunta l'opzione abilita JavaScript asincrono e scegli differisci come JavaScript asincrono.
Per le funzionalità avanzate, spunta il segno di spunta e scegli dallo script che desideri applicare: tag Async e differisci.
Qui puoi scegliere gli script che desideri includere ed escludere. Inoltre puoi anche scegliere i plugin e i temi che desideri escludere da eventuali modifiche apportate da Async JavaScript Plugin.
Una volta completate le modifiche, salva le modifiche

Metodo 2: utilizzo del plug-in WP Rocket

Se non hai mai sentito parlare del plug-in WP Rocket, prendilo ora. WP Rocket è uno dei plugin più trendy che può aiutare il tuo sito web a caricarlo velocemente in pochi secondi.

Inoltre, con questo plugin puoi ricevere la memorizzazione nella cache della pagina, il pre-caricamento della cache, la compressione e molte altre fantastiche funzionalità.

Mentre d'altra parte, il plug-in ti aiuta anche a posticipare l'analisi di JavaScript nella scheda di ottimizzazione dei file.

Ecco come installare e utilizzare il plugin.

Apri la dashboard di WordPress e reindirizza alla scheda del plug-in
Ora fai clic sul pulsante Aggiungi nuovo e cerca il plug-in WP Rocket.
Tocca Installa e attiva il plugin.
Quindi vai alle impostazioni e apri l'ottimizzazione del file dal menu per iniziare.
Ora scorri verso il basso i file JavaScript e seleziona l'opzione Carica JavaScript differito e abilita la modalità provvisoria per Query.
Quando l'intero processo è completato, vai alla fine della pagina e fai clic sull'opzione Salva modifiche.

Metodo 3: utilizzo del plug-in Total Cache W3

W3 Total Cache è un altro dei migliori plugin che puoi utilizzare per differire l'analisi di JavaScript in WordPress. Questo plugin per WordPress è semplicemente utile per migliorare l'esperienza utente e la SEO del tuo sito web. Inoltre, migliora le prestazioni del sito Web e riduce i tempi di caricamento sfruttando la CDN (Integrazione per la consegna dei contenuti).

La cache totale W3 è molto efficace e sicura da usare. Inoltre, puoi utilizzare questo plugin per differire l'analisi di JavaScript in WordPress. Ecco come puoi usare questo plugin.

Per prima cosa visita la dashboard di WordPress e salta sulla pagina dei plugin.
Quindi vai avanti per aggiungere un nuovo pulsante e cercare il plug-in della cache totale W3.
Una volta trovato il plugin, fai clic sul pulsante Installa e attiva.
Ora il plugin è installato. Vai alle prestazioni e alle Impostazioni generali da WordPress.
Quindi scorri verso il basso la dashboard e passa alla sezione minimizza e seleziona l'opzione di abilitazione.
Inoltre puoi controllare l'opzione manuale dalla modalità minimizza e fare clic sull'opzione di salvataggio per continuare.

Minimizza il codice
Vai alla scheda delle prestazioni e scegli la scheda minimizza dalla barra laterale di sinistra e scorri verso il basso fino all'intestazione JS, lì puoi cercare le operazioni e la sezione dell'area con due tag HTML.

Riduci a icona le opzioni delle impostazioni
Scegli il non-blocco utilizzando l'opzione di differimento e incorpora prima il tipo di codice etichetta.

JS Minimizza le impostazioni

Nelle impostazioni, puoi vedere la gestione dei file JS in cui devi selezionare il tema WordPress.
Quindi fare clic sull'opzione Aggiungi uno script per includere l'URL di JavaScript che si desidera analizzare.
Puoi aggiungere tutti gli URL che desideri toccando il pulsante Aggiungi uno script.
Al termine delle modifiche, fai clic sul pulsante Salva impostazioni e sul pulsante Cache pure per continuare.
Una volta fatto, scorri verso il basso la sezione CSS.
Ora fai clic sul pulsante Aggiungi un foglio di stile.
Quindi nella gestione dei file CSS inserisci gli URL del foglio di stile.
Puoi aggiungerne più di uno in base ai suggerimenti forniti dagli strumenti di monitoraggio.
Ora hai completato le modifiche, quindi salva le impostazioni e il pulsante cache pure.

Metodo 4: utilizzo del metodo consigliato da Vary

Un altro metodo migliore che puoi optare per Defer Parsing di JavaScript in WordPress è scegliere il Vary, questo utilizza uno script per chiamare il file JavaScript esterno una volta caricata la pagina iniziale.

Ciò significa che i browser non scaricano o eseguono JavaScript finché la pagina Web non viene caricata. Tuttavia, questo metodo è suggerito da Patrick Sexton.

Per utilizzare questo metodo puoi modificare lo snippet di codice fornito da varvy e quindi aggiungerlo all'editor del tema nella sezione del corpo.

Quindi, ecco il codice che puoi aggiungere nella parte del corpo del tuo tema per differire l'analisi di JavaScript in WordPress.

<Tipo di script= “testo/javascript”>
Funzione downloadSAtOnload() {
elemento var = document.createElement ("Script");
element.src = "rinvia .js" ; document.body.appendChild (elemento);
}
Se
(window.addEventListener) window.addEventListener ("load' ,
downloadJSAtOnload , false);
altrimenti se
(window.attachEvent)
Window.attachEvent ("onload", downloadJSAtonlaod;
</script>

Mentre fai ciò, assicurati di aver cambiato defer.Js con il nome del file JavaScript esterno. Quindi dopo usa Wp_footer per iniettare il codice tramite il file functions.php del tema del bambino.

Ecco il codice che devi usare.

/**
Rinvia l'analisi di JavaScript con lo snippet di codice di Varvy
*/
Add_action ('wp_footer' , 'my_footer_scripts');
Funzione
My_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}

Ora ci stiamo muovendo sulla nostra guida passo passo per il buon senso.

Vai alla dashboard di WordPress e vai all'aspetto, quindi all'editor dei temi.
Naviga nel file header.php e poi incolla il codice sopra menzionato dopo e prima della sezione body.
Quindi fare clic sull'opzione di aggiornamento del file.

Metodo 5- Utilizzo del file functions.php

Se dimentichi, ti ricordiamo che non puoi aggiungere script direttamente a WordPress tramite HTML. Invece devi utilizzare le funzioni integrate di WordPress per richiedere le risorse e anche per eseguire il backup del tuo sito.

Dovresti usare l'attributo defer ai file JavaScript aggiungendo lo snippet di codice al tuo file functions.php.

Per completare il processo, apri l'editor del tema e vai al file functions.php per aggiungere il codice fornito.

Funzione
Defer_parsing_of_js ($url) {
Se (
Utente_ è_ connesso_in() )
Ritorna $url; //non interrompere WP Admin
Se ( FALSO ===
Strops($url, '.js'))
Ritorna $url;
If ( strops ($url, 'jquery.js' ) ) restituisce $url;
Return str_replace( 'src', 'defer src', $url);
}

Aggiungi_filtro (
'script_loader_tag',
'defer_parsing_of_js' , 10
);

Questo codice aiuta WordPress ad aggiungere l'attributo di differimento ai file JavaScript eccetto JQuery.

Ecco il codice che puoi utilizzare per sincronizzare gli attributi di differimento con i tuoi file JavaScript tramite il file functions.php.

Add_filter ("script _loader_tag ",
'add_defer_tags_to_script');
 
Funzione
add_defer_tags_to_scripts ($tyag) {
#list script da aggiungere attribuiti a $scripts_to_defer = array ('script_a', script_b');
$scripts_to_async = array ('script _c', 'script_d');
#aggiungi i tag di rinvio all'array scripts_to_defer
Foreach ($scripts_to_defer as $current_script) {
Se (true == strops ($tag,
$script_corrente) )
Ritorno
Str_replace ('src,'defer="defer" src','$tag);
}
#aggiungi i tag asincroni all'array scripts_to_async
Foreach ($scripts_to_async come $script_corrente) {
Se (true == strops ($tag,
$script_corrente) )
Ritorno
Str_replace ('src,'defer="
Async="async" src', $tag);

}
Restituisci $ tag;
)

Non dimenticare che devi accodare ogni codice, in modo che uno debba aggiungere il codice seguente.

Add_action ("wp_enqueue_scripts",
'enqueue_custom_js');
Funzione
Accoda_js_personalizzati () {
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_ds",
Get_stylesheet_directory_uri (), '/script_d.js') ;
}

Dopo aver aggiornato tutti i codici nel file functions.php, aggiorna il file e osserva le modifiche. Ecco una guida passo passo per aggiornare il file.

Apri la dashboard di WordPress e vai all'aspetto, quindi l'editor dei temi.
Naviga nel file functions.php e poi incolla i codici sopra menzionati.
Quindi fare clic sull'opzione di aggiornamento del file.

I plugin alternativi per differire l'analisi di JavaScript in WordPress

Oltre a Async e differire, hai altre due opzioni di plugin Differisci l'analisi di JavaScript in WordPress.

Pacchetto di potenziamento della velocità

Questo è un altro dei migliori plugin per WordPress che puoi utilizzare per migliorare facilmente la velocità del sito Web e ottimizzare per gli utenti. Facci sapere i suoi pro e contro.

Professionisti:

È semplice e facile da usare da chiunque grazie all'interfaccia utente interattiva.
Questo aiuta nell'ottimizzazione di JavaScript, nel caricamento scarso e nell'integrazione della CDN.
Questo verrà aggiornato regolarmente ed eliminerà la minaccia dei bug

Contro:

Ciò potrebbe creare problemi nell'utilizzo di altri plugin.

JavaScript asincrono

Questo plugin permette di caricare facilmente tutti gli script java aggiunti come wp_enqueue_script() usando LABJS. Facci sapere i suoi pro e contro.

Professionisti:

È un plugin molto facile da usare
È più popolare nel mercato dei plugin
Progettato per differire l'analisi di JavaScript in WordPress

Contro:

Aggiornamenti irregolari
Forse incompatibile con le versioni più recenti di WordPress
Può causare problemi ad altri plugin

Domande frequenti

Cosa intendi per differire l'analisi?

Il differimento dell'analisi è lo stato in cui i file JavaScript vengono caricati dopo il contenuto del sito Web nel browser. Ciò significa che il differimento non prenderà parte al caricamento e al rendering.

Pertanto, quando un utente richiede il tuo sito Web nel browser, l'analisi JavaScript posticipata non aspetta di caricare JavaScript nel browser e mostra immediatamente il contenuto. In parole semplici, i tuoi contenuti vengono prima visualizzati e poi caricati.

Come rimuovere il blocco del rendering dal sito Web di WordPress?

Uno degli approcci di successo per rimuovere il blocco del rendering dal sito Web è il rinvio dell'analisi prima degli altri elementi del sito Web. Un altro metodo per ridurre al minimo il rendering è concatenare JS e CSS insieme.

Quali strumenti posso utilizzare per identificare JS non critici sul mio sito?

Per identificare se JavaScript è critico per il tuo sito web o meno puoi accedere ai seguenti strumenti.

Approfondimenti di Google PageSpeed: questo ti aiuterà a identificare i punti di mancanza principali della velocità e delle prestazioni del tuo sito web. Inoltre, questo strumento offre anche alcuni suggerimenti per migliorare le prestazioni del tuo sito e il tempo di caricamento.
Con questo il tuo sito riceverà punteggi in diversi colori come rosso, arancione e verde. Il rosso mostrerà prestazioni basse, allo stesso modo l'arancione rivelerà la media e il verde per sempre.
Test di velocità del sito Web Pingdom: è un altro strumento popolare per monitorare e monitorare le prestazioni. Con questo strumento, puoi testare le prestazioni del tuo sito Web in sette posizioni diverse.
Inoltre, questo strumento offre anche suggerimenti per migliorare la velocità della pagina in modo da poter godere della migliore velocità e prestazioni del sito web

Puoi posticipare l'analisi di JavaScript in WordPress tramite il plug-in di ottimizzazione automatica?

Con lo strumento di ottimizzazione automatica puoi facilmente posticipare l'analisi di JavaScript. Per garantire il processo è necessario installare e attivare il plug-in come al solito. Una volta installato e attivato il plugin, visita le impostazioni e opta per l'opzione JS, CSS e HTML.

Ora ottimizza l'opzione del codice JavaScript e sbloccherai le opzioni. Ora spunta il segno di spunta sui file JS aggregati e lascia gli altri.

Inoltre, il plugin ti permette di escludere il JavaScript che non vuoi renderizzare. Una volta apportate le modifiche, fare clic sul pulsante Salva.

Avvolgendo
Per ottimizzare il tuo sito Web e ridurre i tempi di caricamento, differire l'analisi di JavaScript in WordPress è importante.

Ci auguriamo che con questo articolo tu abbia compreso il significato dell'analisi dei cervi e come può aiutare il tuo sito Web a posizionarsi in cima alle pagine di ricerca. Buona fortuna!