Uno dei problemi spesso più difficili ma anche più remunerativi in termini di risultati di miglioramento di posizionamento SEO è lo score dei Core Web Vitals e come migliorare per esempio i Pagespeed Insights.
Vediamo come fare:
è opportuno lavorare sul codice Javascript e utilizzare le opzioni async e defer per accelerare o ritardare l’esecuzione degli script.
Alcuni degli snippet javascript saranno essenziali per la costruzione della pagina quindi andranno gestiti con i menzionati async e defer, però ci sono tanti altri script che potrebbero essere ritardati ancora di più, pensiamo a tutti gli script di terze parti di recaptcha o chatbot o tante altre cose che non è necessario che siano pronte mentre la pagina si carica.
Per questi script possiamo pensare a delle tecniche di ritardo di esecuzione intrinseche, del tipo:
<script>
setTimeout(function(){
loadJs("script-da-ritardare.js");
},5000);
</script>Questo codice rallenta l’esecuzione di script-da-ritardare.js per 5000 millisecondi, tempo più che sufficiente per gestire il resto degli javascript con async e defer.
Oppure potremmo avere uno script che viene lanciato quando tutto il resto della pagina viene caricato:
<script>
window.onload = function() {
loadJs("script-da-ritardare.js");
}
</script>Questo script verrà lanciato quando il resto della pagina è caricato.
Oppure, legare l’esecuzione dello script, se si usa jQuery, alla fase DOMready di jQuery.
<script>
define(['jquery','domReady!'], function($) {
// YCodice da ritardare
}(jQuery)
);
</script>Se si usa Google Tag Manager, un metodo per esempio per ritardare l’esecuzione di script di marketing come il pixel di facebook , può essere legare il lancio di questi tag all’evento Window Loaded.
Parliamo poi delle modalità async e defer di lancio del codice javascript; anche queste possono essere usate a vantaggio della SEO per migliorare e perfezionare i tempi di caricamento delle pagine, andando ad influenzare i parametri Core Web Vitals.
Vediamo come questi parametri influenzano la timeline di caricamento della pagina:
Se non utilizziamo async o defer, e lo javascript è nella <HEAD>:
Il parsing dell’HTML è sospeso fino a quando lo script non viene recuperato ed eseguito. Una volta eseguita questa operazione, il parsing riprende. Questo può portare a problemi di FCP (First Contentful Paint)
Se non utilizziamo async o defer, e il codice javascript è nel <BODY>
Il parsing HTML viene eseguito senza pause e, al termine, lo script viene recuperato ed eseguito. Il parsing viene eseguito prima che lo script venga scaricato, quindi la pagina appare all’utente molto prima della precedente. Ma se il codice javascript influenza il layout della pagina, questo può portare a problemi SEO di CLS (content layout shift)
Con async nella <HEAD>, il codice javascript:
lo script javascript viene caricato in modo asincrono, e quando è finito il caricamento il parsing HTML verrà messo in pausa per eseguire lo script, quindi riprenderà. Ancora qui a seconda di quanto lo javascript influenza il layout della pagina, può essere utile oppure dannoso per la SEO, da valutare caso per caso.
Con defer nella <HEAD>, il codice javascript:
Il parsing termina come quando mettiamo lo script alla fine del tag body, ma l’esecuzione complessiva dello script dura molto meno perché lo script è stato scaricato in parallelo con il parsing HTML.
Con la SEO e i Core Web Vitals in mente, va deciso l’ordine dei file javascript e la loro esecuzione. Per ognuno di essi bisogna valutare il loro impatto nei tempi di caricamento e di esecuzione, ma anche della loro interazione con il layout.
Se non interferiscono con il layout, la cosa migliore è avere il javascript nella <HEAD> con l’attributo defer, così il tag sarà eseguito alla fine.
Così abbiamo diversi modi di interagire con lo javascript per la SEO : utilizzare metodi di delay dell’esecuzione, sia in javascript puro che via GTM, oppure tramite gli attributi defer e async. Non c’e’ una modalita migliore rispetto alle altre, tutte possono essere usate contemporaneamente per arrivare ad una velocità di caricamento incrementata e senza problemi di CLS.
Kudos a Tanish Rajput per il suo articolo Loading Javascript Asynchronously (Defer vs Async)