Il problema di JavaScript bloccante
Quando il browser incontra un tag script senza async o defer durante il parsing dell'HTML, si ferma per scaricare, parsare ed eseguire lo script prima di continuare. Questo blocca rendering, FCP e LCP. JS sincroni nell'head sono il nemico numero uno della velocità.
L'attributo async
script async scarica lo script in parallelo al parsing HTML. Quando il download e completo, sospende il parsing per eseguire lo script immediatamente. Ordine di esecuzione: imprevedibile (chi scarica prima esegue prima). Ideale per: script indipendenti come analytics (Google Analytics, Facebook Pixel) che non dipendono da altri.
L'attributo defer
script defer scarica lo script in parallelo al parsing HTML, ma rinvia l'esecuzione DOPO il parsing completo, prima dell'evento DOMContentLoaded. Ordine di esecuzione: garantito (come dichiarazione nell'HTML). Ideale per: script che manipolano il DOM o dipendono da altri script.
Async vs Defer: quando usare cosa
Async per script standalone, no manipolazione DOM, no dipendenze: analytics, ads, A/B testing. Defer per script che interagiscono col DOM, hanno dipendenze tra loro, devono eseguire in ordine: framework, librerie UI, codice applicativo. Mai async + defer insieme: defer ignorato se async presente.
Modulepreload e type=module
script type="module" carica ES modules: defer di default, ordine garantito. modulepreload nel head pre-carica moduli senza eseguirli. Permette migliore parallelismo del download. Nomodule per fallback su browser legacy.
Esempio pratico WordPress
Plugin come Async JavaScript, Autoptimize, WP Rocket aggiungono async/defer automaticamente a tutti gli script. Configura esclusioni per script critici (jQuery se usato sincrono). Verifica con Lighthouse l'audit "Eliminate render-blocking resources" che diventi verde dopo l'intervento.
Hai bisogno di aiuto?
Se vuoi un sito veloce ottimizzato dal team di G Tech Group, scrivici tramite il modulo di contatto.