Async vs Defer: quando usare uno o l'altro?

Come forse già sai, uno dei motivi principali per cui un sito risulta lento, spesso, è il caricamento del JavaScript.

Di default, quando il browser incontra un tag <script>, che sia CSS o JS, si ferma: smette di leggere l’HTML, scarica il file, lo valida e lo esegue. Solo dopo riprende con il parsing dell'HTML.

Questo comportamento può rallentare pesantemente il caricamento e danneggiare i Core Web Vitals, con conseguenze dirette sulla SEO e sull’esperienza utente.

La buona notizia è che esistono due "paroline magiche", async e defer, che permettono di cambiare questo flusso e rendere le pagine molto più veloci, senza sacrificare funzionalità e performance SEO.

Come funziona e quando usare defer?

Quando aggiungi l’attributo defer al tuo script:

<script src="script.js" defer></script>

il browser avvia subito il download dello script, ma nel frattempo continua a elaborare l'HTML e costruire la pagina senza fermarsi. Una volta terminato tutto il parsing dell’HTML e prima dell’evento DOMContentLoaded, esegue gli script nell’ordine in cui li hai dichiarati.

In questo modo il caricamento della pagina non viene bloccato e gli script rispettano l'ordine di esecuzione prestabilito.

Defer è quindi la scelta migliore per la maggior parte degli script che arricchiscono l'interfaccia (caroselli, elementi interattivi, animazioni...) ma che non sono fondamentali per il rendering della pagina.

Come funziona e quando usare async?

Quando invece usi async:

<script src="script.js" async></script>

lo script viene scaricato in parallelo e appena è pronto il browser ferma l'HTML per eseguirlo. In questo modo gli script non seguono l'ordine di dichiarazione, ma quello di download.

Async è perciò la scelta migliore per tutti quegli script che sono indipendenti rispetto al rendering della pagina (per esempio i tag per il tracciamento degli analytics).

Quando NON usare né async né defer?

Ci sono casi in cui uno script deve essere caricato subito, per esempio:

• framework principale di una SPA;
• template che generano contenuti dinamici lato client;
• script che gestiscono il check-out in un eCommerce...

perché, se così non fosse, il sito non funzionerebbe. È quindi corretto che questi script rimangano bloccanti e che non vengano manipolati con defer o async.

In sintesi

• defer: scarica, esegui alla fine del parsing HTML, rispettando l'ordine > per script secondari;
• async: scarica, esegui quando hai finito di scaricare interrompendo il parsing HTML, ignorando l'ordine di dichiarazione > per script indipendenti.

Presta sempre massima attenzione quando decidi di fare ricorso a questi 2 attributi, perché un loro uso scorretto può rompere funzionalità importanti per il sito. Vedrai però che se imparerai a usarli correttamente, noterai dei miglioramenti lato performance, e la SEO e la UX ringrazieranno!