Come ottimizzare l'esecuzione di JavaScript e migliorare la velocità del tuo sito

Nel mondo della SEO tecnica, Core Web Vitals può essere una delle metriche più difficili da migliorare, soprattutto se il tuo sito web utilizza una grande quantità di JavaScript.

JavaScript viene utilizzato in tutto il Web per creare contenuti interattivi e dinamici e si stima che fino al 97% di tutti i siti Web utilizzi JavaScript in qualche forma. Il problema è che JavaScript può richiedere molte risorse da caricare, aumentando First Contentful Paint (FCP), Largest Contentful Paint (LCP) e Total Blocking Time (TBT).

Alla fine di questo tutorial, sarai in grado di identificare quali file JavaScript stanno avendo un impatto significativo sui tempi di caricamento e come l'ottimizzazione della loro esecuzione sia uno dei modi più efficaci per migliorare le prestazioni e placare il rapporto Core Web Vitals.

Una breve introduzione a JavaScript e all'impatto che ha sui tempi di caricamento

JavaScript è un linguaggio di programmazione versatile che può essere utilizzato in una varietà di applicazioni diverse, poiché è nativo di un browser Web, JavaScript è più conosciuto come un linguaggio basato sul Web che può essere naturalmente compreso dai browser Web.

Gli sviluppatori in genere utilizzano JavaScript per creare giochi e applicazioni basati sul Web complessi, nonché siti Web dinamici e interattivi. Grazie alla sua versatilità, JavaScript è diventato il linguaggio di programmazione più popolare al mondo.

Prima di JavaScript, i siti Web potevano essere creati solo utilizzando HTML e CSS statici, il che significava che non potevano essere dinamici. Ora, quasi tutti i siti Web su Internet vengono creati utilizzando almeno alcuni elementi di JavaScript per servire contenuti dinamici come;

• Menu a discesa 'hamburger', mostrando o nascondendo determinate informazioni
• Elementi a carosello e scorrimento orizzontale
• Effetti al passaggio del mouse e al passaggio del mouse
• Riproduzione di video e audio su una pagina web
• Creazione di animazioni, elementi di parallasse e altro ancora

Che impatto ha JavaScript sulla SEO

Fare molto affidamento su JavaScript può rendere più difficile per i motori di ricerca la lettura e la comprensione della tua pagina. Sebbene i motori di ricerca più popolari abbiano apportato miglioramenti drastici all'indicizzazione di JavaScript negli ultimi anni, non è chiaro se possano eseguire il rendering completo di JS.

Per capire in che modo JS influisce sulla SEO, è importante capire cosa fa Googlebot quando esegue la scansione di una pagina web. I 3 passaggi necessari sono; scansione, rendering e indicizzazione.

Innanzitutto, Googlebot ha un elenco di URL in coda. Esegue la scansione di queste pagine una per una e il crawler effettua una richiesta GET al server, che invia il documento HTML.

Successivamente, Google determina quali risorse sono necessarie per visualizzare il contenuto della pagina, in genere, questo richiede solo l'HTML statico da scansionare, non qualsiasi CSS o JS collegato. Questo aiuta a ridurre il numero di risorse di cui Google ha bisogno, poiché ci sono centinaia di trilioni di pagine web!

Il rendering di JavaScript su questa scala può essere costoso a causa della quantità di potenza di calcolo necessaria. Questo è il motivo esatto per cui Google lascerà il rendering di JavaScript fino a quando non verrà elaborato dai servizi di rendering Web di Google.

Infine, dopo che almeno alcuni dei JS sono stati renderizzati, la pagina può essere indicizzata.

Processo di scansione di Googlebot

JavaScript può influenzare la scansione dei link, all'interno delle loro linee guida, Google consiglia di collegare le pagine utilizzando anchor link HTML, con anchor text descrittivo. Nonostante ciò, gli studi hanno suggerito che Googlebot è in grado di eseguire la scansione dei collegamenti JavaScript. Tuttavia, è decisamente consigliabile attenersi ai collegamenti HTML.

