Defer vs Async JavaScript e come questo influisce sui Core Web Vitals
Scopri quando usare async per JavaScript e quando usare defer per ottenere i migliori risultati nei Core Web Vitals
Defer vs Async JavaScript e come questo influisce sui Core Web Vitals
In questo articolo mostrerò la differenza tra defer vs async JavaScript e perché questo influisce sui Core Web Vitals
Ogni volta che eseguo un audit dei Core Web Vitals di un cliente, spesso trovo che c'è poca distinzione in una pagina tra JavaScript bloccante del parser (sync), asincrono o differito. È un peccato perché script diversi hanno tempi ottimali diversi.
Table of Contents!
In Breve:
JavaScript 'normale' nel head della pagina viene eseguito prima che inizi il parsing dell'HTML, gli script async non bloccano l'inizio del parsing ma vengono eseguiti non appena scaricati. Gli script differiti vengono eseguiti dopo che la pagina è stata analizzata.
In generale, l'attributo async è una buona scelta per gli script che non
hanno bisogno di interagire con il DOM, come gli script che caricano immagini o
video. L'attributo defer è una buona scelta per gli script che devono
interagire con il DOM, come gli script che inizializzano widget o aggiungono
event listener. Ometti entrambi se il tuo script apporta modifiche significative al
viewport visibile.
1. JavaScript Sincrono (Sync):
Per impostazione predefinita, i JavaScript nell'head della pagina sono script sincroni. Quando il codice JavaScript viene eseguito in modo sincrono, blocca immediatamente il thread principale del browser fino a quando lo script non è completamente eseguito. Ciò significa che il browser deve attendere che il codice JavaScript finisca prima di procedere con altre attività, come il rendering del DOM. Di conseguenza, il JavaScript sincrono può avere un impatto significativo sulla velocità e reattività della pagina, specialmente per script più grandi e complessi. Quando una pagina contiene JavaScript sincrono, il browser non può caricare altre risorse o renderizzare la pagina fino a quando il JavaScript non viene eseguito, causando potenziali ritardi nel caricamento della pagina.
<!DOCTYPE html> <html> <head> <title>Sync JavaScript Example</title> <script src="script1.js"></script> <script src="script2.js"></script> </head> <body> <!-- Page content here --> </body> </html>
2. JavaScript Asincrono (Async):
JavaScript asincrono consente al browser di continuare a eseguire altre attività mentre lo script viene scaricato in background. Utilizzando l'attributo async nel tag <script>, gli sviluppatori indicano che lo script non dipende dal DOM e può essere eseguito in modo indipendente. Il browser non attende che lo script async finisca di caricarsi prima di continuare con il rendering della pagina. Di conseguenza, gli script async hanno il potenziale di migliorare la velocità della pagina, specialmente con connessioni più lente, poiché non bloccano il percorso critico di rendering.
<!DOCTYPE html> <html> <head> <title>Async JavaScript Example</title> <script src="script1.js" async></script> <script src="script2.js" async></script> </head> <body> <!-- Page content here --> </body> </html>
È importante notare che gli script async possono essere eseguiti in un ordine imprevedibile, poiché vengono eseguiti non appena disponibili, indipendentemente dal loro ordine nel documento HTML. Se gli script dipendono l'uno dall'altro, l'uso di async può causare errori di dipendenza.
3. JavaScript Differito:
JavaScript differito, indicato dall'attributo defer nel tag <script>, consente agli script di essere scaricati in background mentre il browser continua ad analizzare il documento HTML. Analogamente ad async, gli script differiti non bloccano il percorso critico di rendering, portando a un caricamento della pagina più veloce. Tuttavia, la differenza fondamentale è che gli script differiti mantengono il loro ordine di esecuzione, eseguendosi nell'ordine in cui appaiono nel documento HTML. Gli script differiti vengono eseguiti dopo che il DOM è stato completamente analizzato e subito prima che l'evento DOMContentLoaded venga attivato.
<!DOCTYPE html> <html> <head> <title>Defer JavaScript Example</title> <script src="script1.js" defer></script> <script src="script2.js" defer></script> </head> <body> <!-- Page content here --> </body> </html>
L'uso di defer è vantaggioso per gli script che dipendono dal DOM e devono essere eseguiti in un ordine specifico, poiché garantisce che gli elementi DOM necessari siano disponibili quando lo script viene eseguito. Questo può essere vantaggioso per gli script che eseguono manipolazioni del DOM o hanno dipendenze da altri script.
| Attributo | Quando lo script viene caricato | Quando lo script viene eseguito |
|---|---|---|
none |
In background | Prima della costruzione del DOM |
async |
In background | Immediatamente dopo il caricamento |
defer |
In background | Dopo che il resto della pagina è stato analizzato, nell'ordine in cui appare nell'HTML |
Come migliorano async e defer la velocità della pagina?
JavaScript sincrono (Sync) può rallentare significativamente il caricamento della pagina
e rendere il sito web meno reattivo, specialmente se gli script sono
grandi o richiedono molto tempo per essere eseguiti.
JavaScript asincrono (Async) può migliorare la velocità della pagina consentendo agli script indipendenti di caricarsi in parallelo con altre risorse. Tuttavia, bisogna fare attenzione a gestire correttamente le dipendenze per evitare comportamenti inattesi.
JavaScript differito può anche migliorare la velocità della pagina non bloccando
il percorso critico di rendering. Garantisce che il DOM sia pronto prima di
eseguire gli script che dipendono da esso, portando a un ordine di esecuzione
più prevedibile e controllato.
Buone Pratiche:
-
Usa async per gli script indipendenti che non dipendono dal
DOM e possono essere eseguiti in qualsiasi ordine.
- Usa defer per gli script che dipendono dal DOM e devono essere eseguiti in un ordine specifico, specialmente quando si eseguono manipolazioni del DOM.
- Evita di usare JavaScript sincrono quando possibile, poiché influisce negativamente sulla velocità della pagina e sulla user experience.
Utilizzando la tecnica di caricamento appropriata per i file JavaScript, puoi ottimizzare la velocità della pagina, migliorare la user experience e garantire interazioni più fluide sui tuoi siti web. Comprendere le differenze tra sync, async e defer e le loro implicazioni sul caricamento della pagina è essenziale per costruire applicazioni web performanti.
Si prega di notare che l'efficacia dell'uso degli attributi sync, async o defer
può variare in base al contesto specifico e al contenuto del
sito web. Test regolari e analisi delle prestazioni sono fondamentali per
perfezionare la strategia di caricamento della pagina e garantire risultati ottimali per
diversi scenari.
Un passo avanti: caricare gli script on demand
Async e defer possono velocizzare una pagina non bloccando il parser, ma
è importante notare che il 'differimento degli script' non risolverà tutti
i tuoi problemi. Ad esempio, l'elemento Largest Contentful Paint è
vulnerabile alla competizione di rete e CPU causata dagli script differiti e async.
L'Interaction to Next Paint è anch'essa influenzata dagli script
che vengono eseguiti presto durante il caricamento della pagina. Ecco perché, quando possibile,
dovresti caricare gli script on demand per avere più controllo sul loro
impatto sulle prestazioni della pagina. Curioso? Leggi come
carichiamo gli script on demand
The RUM tool I built for my own clients.
CoreDash is what I use to audit enterprise platforms. Under 1KB tracking script, EU hosted, no consent banner. AI with MCP support built in. The same tool, available to everyone.
Create Free Account
