Come posticipare l'analisi di JavaScript in WordPress

JavaScript è uno dei linguaggi di programmazione più diffusi al mondo. La maggior parte dei siti Web lo utilizza per creare esperienze più dinamiche per i visitatori. Funzionalità critiche come i moduli di contatto e l'analisi del sito sono solo un paio di modi in cui JavaScript viene messo in pratica quotidianamente. Sfortunatamente, sebbene sia molto utile, tutto questo codice ha il potenziale per rallentare il tuo sito.

Rinviare l'analisi di JavaScript (chiamato anche semplicemente "rinviare JavaScript") significa dire al tuo sito di caricare il tuo codice JavaScript non essenziale per ultimo. Questa semplice modifica può migliorare i tempi di caricamento della pagina e le prestazioni complessive, a seconda del numero di script utilizzati dal tuo sito web.

In questo articolo, analizzeremo esattamente cos'è l'analisi e cosa comporta il rinvio. Discuteremo anche di come il rinvio di JavaScript può avvantaggiare il tuo sito e ti mostreremo come farlo. Infine, concluderemo con alcune domande frequenti (FAQ) per risolvere eventuali dubbi rimanenti.

Cosa significa "rinviare l'analisi di JavaScript"?

Quando visiti un sito Web, il tuo browser richiede file da un server. Questi file contengono HTML, CSS e JavaScript che il browser deve analizzare (interpretare) per creare una pagina Web visiva e interattiva.

I siti Web spesso richiedono al browser di caricare dozzine (o addirittura centinaia) di elementi e file per una singola pagina. Ecco un rapido esempio da una delle pagine di Google, in modo da poter vedere quanti file utilizza:

Quando il tuo browser analizza i file HTML, smette di eseguire il rendering di qualsiasi CSS che trova e di eseguire il codice JavaScript. Fino a quando il browser non avrà terminato di eseguire quel codice, non continuerà a caricare il resto della pagina.

In pratica, potresti non notare questo ritardo se il tuo sito web è ottimizzato molto bene (se si carica molto velocemente). Ma il ritardo c'è e più JavaScript utilizza il tuo sito, più lungo può essere. Se il tuo sito web non è ottimizzato per le prestazioni, l'analisi di JavaScript può rallentare notevolmente i tempi di caricamento.

Rinviare l'analisi di JavaScript significa dire al tuo browser: "Ehi, se ti imbatti in questo codice JavaScript, non analizzarlo finché non hai finito con il resto della pagina". Dal punto di vista del visitatore, ciò significa che gli elementi visibili della pagina verranno caricati più velocemente. Quindi, JavaScript finirà di essere eseguito in background e nessuno ne sarà più saggio (tranne te e il browser).

Quali sono i vantaggi del rinvio di JavaScript?

Il vantaggio principale del rinvio di JavaScript è che le pagine verranno caricate più velocemente per i visitatori. Gli script dovranno comunque essere caricati in background, ma rimandarli dovrebbe migliorare il tuo punteggio Largest Contentful Paint (LCP), che è una delle tre metriche Core Web Vital.

È importante ricordare che il tempo di caricamento della pagina è uno degli aspetti più importanti di un'ottima esperienza utente. Se un sito web impiega troppo tempo a caricarsi, in genere perderai una percentuale di visitatori. Inoltre, tempi di caricamento lenti possono dare l'impressione che ci sia qualcosa che non va nel tuo sito.

Come rinviare l'analisi di JavaScript in WordPress

WordPress offre più di un modo per ottimizzare il tuo sito web. Quando si tratta di rinviare JavaScript, ci sono due metodi che puoi usare.

Il primo metodo è il più semplice perché prevede l'utilizzo di un plug-in.

1. Rinvia l'analisi di JavaScript con un plug-in gratuito

Se non ti senti a tuo agio a modificare i file del tuo sito Web e ad aggiungervi codice, la soluzione migliore è utilizzare un plug-in. Uno dei migliori strumenti che puoi utilizzare per rinviare JavaScript non essenziale in WordPress è Jetpack Boost.

Jetpack Boost è un plugin gratuito che puoi utilizzare per ottimizzare le prestazioni del tuo sito WordPress. È incredibilmente semplice da configurare, rendendolo una scelta eccellente per i principianti.

Una volta attivato il plug-in, dovrai connetterti a un account WordPress.com (puoi utilizzare un account gratuito per questo).

Quando sei pronto, vai su Jetpack → Boost nella dashboard di WordPress e otterrai una rapida panoramica di come sta andando il tuo sito web in termini di prestazioni.

Se guardi le opzioni di seguito, vedrai un'impostazione che dice Defer Non-Essential JavaScript . Puoi attivare o disattivare questa impostazione e rimanderà automaticamente l'analisi di JavaScript in tutto il tuo sito web.

Il plug-in specifica JavaScript non essenziale perché influisce solo sugli script che non sono fondamentali per il sito web.