Molti SEO tecnici ritengono che sia una buona pratica utilizzare JavaScript con parsimonia e non inserire contenuti scritti, immagini o collegamenti utilizzando JS poiché esiste la possibilità che non venga scansionato, o almeno, non così spesso, perché se una pagina è già all'interno È probabile che l'indice di Google renderà JavaScript molto meno spesso di una pagina nuova di zecca.

Come controllare i tempi di caricamento di JS sul tuo sito

Per verificare l'impatto di JavaScript sui tempi di caricamento, puoi attivare PageSpeed ​​Insights per una visualizzazione di primo livello.

Tuttavia, per identificare le specifiche e quali elementi hanno un impatto diretto sui tempi di caricamento, è necessario utilizzare un grafico a cascata, come il rapporto di rete su Google Dev Tools.

Rapporto sulla rete degli strumenti di sviluppo di Google

Puoi filtrare il rapporto per mostrare solo JavaScript facendo clic sul pulsante del filtro "JS", il grafico risultante mostra una chiara indicazione di quali file stanno impiegando più tempo per essere caricati sul tuo sito web.

Da qui, sai quali elementi devono essere esaminati e, a seconda dello scopo dello script, sia esso di prima/terza parte o above the fold, puoi intraprendere l'azione giusta per ottimizzare il JS e accelerarne le prestazioni.

I diversi metodi per migliorare i tempi di caricamento di JavaScript

Se hai mai gestito un sito Web tramite PageSpeed ​​Insights di Google, è probabile che tu abbia visto almeno una raccomandazione relativa a JavaScript.

A seconda di quanto il tuo sito web si basa su JavaScript, puoi verificarlo disabilitandolo nel tuo browser e vedendo come è diverso il tuo sito web. Se noti che molto JavaScript, come contenuto e immagini, viene servito in modo dinamico e non è più visibile quando JS è disabilitato, dovresti considerare di servirlo utilizzando HTML e CSS.

Ci sono diverse considerazioni da tenere in considerazione poiché i motori di ricerca non eseguono sempre il rendering di JavaScript durante la scansione di siti Web, quindi è probabile che molti dei tuoi contenuti potrebbero non essere scansionati con la stessa frequenza e quindi vedrai un'indicizzazione più lenta dei tuoi contenuti.

Detto questo, ogni sito Web deve utilizzare almeno alcuni elementi di JS e ci sono diversi modi per accelerare i tempi di caricamento.

[Case Study] Ottimizza i link per migliorare le pagine con il ROI maggiore

In un periodo di due anni, RegionsJob ha affrontato la sfida di migliorare il proprio ROI perfezionando la struttura dei collegamenti interni del proprio sito Web al fine di creare un'architettura efficiente. Questa strategia si è concentrata su azioni SEO a supporto degli obiettivi del sito web. Basandosi sui KPI per la redditività della pagina, RegionsJob ha implementato modifiche che creerebbero un sito Web con un migliore tasso di conversione degli utenti.

Leggi il caso di studio

Rinvia JavaScript

Il valore di differimento può essere aggiunto agli script JS in modo che venga eseguito dopo che il documento è stato analizzato, tuttavia, funziona solo con script esterni, quando l'attributo src è indicato nel tag <script>.

Questo dichiara ai browser web che lo script non creerà contenuto, quindi può analizzare il resto della pagina. Ciò significa che quando si utilizza l'attributo defer, il file JS non causa il blocco del rendering al resto della pagina.

Se viene utilizzato defer JavaScript, indica al browser di non attendere il caricamento dello script. Ciò significa che gli script esterni, il cui caricamento potrebbe richiedere del tempo, verranno elaborati solo dopo aver caricato l'intero documento in anticipo. Ciò consente di continuare l'elaborazione dell'HTML senza dover attendere JS, aumentando così le prestazioni della pagina.

L'attributo defer può essere utilizzato solo su script esterni e non può essere applicato al codice inline, questo perché l'attributo defer è simile a un processo asincrono, quindi i browser Web possono passare a un'altra attività anche quando la prima non è stata completata.

Riduci JavaScript

La minimizzazione del codice JS è il processo di rimozione dei caratteri non necessari dal codice, senza influire sulla sua funzione. Ciò comporta la rimozione di commenti, punti e virgola e spazi bianchi, nonché l'utilizzo di nomi più brevi per funzioni e variabili.

