Async ou defer : quelle stratégie JavaScript maximise réellement votre crawl budget ?

Pourquoi Google insiste sur ces deux attributs spécifiques ?

Par défaut, un script JavaScript bloque le parsing HTML. Le navigateur arrête tout, télécharge le fichier, l'exécute, puis reprend. Ce comportement dégrade mécaniquement le First Contentful Paint et le Largest Contentful Paint, deux métriques directement observées par Google.

Les attributs async et defer cassent ce blocage. Async permet au navigateur de continuer le parsing pendant le téléchargement, puis interrompt brièvement pour exécuter. Defer reporte l'exécution jusqu'à ce que le DOM soit entièrement construit. Ces deux mécanismes réduisent le temps où Googlebot ou l'utilisateur voient une page blanche ou incomplète.

Quelle différence concrète entre async et defer pour le rendu ?

Async ne garantit aucun ordre d'exécution. Si trois scripts portent l'attribut async, ils s'exécutent dès qu'ils sont téléchargés, dans un ordre imprévisible. Pratique pour des scripts isolés comme Google Analytics ou un pixel de tracking qui n'ont pas de dépendances.

Defer, lui, respecte l'ordre d'apparition dans le HTML. Les scripts defer s'exécutent séquentiellement après le DOMContentLoaded. Indispensable si ton script B dépend de ton script A, typiquement pour des bibliothèques comme jQuery suivies d'un plugin.

Est-ce que Googlebot interprète vraiment ces attributs différemment ?

Googlebot utilise une version récente de Chrome pour exécuter JavaScript. Il respecte donc nativement async et defer comme n'importe quel navigateur moderne. Un script en defer ne bloquera pas artificiellement le rendu côté bot, ce qui accélère la découverte du contenu principal.

Le problème surgit quand le contenu critique dépend d'un script async qui s'exécute tard ou de manière aléatoire. Googlebot pourrait alors extraire un DOM incomplet lors de sa première passe, surtout si le crawl budget est serré et qu'il ne laisse pas le temps à tous les scripts de s'exécuter. Le timing devient crucial.

• Async : télécharge en parallèle, exécute dès que disponible, bloque brièvement, pas d'ordre garanti.
• Defer : télécharge en parallèle, exécute après parsing complet, ordre préservé, idéal pour scripts dépendants.
• Ni l'un ni l'autre : blocage total du parsing jusqu'à exécution complète, à éviter absolument pour les scripts non critiques.
• Google mesure directement le FCP et LCP : tout script bloquant dégrade ces métriques et peut impacter le classement, notamment sur mobile.
• Le choix entre async et defer dépend de la nature du script et de ses dépendances, pas d'une règle universelle.

Cette recommandation est-elle vraiment appliquée sur le terrain ?

Dans la pratique, beaucoup de CMS et de thèmes WordPress continuent de charger jQuery et autres bibliothèques sans attribut, en fin de body. C'est mieux que dans le head, mais ça reste un blocage. Les plugins tiers injectent souvent du JavaScript inline sans contrôle, annulant tout effort d'optimisation.

Les sites qui appliquent systématiquement defer sur leurs scripts non critiques constatent des gains mesurables sur PageSpeed Insights et Web Vitals. Mais la mise en œuvre demande un audit précis des dépendances : un defer mal placé peut casser des fonctionnalités si un script attend un DOM déjà manipulé par un autre.

Quelles nuances faut-il apporter à la déclaration de Google ?

Google ne précise pas quel attribut privilégier dans quel cas. Async semble séduisant pour sa rapidité, mais génère des bugs imprévisibles si mal utilisé. Defer paraît plus sûr, mais peut retarder l'exécution de scripts légitimement prioritaires comme un système de consentement cookies.

La vraie question : est-ce que le script modifie le contenu visible avant le premier paint ? Si oui, ni async ni defer ne conviennent, il faut le garder bloquant ou le rendre critique inline. [A vérifier] : Google n'a jamais publié de seuil explicite sur le pourcentage de scripts qu'on peut charger en async/defer sans dégrader l'indexabilité.

Dans quels cas cette règle ne s'applique-t-elle pas ?

Les scripts qui manipulent le DOM avant le premier rendu ne peuvent pas être en defer. Typiquement, un script qui insère du contenu éditorial généré côté client doit s'exécuter de manière synchrone pour que Googlebot le voie, sauf si tu passes par du server-side rendering ou du prerendering.

Les Single Page Applications React/Vue/Angular chargent souvent un bundle unique qui construit tout le DOM. Le mettre en defer est inutile, voire contre-productif : le HTML vide ne sert à rien sans le JS. Dans ce contexte, l'optimisation passe par du code splitting, du lazy loading et du prerendering, pas par defer.

Que faut-il faire concrètement pour appliquer cette recommandation ?

Commence par un audit de tous les scripts chargés sur tes pages clés. Chrome DevTools > Network > filtre JS te montre l'ordre et le timing. Identifie les scripts bloquants (sans async ni defer) qui ne sont pas critiques pour le rendu initial.

Ensuite, catégorise : les scripts tiers indépendants (analytics, pixels publicitaires) passent en async. Les bibliothèques avec dépendances (jQuery + plugins, librairies UI) passent en defer. Les scripts qui modifient le contenu éditorial restent bloquants ou inline, ou tu bascules vers du SSR.

Quelles erreurs éviter lors de la migration async/defer ?

L'erreur classique : tout passer en defer par défaut. Si un script B attend une variable globale définie par un script A en async, tu génères une erreur de référence. Teste systématiquement en local, puis en staging, avant de pousser en production.

Autre piège : les scripts qui écrivent directement dans le DOM via document.write() cassent complètement avec async ou defer. Ces scripts obsolètes doivent être réécrits ou chargés de manière synchrone, même si ça dégrade les performances. Googlebot te pénalisera moins pour un script bloquant que pour un contenu invisible.

Comment vérifier que l'optimisation fonctionne réellement ?

Lance PageSpeed Insights et observe la section « Éliminer les ressources qui bloquent le rendu ». Les scripts avec async ou defer ne devraient plus apparaître dans cette alerte. Le FCP et LCP doivent mécaniquement s'améliorer si l'implémentation est correcte.

Utilise aussi le test d'inspection d'URL dans Search Console. Compare le HTML rendu par Googlebot avec et sans tes modifications. Si le contenu principal est identique et que le temps de rendu diminue, tu as gagné. Si des éléments disparaissent, c'est que tu as mis en async/defer un script critique.

• Auditer tous les scripts externes et identifier ceux qui bloquent le rendu initial
• Appliquer async aux scripts indépendants sans dépendances (analytics, tracking)
• Appliquer defer aux scripts avec dépendances ordonnées (bibliothèques + plugins)
• Tester en environnement de staging avec Chrome DevTools et Lighthouse
• Vérifier le HTML rendu par Googlebot via Search Console après déploiement
• Monitorer FCP, LCP et TBT dans les rapports Core Web Vitals pendant 4 semaines