Una volta abilitata questa impostazione, assicurati di controllare il tuo sito Web per assicurarti che tutto funzioni correttamente. Se noti qualcosa di inaspettato, disattiva semplicemente la funzione.

Tieni presente che Jetpack Boost può anche abilitare il caricamento lento e ottimizzare il CSS del tuo sito. Ciò significa che il plug-in sposterà il CSS critico all'inizio di ogni documento HTML in modo che il browser lo analizzi per primo. Questa impostazione è particolarmente importante per migliorare il punteggio First Input Delay (FID).

2. Rinviare l'analisi di JavaScript utilizzando functions.php file

Il secondo metodo prevede la modifica del file functions.php del tuo tema. Il processo non è eccessivamente complicato, ma l'aggiunta di codice a WordPress a volte può causare effetti collaterali imprevisti.

Questo metodo è per utenti esperti, poiché possono accadere molte cose eliminando un solo file o aggiungendo accidentalmente uno spazio nel posto sbagliato. Ricorda, ti consigliamo di rinviare solo JavaScript non essenziale per evitare di danneggiare l'esperienza dell'utente.

Per sicurezza, ti consigliamo di eseguire il backup completo del tuo sito Web prima di modificare qualsiasi file WordPress. Anche se hai un backup recente, creane un altro in modo da avere un punto di ripristino prima di apportare modifiche. Se hai Jetpack VaultPress Backup, la versione più recente del tuo sito sarà già salvata per te.

Ci sono due modi per modificare il file functions.php . Puoi utilizzare l' editor di file del tema di WordPress, a cui puoi accedere dal menu Aspetto . Tieni presente che questa opzione è disponibile solo se non utilizzi un tema a blocchi che supporti l'editing completo del sito (FSE).

Una volta che accedi all'editor, seleziona il tuo tema attivo dal menu a discesa a destra e cerca il file functions.php nell'elenco.

Puoi utilizzare l'editor per aggiungere o rimuovere il codice da qualsiasi file del tema. Tuttavia, ti consigliamo di non modificare alcun codice esistente a meno che tu non ne comprenda lo scopo.

