Come ottimizzare il caricamento dei file Javascript

Ormai qualsiasi layout per il web fa ampio ricorso a file javascript esterni per assicurare al sito funzioni o effetti particolari, tanto da rendere l’utilizzo di questa tecnologia di scripting praticamente irrinunciabile per lo sviluppo web contemporaneo.

In un contesto in cui viene posta estrema attenzione per l’ottimizzazione dei tempi di download e rendering delle pagine web curare il caricamento dei file javascript è divenuta quindi una prassi particolarmente utile per migliorare le performance generali di un sito.

La maggior parte dei tool di analitica per pagine web consiglia di rimandare – o di avviare in forma asincrona – il caricamento dei file javascript.

Questo perché ogni script javascript inserito su pagina implica l’interruzione del parsing della pagina HTMl, che riprende solo quando lo script esterno è stato scaricato ed eseguito.

Ecco che in presenza di numerosi file javascript esterni il momento noto come domContentLoaded sarà inevitabilmente ritardato, tendendo ad allungare (sia tecnicamente che materialmente) il rendering effettivo della pagina.

Il domContentLoaded è quel momento in cui il browser è finalmente pronto per iniziare la renderizzazione effettiva della nostra pagina web.

Per raggiungere questo status è necessario che sia stata parsata l’intera struttura HTML del documento e che siano stati letti, scaricati ed eseguiti tutti i file CSS e gli script Javascript richiamati dall’HTML.

Ma il problema è che appunto l’ampio ricorso ai file javascript può ritardare considerevolmente il raggiungimento dell’evento domContentLoaded, anche nei casi in cui effettivamente il caricamento e l’esecuzione di determinati file javascript esterni non sia effettivamente necessaria e indispensabile per il rendering della pagina stessa.

In questi casi, quindi, non ottimizzare il caricamento dei file javascript significa incidere negativamente sulle performance del sito, pregiudicandone spesso le prestazioni anche in ottica seo (nei casi peggiori).

E’ quindi opportuno sottrarre dalla routine che porta all’evento domContentLoaded tutti quei file javascript che possono essere caricati successivamente all’avvio del rendering, o che ancora meglio possano essere caricati in asincrono rispetto all’HTML, offrendo quindi il massimo della versatilità in termini di tempo di caricamento e raggiungimento della piena funzionalità degli script.

Rimandare (“to defer“) il caricamento degli script o assicurarne il caricamento in modalità asincrona è la chiave per ottimizzare l’utilizzo dei file javascript esterni su un layout web.

In sintesi:

– Il caricamento di un file javascript esterno alla pagina HTML interrompe il parsing della pagina stessa, per scaricare ed eseguire lo script prima di riprendere la lettura del documento. Questo comportamento – se applicato su diversi script – ritarda considerevolmente il verificarsi dell’evento domContentLoaded, che precede l’inizio del rendering vero e proprio.

– Il tag async permette di scaricare il file javascript esterno parallelamente alle operazioni di parsing, interrompendole solo al momento della effettiva esecuzione degli script.

– Il tag defer rimanda completamente il download e l’esecuzione dei file javascript esterni, operazioni che vengono avviate immediatamente dopo la fine del parsing dell’HTML e quindi senza ritardare l’avvio delle operazioni di rendering effettivo.

Quale tag conviene usare?

In linea di massima i criteri di scelta sono abbastanza semplici.

– Se lo script che si vuole caricare agisce in forma autonoma ed indipendente da qualsiasi altro file su pagina, allora sarà opportuno optare per il comando async.
<script src="script-javascript-di-esempio.js" async></script>

– Se invece lo script che si intende caricare è in qualche modo correlato con un altro script presente su pagina, o se il suo caricamento incide – anche per ragioni temporali e di sincronizzazione reciproca – con quello di altri script, allora sarà decisamente meglio ricorrere al comando defer. E’ questo il caso dei file javascript che dipendono da jQuery, tanto per fare un esempio abbastanza comune. Tutta la catena del jQuery, dal file principale a tutti i plugin supplementari, andranno probabilmente rimandati con il comando defer, che a differenza di async ne assicura l’esecuzione sequenziale desiderata in sede di coding originale.
<script src="script-javascript-di-esempio.js" defer></script>