La velocità della pagina è uno degli aspetti più importanti del tuo sito web. Non importa quanto il tuo sito web ha da offrire, a nessuno piace aspettare minuti prima che il tuo sito web venga caricato. Allo stesso tempo, se il tuo sito web si carica più velocemente, è più probabile che mantenga i visitatori.
Inoltre, Page Speed tiene conto anche del posizionamento del tuo sito web nei motori di ricerca. Aiuta i crawler a capire quanto sia efficace e mantenuto il tuo sito web. In questo tutorial, vedremo Come rinviare l'analisi di JavaScript in WordPress.
Perché rinviare l'analisi di JavaScript è importante?
Per comprendere completamente il concetto di Defer Parsing di JavaScript, dovrai capire come un browser esegue il rendering di una pagina web. Quando il tuo browser richiede una pagina, il tuo server web la restituisce, che viene scaricata sotto forma di documento HTML.
Il documento HTML contiene diversi elementi e risorse che il browser legge elementi mentre le risorse aggiuntive vengono scaricate. E infine, la pagina viene visualizzata solo quando tutte le risorse sono state scaricate.
Create Amazing Websites
Con il miglior generatore di pagine gratuito Elementor
Parti oraLe risorse di dimensioni maggiori richiedono molto più tempo per essere scaricate. Le immagini rappresentano la maggior parte di queste risorse, motivo per cui è importante ottimizzare le immagini. Inoltre, puoi posticipare il download di script non necessari identificandoli e velocizzando la tua pagina web.
Come identificare quali script rinviare?
Per un sito Web minimale che non utilizza molto JavaScript, potrebbero non esserci script vitali per caricare la pagina. Al contrario, è importante per un sito piuttosto complesso avere un'analisi dettagliata di tutti gli script per capire quali sono essenziali per il caricamento della pagina.
Il primo metodo per eliminare gli script non necessari consiste nel rimuovere gli script uno per uno e controllare contemporaneamente eventuali errori nella console JavaScript. Allo stesso tempo, questo metodo richiede notevoli sforzi e conoscenze su JavaScript.
L'altro metodo consiste nell'utilizzare lo strumento di test della velocità per valutare quali script sono essenziali per il caricamento della pagina. Uno di questi strumenti include GTmetrix , dove tutto ciò che devi fare è inserire l'URL del tuo sito web, mostrando i risultati. Nella scheda Page Speed, troverai la sezione Defer Parsing For JavaScript, che mostrerà l'elenco degli script non necessari caricati durante il rendering della tua pagina dopo l'espansione.
Utilizzando le informazioni, puoi rimuovere gli script che non tengono conto del rendering della tua pagina.
Attributi posticipati o asincroni
Esistono due modi per eliminare il download degli script durante il rendering delle pagine.
Innanzitutto, aggiungendo l'attributo Defer al tag script, puoi assicurarti che il browser non scarichi risorse a meno che non venga eseguita l'analisi della pagina. Una volta completati il rendering e l'analisi della pagina, il browser può scaricare tutti gli script posticipati. Di seguito è riportato un tag di script di esempio che mostra come aggiungere l'attributo di rinvio a una pagina HTML.
<script src="path/to/script" defer></script>D'altra parte, puoi aggiungere un attributo asincrono al tag script. Questo guiderà il browser a caricare lo script separatamente. Ciò significa che il browser inizierà a scaricare le risorse quando incontra il codice mentre analizza separatamente l'HTML contemporaneamente. Lo script di esempio fornito di seguito mostra come aggiungere un attributo asincrono.
<script src="path/to/script" async></script>Entrambi questi attributi differiscono nel modo in cui scaricano le risorse. Per un sito Web minimale, non è facile notare differenze tra gli attributi asincroni e posticipati. Allo stesso tempo, per un'applicazione web più complessa, si consiglia di utilizzare la tecnica del differimento.
Rimanda l'analisi di JavaScript
Ecco i due metodi che puoi utilizzare per rinviare l'analisi di JavaScript.
1. Personalizza il file functions.php
Se sei abituato allo sviluppo di WordPress, devi sapere che non è una buona idea aggiungere script direttamente al markup HTML. Ma puoi utilizzare le funzioni WordPress integrate per richiedere risorse.
Per aggiungere un attributo asincrono o differito ai tuoi script, dovresti aggiungere la seguente funzione al file functions.php del tuo tema WordPress.
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;
}Assicurati di accodare ogni script prima di aggiungere gli attributi defer e async ai tag script.
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');
}2. Plugin per posticipare l'analisi di JavaScript
Comprensibilmente, non tutti hanno una notevole conoscenza e abilità per seguire il metodo sopra. Quindi, per i principianti, alcuni plugin possono essere utilizzati per rinviare l'analisi di JavaScript.
JavaScript asincrono
Async JavaScript è un plug-in WordPress gratuito che puoi installare sul tuo WordPress per eseguire l'attività.
Una volta installato e attivato il plugin, andare oltre alle impostazioni del plugin e selezionare l'opzione Enable JavaScript asincrono.
Scorri verso il basso per selezionare tra metodo asincrono o differito .
Scorri verso il basso per opzioni più avanzate in cui puoi aggiungere o rimuovere separatamente gli script per asincronizzarli e rinviarli. Inoltre, puoi eliminare plugin e temi dalle modifiche che questo plugin apporterà.
Ottimizzazione automatica
Autoptimize è un altro plugin che ti permette di rinviare l'analisi dei JavaScript.
Dopo aver installato e attivato il plug-in, seleziona l'opzione Ottimizza codice JavaScript nella pagina delle impostazioni . Questo rimanderà tutti gli script non necessari e li sposterà nel piè di pagina.
Puoi anche aggiungere gli script per l'attributo asincrono nella scheda Extra .
Puoi modificare il file functions.php o utilizzare plugin come Autoptimize e Async JavaScript . Questi sono i due metodi affidabili per aggiungere l'attributo async e defer ai tag di script.
Speriamo che queste tecniche ti aiutino a velocizzare il tuo sito web. Sentiti libero di unirti a noi sul nostro Facebook e Twitter per rimanere aggiornato sui nostri post.
