G24 — Chapitre 7 - SEO Technique

Critère SEO G24 : Defer/Async JS — guide + exemple

PARTIE 1 - Fondamentaux Chapitre 7 - SEO Technique Mot-clé : defer/async js

Ce critère est discret… jusqu’au moment où il bloque la performance SEO.

Le critère **G24 — Defer/Async JS** fait partie de notre checklist SEO (335 critères). Ici, tu as une méthode **pratique** pour le vérifier et le corriger — avec un exemple concret.

Ce que couvre exactement ce critère

Le critère SEO G24 porte sur l'utilisation appropriée des attributs defer et async pour le chargement des scripts JavaScript sur une page web. Il s'inscrit dans le Chapitre 7 - SEO Technique, Partie 1 - Fondamentaux, et vise à optimiser le rendu en différant ou en asynchrone l'exécution des scripts non-critiques, notamment pour améliorer la performance et l'expérience utilisateur. Cette optimisation on-page est essentielle dans une checklist technique d'audit SEO pour s'assurer que le JavaScript ne bloque pas le chargement initial du contenu visible.

Pourquoi c'est important (SEO + UX)

L'implémentation correcte de defer/async JS est cruciale tant pour le référencement naturel que pour l'expérience utilisateur. En retardant l'exécution des scripts lourds ou non-critiques (defer pour JS non-critique) et en chargeant en parallèle les scripts comme les analytics (async pour analytics), on réduit le temps de blocage du thread principal, améliorant ainsi le Largest Contentful Paint (LCP) et le First Input Delay (FID). Cela favorise un meilleur classement SEO et une navigation fluide, deux indicateurs clés pour Google et les visiteurs.

Comment vérifier (pas à pas)

  1. Utilisez un outil d'audit SEO (ex : Lighthouse, Screaming Frog). 2) Analysez le chargement des scripts JS dans l'inspecteur réseau du navigateur. 3) Identifiez les scripts bloquants qui ne possèdent pas les attributs defer ou async. 4) Vérifiez que les scripts essentiels au rendu initial ne sont pas déférés, tandis que les scripts secondaires utilisent defer ou async. 5) Consultez la checklist technique du chapitre 7 - SEO technique pour la conformité.

Comment corriger proprement

Pour corriger, modifiez les balises <script> dans votre code HTML : - Ajoutez l'attribut defer aux scripts JS non-critiques pour qu'ils s'exécutent après le parsing du HTML. - Utilisez async pour les scripts comme les outils analytics qui peuvent s'exécuter indépendamment. - Évitez d'utiliser defer ou async sur les scripts nécessaires au rendu initial. Cette approche garantit une optimisation on-page efficace, en améliorant la vitesse sans compromettre la fonctionnalité.

Exemple concret (illustratif)

```html
<script src="critical.js"></script>
<script src="non-critical.js" defer></script>
<script src="analytics.js" async></script>
```
Ici, critical.js est chargé de manière synchrone car il est essentiel au rendu initial. non-critical.js utilise defer pour ne pas bloquer le parsing, tandis que analytics.js est chargé en async, optimisant ainsi la performance et respectant le critère G24.

Checklist à cocher

  • [ ] Tous les scripts non-critiques utilisent l'attribut defer
  • [ ] Les scripts analytics utilisent async
  • [ ] Aucun script critique n'est différé ou asynchrone
  • [ ] Audit SEO confirme absence de blocage JS au rendu
  • [ ] Vérification dans le réseau navigateur valide le comportement
  • [ ] Chapitre 7 - SEO technique validé pour ce critère G24
FAQ

Questions fréquentes — G24

Quelle est l’erreur la plus fréquente sur “Defer/Async JS” ?

Corriger une page isolée sans corriger le template/import : l’erreur revient à la prochaine génération.

Quel outil est le plus rapide pour contrôler à l’échelle ?

Pour ce type de critère, un crawl (ex. Screaming Frog) + une vérification ciblée dans Chrome DevTools Network est généralement le combo le plus rapide.

Comment éviter que ça se reproduise sur 10K pages générées ?

Figer une règle d’auto‑génération (title/structure/schema/URLs) + ajouter un contrôle automatique (crawl ou test) avant import en production.

Prêt à passer de la théorie à l'action ?

Validez ce critère avec un audit, puis approfondissez la méthode dans l'Academy.

Auditer avec l'outil → Apprendre dans l'Academy →