Introduzione
Se sei uno sviluppatore frontend, conoscere la differenza tra async e defer nei tag <script> HTML è fondamentale. Usare correttamente async defer script HTML può migliorare notevolmente la velocità di caricamento e le performance del tuo sito. In un’epoca in cui rapidità e fluidità sono parametri fondamentali sia per l’ottimizzazione SEO sia per la soddisfazione dei visitatori, è cruciale sapere esattamente come funziona il caricamento degli script in HTML.
In questo articolo approfondiremo:
- Il caricamento degli script di base in HTML
- La differenza tra
asyncedefer, con esempi pratici - Quando e perché utilizzare un attributo piuttosto che l’altro
- Le implicazioni su performance e compatibilità cross-browser
- Best practice e consigli utili per sviluppatori frontend che vogliono ottimizzare il proprio codice
Per un’introduzione più ampia alla struttura HTML e alle relative best practice SEO, puoi consultare il nostro articolo Struttura HTML Perfetta per il SEO.
Inoltre, se vuoi approfondire i concetti fondamentali dei tag e delle novità HTML5, trovi utile la Guida HTML5: Nuovi Tag e Funzionalità per un Web Moderno e Semantico.
Il caricamento degli script in HTML
Per inserire un file JavaScript in una pagina HTML, utilizziamo il tag <script>. Di base, la sintassi più comune è la seguente:
<script src="script.js"></script>
Quando un browser trova un tag <script> senza attributi di gestione del caricamento (come async o defer), interrompe il parsing dell’HTML per scaricare ed eseguire lo script, bloccando momentaneamente il caricamento degli altri elementi della pagina. Questo comportamento è definito blocking perché l’esecuzione del codice JavaScript viene considerata prioritaria rispetto alla continuazione del rendering.
Async defer script HTML: qual è la differenza?
La principale differenza tra l’attributo async e defer risiede nell’ordine e nelle tempistiche di caricamento ed esecuzione degli script:
async- Lo script viene scaricato in parallelo rispetto al parsing dell’HTML.
- L’esecuzione avviene non appena lo script è disponibile, potenzialmente in un momento qualsiasi, interrompendo la fase di parsing per eseguire il codice JavaScript.
- È ideale per gli script che non hanno bisogno di interagire con l’albero DOM o con altri script sequenziali.
defer- Lo script viene scaricato in parallelo al parsing dell’HTML, in modo simile ad
async. - L’esecuzione, però, avviene dopo che il browser ha terminato di analizzare l’intera pagina, garantendo che il codice JS venga eseguito solo una volta caricato tutto l’HTML.
- È ideale per script che richiedono un DOM già carico e che devono seguire un ordine preciso di esecuzione.
- Lo script viene scaricato in parallelo al parsing dell’HTML, in modo simile ad
Per maggiori informazioni tecniche, puoi consultare la documentazione ufficiale su MDN Web Docs e la guida su Google Developers.
Esempi di utilizzo
Esempio 1: attributo async
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Async Example</title>
</head>
<body>
<h1>Async Script Example</h1>
<script src="script-async.js" async></script>
</body>
</html>
In questo caso, lo script script-async.js verrà scaricato in background, ma l’esecuzione inizierà appena lo script sarà disponibile, potenzialmente interrompendo la fase di parsing dell’HTML in un punto non deterministico.
Esempio 2: attributo defer
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Defer Example</title>
<script src="script-defer.js" defer></script>
</head>
<body>
<h1>Defer Script Example</h1>
</body>
</html>
Qui, lo script script-defer.js viene scaricato mentre il browser continua a leggere l’HTML, ma la sua esecuzione avverrà dopo che tutto il DOM sarà stato letto e interpretato. Questo garantisce che, se il tuo script richiede la presenza di elementi HTML o l’interazione con il DOM, non si verificheranno errori di riferimento a elementi non ancora presenti.
Quando e perché usare uno o l’altro
La scelta tra async e defer dipende da ciò che il tuo script deve fare:
asyncè preferibile quando:- Lo script è indipendente da altri script e può essere eseguito appena è pronto.
- Non ha bisogno di manipolare elementi del DOM o, se lo fa, lo fa in modo asincrono senza dipendere dalla sequenza di caricamento.
- Vuoi migliorare la velocità di caricamento percepita per funzioni non critiche (ad es. analisi di tracking esterne, script di advertising).
deferè preferibile quando:- Lo script deve interagire con il DOM appena caricato e necessita di un documento completamente parsato.
- Hai più script da caricare in ordine preciso. L’uso di
defergarantisce che l’ordine in cui compaiono i tag<script>nell’HTML sia lo stesso di esecuzione. - Vuoi assicurarti che la funzionalità JavaScript sia pronta solo dopo che la struttura HTML è totalmente disponibile.
Vuoi capire meglio come JavaScript gestisce la concorrenza e l’asincronia? Dai un’occhiata a Event Loop in JavaScript: come funziona davvero? e a Perché JavaScript è asincrono? per un’analisi più dettagliata su come i motori JavaScript processano i task e gestiscono l’ordine di esecuzione.
Differenze di esecuzione nel caricamento (blocking vs non-blocking)
Quando non utilizzi né async né defer, il caricamento dello script è definito blocking:
- Il browser interrompe il parsing dell’HTML finché lo script non viene scaricato ed eseguito.
- Se il file JavaScript è di grandi dimensioni o la connessione è lenta, questo può causare un ritardo percepibile nel caricamento della pagina.
Gli attributi async e defer, invece, rendono il caricamento non-blocking:
- Il browser continua a leggere e costruire il DOM.
- Lo script viene scaricato in background.
- Nel caso di
async, l’esecuzione può interrompere il parsing dell’HTML, ma almeno il download non è più bloccante. - Nel caso di
defer, l’esecuzione avviene solo alla fine del parsing, eliminando completamente il blocco di rendering.
Compatibilità cross-browser
Gli attributi async e defer sono supportati dalla stragrande maggioranza dei browser moderni (Chrome, Firefox, Safari, Edge), anche in versioni non recentissime. Tuttavia, su vecchi browser (in particolare Internet Explorer nelle versioni 9 e precedenti), async potrebbe non essere pienamente supportato. In contesti in cui è necessario supportare ambienti legacy, è utile testare attentamente il comportamento degli script e, se serve, adottare soluzioni di fallback.
Performance e SEO
Dalla prospettiva delle Web Performance, il caricamento asincrono degli script riduce il tempo di rendering della pagina e migliora i Core Web Vitals, parametri considerati importanti anche a livello SEO. Un sito web più veloce:
- Riduce la frequenza di rimbalzo (bounce rate).
- Aumenta il tempo di permanenza dell’utente.
- Migliora la percezione di affidabilità da parte del visitatore.
Per un ulteriore approfondimento sul tema delle performance e su come ottimizzare aspetti cruciali del frontend, consulta la nostra Web Performance: introduzione ai Core Web Vitals 2025.
Best practice e consigli SEO/performance
- Carica gli script in fondo al
body, a meno che tu non abbia la necessità di iniziare il caricamento in<head>conasyncodefer. Tradizionalmente, posizionare<script>prima della chiusura di</body>fa sì che l’HTML sia già caricato prima che lo script venga scaricato ed eseguito. - Minimizza e comprimi i file JS. Usa strumenti di build come Webpack, Vite o Rollup per generare versioni minificate dei tuoi script.
- Unisci i file JS in un singolo bundle quando possibile. Riduci il numero di richieste HTTP.
- Usa
asyncper script non critici, come ad esempio tool di analytics o script di retargeting. In questo modo, eviti che l’utente debba aspettare il caricamento di risorse non essenziali. - Usa
deferper script critici, soprattutto quelli che manipolano il DOM o che devono garantire un’esecuzione sequenziale (ad esempio, se un file JS dipende da un altro). - Fai test reali. Utilizza strumenti come Google Lighthouse o Chrome DevTools per verificare l’effettivo impatto sull’esperienza utente.
Se vuoi scoprire di più sulla manipolazione del DOM, dai un’occhiata a Cos’è il DOM e come manipolarlo in JavaScript, dove troverai esempi pratici e spiegazioni dettagliate.
Conclusioni
Scegliere tra async e defer potrebbe sembrare un aspetto secondario, ma in realtà l’ottimizzazione del caricamento degli script gioca un ruolo chiave nella velocità di un sito e nella sua percezione di qualità. In un contesto SEO sempre più attento ai tempi di caricamento e all’esperienza utente, comprendere queste differenze e metterle in pratica fa la differenza tra un sito “nella media” e uno che si distingue per performance e affidabilità.
