Velocità Impatto alto Facile 5–15 min

Defer / async sugli script

Uno <script> sincrono blocca il rendering, posticipalo.

Cos'è

Quando il browser incontra un normale <script>, interrompe il rendering della pagina, scarica ed esegue lo script e solo dopo prosegue. Questo si chiama script "render-blocking" (bloccante). Gli attributi defer e async modificano questo comportamento.

Perché è importante

Ogni script bloccante nell'header ritarda il momento in cui l'utente vede il contenuto (peggiora LCP e First Paint). Con più script il ritardo si somma. Su mobile e con connessioni lente questo significa secondi di pagina bianca vuota, e una frequenza di abbandono più alta.

Come fare

1Gli script non necessari al primo rendering contrassegnali con l'attributo defer, si scaricano in background e si eseguono solo dopo la costruzione della pagina, nell'ordine in cui appaiono.
2Per script indipendenti (analytics, chat) usa async, si eseguono subito dopo il download, indipendentemente dall'ordine.
3Mantieni minimi gli script critici; il resto caricalo alla fine del <body> o con defer.
4Regola: defer = dipende dal DOM o dall'ordine; async = autonomo, non dipende da nulla.

Esempio

Sbagliato

<head>
  <script src="/js/app.js"></script>   <!-- blocca il rendering -->
</head>

Corretto

<head>
  <script src="/js/app.js" defer></script>
  <script src="/js/analytics.js" async></script>
</head>

Conclusione

Defer/async è una delle ottimizzazioni di velocità più economiche ed efficaci, spesso basta aggiungere una sola parola al tag. Per la maggior parte degli script la scelta giusta è defer. Dopo l'implementazione verifica che nulla abbia smesso di funzionare (soprattutto gli script che dipendono dall'ordine) e misura il miglioramento dell'LCP.

Argomenti correlati