La riduzione al minimo di JavaScript comporta una dimensione del file più compatta, aumentando la velocità con cui può essere caricato.

Tuttavia, la minimizzazione di qualsiasi codice, incluso JavaScript, può causare la rottura di script complicati. Ciò è dovuto a variabili comuni o a livello di sito che possono causare bug difficili da risolvere. Durante il test della minimizzazione di JS, è fondamentale eseguire un test completo su un ambiente di staging per verificare e risolvere eventuali problemi che si verificano.

Rimuovi JavaScript inutilizzato

Due tipi principali di JavaScript non utilizzati possono causare il blocco della visualizzazione sul tuo sito web; JS non critico e JS morto.

JavaScript non critico si riferisce a elementi che non sono necessari per il contenuto above the fold ma vengono utilizzati altrove nella pagina, ad esempio una mappa incorporata nella parte inferiore del contenuto di una pagina.

Dead JavaScript si riferisce al codice che non viene più utilizzato nella pagina. Questi potrebbero essere elementi di una versione precedente del sito web.

Puoi identificare dove viene caricato JavaScript non utilizzato sul tuo sito Web utilizzando un grafico a cascata, come la scheda di copertura sugli strumenti di sviluppo. Ciò ti consentirà di notare quali file stanno causando il blocco della visualizzazione, se non sono necessari e possono essere rimossi dal tuo sito web.

Ritarda l'esecuzione di JavaScript

Uno dei modi più semplici ed efficaci per migliorare i tempi di caricamento è utilizzare la funzione di ritardo JavaScript.

Utilizzando questa funzione, puoi impedire il caricamento di JavaScript fino a quando l'utente non interagisce con la tua pagina, potrebbe essere uno scorrimento o un clic. Una volta che l'utente interagisce, tutto il JS viene caricato in linea.

Ritardare l'esecuzione di JS è un ottimo modo per migliorare i Core Web Vital, come LCP, FCP e TBT. Tuttavia, dovrebbe essere utilizzato solo se non si verifica alcun cambiamento nel layout della tua pagina quando JavaScript viene caricato durante l'interazione, poiché ciò potrebbe causare uno spostamento del layout e una scarsa esperienza utente.

Tenere traccia di JavaScript

Il modo migliore per ridurre il tempo di caricamento di JavaScript è utilizzarne il meno possibile!

Alcuni elementi di terze parti, come il software di tracciamento visivo, possono avere un aumento significativo dei tempi di caricamento e, se tali dati non sono più necessari, rimuovere il codice di tracciamento!

Quando tu, o gli sviluppatori, apporti una modifica significativa al design del sito Web (come una mappa interattiva), ti farà risparmiare innumerevoli ore per considerare in anticipo i tempi di caricamento e rendere l'elemento caricato il più velocemente possibile prima di implementarlo sul sito Web.

Per tenere d'occhio quanto Googlebot sta eseguendo la scansione di JavaScript sul tuo sito web, puoi accedere al rapporto sulle statistiche di scansione in Google Search Console, dove mostrerà quante richieste di scansione, la dimensione totale del download e il tempo medio di risposta.

Questo rapporto è estremamente utile, soprattutto se hai ottimizzato JS per vedere l'impatto effettivo che sta avendo su Googlebot.

Richieste di scansione JS

Da asporto chiave

• Se non hai bisogno di un determinato file JS sul tuo sito, rimuovilo!
• Se puoi, rimanda il più possibile JS di terze parti.
• Riduci al minimo e ritarda l'esecuzione di JS di prima parte senza interrompere la funzionalità.
• Prova prima tutto su un sito di staging!

Comprendendo l'impatto che JavaScript ha sui tempi di caricamento, puoi affrontarlo (si spera) senza interrompere il sito web. È fondamentale ricordare che l'esperienza dell'utente viene prima di tutto e se stai danneggiando il tasso di conversione del sito Web rimuovendo un determinato file JS, solo per aumentare i tempi di caricamento di 0,2 secondi, è necessario valutare l'impatto più ampio che ha.

Ma esci, usa un sito di staging e guarda cosa puoi fare per caricare più velocemente quei fastidiosi file JS!