Connessione non riuscita. Per favore riprova.

Vai al contenuto
SEO Tools
Aiuto e documentazione
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

  1. 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.
  2. 2Per script indipendenti (analytics, chat) usa async — si eseguono subito dopo il download, indipendentemente dall'ordine.
  3. 3Mantieni minimi gli script critici; il resto caricalo alla fine del <body> o con defer.
  4. 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