L'aggiunta di codice a functions.php dovrebbe essere sicura fintanto che proviene da una fonte attendibile. Il seguente frammento di codice configurerà il tuo sito web per rinviare l'analisi di JavaScript:

 function defer_js( $url ) {    if ( is_user_logged_in() ) return $url;     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_js', 11 );

Questo codice rimanderà automaticamente tutto il JavaScript sul tuo sito, ma non toccherà gli script jQuery. Tuttavia, non funzionerà se hai effettuato l'accesso per evitare problemi con il dashboard che non si carica correttamente.

Aggiungi quello script alla fine del file functions.php in modo che non interferisca con nessuno degli altri codici all'interno. Fai clic su Aggiorna file nella parte inferiore della pagina e il gioco è fatto!

Se non hai accesso all'editor di file del tema WordPress ma ti senti a tuo agio a lavorare con il codice su un server, puoi modificare functions.php collegandoti al tuo sito web tramite File Transfer Protocol (FTP). Dovrai utilizzare un client FTP come FileZilla per farlo. Ricorda, assicurati di eseguire un backup completo del sito prima di fare qualsiasi cosa.

Dopo esserti connesso al server del tuo sito web, dovrai trovare la cartella principale di WordPress. Questa è la cartella che contiene tutti i file del tuo sito. Di solito si chiama www, public_html o il nome del tuo sito.

Apri quella cartella e vai a wp-content/themes . Dovrebbero esserci diverse cartelle, una per ogni tema installato sul tuo sito. Identifica la cartella del tuo tema attivo e aprila. Il file functions.php dovrebbe essere proprio dentro.

Fai clic con il tasto destro su quel file e cerca un'opzione che dica qualcosa come Modifica (questo varierà a seconda del client FTP che usi). Questa opzione aprirà il file utilizzando l'editor di testo predefinito. Da qui, puoi aggiungere lo snippet di codice che abbiamo condiviso in precedenza e quindi salvare le modifiche al file.

Le stesse regole si applicano quando si modificano i file WordPress tramite FTP. Non modificare alcun codice se non sei sicuro di cosa faccia e fai attenzione ad aggiungere frammenti di codice a meno che non ti fidi della loro fonte.

Puoi sempre ripristinare il tuo sito WordPress utilizzando il backup recente se riscontri errori dopo aver modificato il file functions.php . Jetpack VaultPress Backup è un'opzione fantastica in questi casi perché offre funzionalità di ripristino con un clic anche se il tuo sito è completamente inattivo.

Domande frequenti sul rinvio di JavaScript

Se hai ancora domande su come funziona il rinvio di JavaScript, questa sezione risponderà. Iniziamo parlando dei potenziali effetti collaterali del rinvio degli script.

Il rinvio di JavaScript può danneggiare il tuo sito?

Sì, a seconda dei plugin e del tema che stai utilizzando, è possibile che il rinvio di JavaScript possa danneggiare alcuni elementi del tuo sito. E, se utilizzi il metodo manuale, un errore nel tuo codice potrebbe far crollare completamente il tuo sito.

Ecco perché è più sicuro utilizzare uno strumento come Jetpack Boost per occuparsi di questo compito. Sebbene sia ancora possibile che il rinvio di JavaScript possa causare un problema, puoi facilmente disattivare completamente la funzione o il plug-in.

Rinviare l'analisi di JavaScript equivale a "rimuovere JavaScript che blocca il rendering"?

Se utilizzi servizi di misurazione delle prestazioni del sito web come PageSpeed ​​Insights o GTMetrix, potresti notare che consigliano anche di eliminare JavaScript che blocca il rendering dal tuo sito web. A causa della lingua, può essere facile confondere questo suggerimento di ottimizzazione con il rinvio dell'analisi di JavaScript.

JavaScript che blocca il rendering si riferisce a qualsiasi codice che blocca il rendering del tuo sito. In molti casi, la soluzione migliore è eliminare questo codice se non soddisfa uno scopo specifico. Se ha una funzione, puoi invece rinviarla.

Determinare quali script sono necessari e quali no dipenderà dal tuo giudizio. Ma servizi come GTMetrix possono aiutarti a identificare JavaScript inutilizzato sul tuo sito web.

Tutti gli script che rientrano in questa categoria dovrebbero essere rimossi in modo sicuro. Per altri script, puoi utilizzare i plug-in (come Jetpack Boost) o modificare manualmente il file functions.php per rinviarli.

Posso rimuovere in modo sicuro JavaScript invece di rinviarlo?

Questo dipende dagli script a cui ti riferisci. Non è raro che i siti Web WordPress accumulino codice inutilizzato man mano che crescono. Ciò accade quando installi e disattivi i plug-in, provi i servizi di terze parti e smetti di usarli.

Lasciare quel JavaScript "orfano" sul tuo sito web a volte può creare un rischio per la sicurezza. Inoltre, può influire sulle prestazioni del tuo sito Web perché i browser potrebbero ancora aver bisogno di analizzarlo.

Se dai un'occhiata alla domanda precedente, ti mostriamo come utilizzare GTMetrix per identificare JavaScript sul tuo sito Web che puoi rimuovere in sicurezza.

Il rinvio di JavaScript migliora le prestazioni della pagina?

Il rinvio di JavaScript dovrebbe velocizzare il caricamento delle pagine del tuo sito web. Quanto più veloce dipenderà dal numero di script che stai rinviando e da quanto è ottimizzato il tuo sito web.

Se disponi già di un sito Web veloce e hai adottato misure per ottimizzarlo, come la rimozione di script inutilizzati, il rinvio di JavaScript potrebbe non avere un impatto significativo. Tuttavia, ogni bit di ottimizzazione conta quando si tratta di prestazioni della pagina.

Cos'altro posso fare per migliorare la velocità di caricamento della mia pagina?

Esistono molti modi per migliorare la velocità di caricamento delle pagine di un sito Web. Per il massimo impatto, ecco le ottimizzazioni che suggeriamo di implementare:

1. Prendi in considerazione l'utilizzo di un provider di hosting WordPress gestito.
2. Implementare una rete di distribuzione dei contenuti (CDN).
3. Migliora i Core Web Vitals in WordPress.
4. Minimizza CSS.
5. Abilita il caricamento lento in WordPress.

L'ottimizzazione delle prestazioni del tuo sito Web può richiedere del tempo, ma i plug-in di WordPress come Jetpack e Jetpack Boost rendono il processo molto più semplice e veloce.

Ricorda che ogni sforzo che fai per migliorare la velocità di caricamento della tua pagina sarà più che ripagato nel tempo. Se riesci a mantenere il tuo sito web in perfetta forma, i tuoi visitatori avranno un'esperienza molto migliore.

Migliora oggi le prestazioni del tuo sito web

Ci sono molte modifiche che puoi apportare al tuo sito web per migliorarne le prestazioni. Se utilizzi più script e plug-in di terze parti sul tuo sito, probabilmente c'è molto codice JavaScript in esecuzione in background. Quel codice è importante, ma potrebbe impedire il caricamento del resto del tuo sito web il più velocemente possibile.

Rinviare l'analisi di JavaScript in WordPress è più facile di quanto si possa pensare e può avere un impatto significativo sulle prestazioni del tuo sito web. Ecco i modi in cui puoi rinviare l'analisi JavaScript:

1. Usa un plugin come Jetpack Boost.
2. Rinvia JavaScript utilizzando il file functions.php .

Jetpack offre diversi plugin per migliorare le prestazioni del tuo sito Web WordPress. Jetpack Boost è solo uno di questi. Se utilizzi il plug-in Jetpack, hai anche accesso a un CDN gratuito che può migliorare drasticamente la velocità di caricamento del tuo sito. Prendi in considerazione l'idea di iniziare con Jetpack oggi!