Échec de la connexion. Veuillez réessayer.

Aller au contenu
SEO Tools
Aide et documentation
Vitesse Impact élevé Facile 5 à 15 minutes

Différer/asynchrone sur les scripts

Un <script> synchrone bloque le rendu — reportez-le.

Ce que c’est

Lorsque le navigateur rencontre un simple <script>, il arrête le rendu de la page, télécharge et exécute le script, puis continue ensuite. C'est ce qu'on appelle un script « bloquant le rendu ». Les attributs defer et async modifient ce comportement.

Pourquoi c’est important

Chaque script de blocage dans la tête retarde le moment où l'utilisateur voit le contenu (aggravation de LCP et First Paint). Avec plusieurs scripts, les retards s'additionnent. Sur les connexions mobiles et lentes, cela signifie des secondes de page blanche vide et un taux de rebond plus élevé.

Comment faire

  1. 1Marquez les scripts qui ne sont pas nécessaires pour le premier rendu avec l'attribut defer : ils sont téléchargés en arrière-plan et exécutés uniquement après la création de la page, dans l'ordre dans lequel ils apparaissent.
  2. 2Pour les scripts indépendants (analyses, chat), utilisez async : ils s'exécutent dès qu'ils sont téléchargés, quel que soit l'ordre.
  3. 3Gardez les scripts critiques au minimum ; charger le reste à la fin de <body> ou avec différé.
  4. 4Règle : defer = dépend du DOM ou de la commande ; async = autonome, rien n'en dépend.

Exemple

Incorrect
<head>
  <script src="/js/app.js"></script>   <!-- blocks rendering -->
</head>
Correct
<head>
  <script src="/js/app.js" defer></script>
  <script src="/js/analytics.js" async></script>
</head>

Conclusion

Le report/async est l'une des optimisations de vitesse les moins chères et les plus efficaces : il suffit souvent d'ajouter un seul mot à la balise. Pour la plupart des scripts, différer est le bon choix. Après le déploiement, vérifiez que rien ne fonctionne (en particulier les scripts dépendants de la commande) et mesurez l'amélioration du LCP.

Sujets liés