G14 — Chapitre 7 - SEO Technique

Critère SEO G14 : Lazy loading images — guide + exemple

PARTIE 1 - Fondamentaux Chapitre 7 - SEO Technique Mot-clé : lazy loading images

Ce critère paraît “simple”, mais il crée beaucoup d’écarts en production.

Le critère **G14 — Lazy loading images** 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 G14 concerne l'implémentation du lazy loading images, une technique qui consiste à différer le chargement des images non visibles à l'écran jusqu'à ce que l'utilisateur fasse défiler la page. Ce critère, inclus dans le chapitre 7 - SEO technique, partie 1, fondamenteaux, vise à optimiser l'efficacité du chargement des pages en réduisant l'impact des images sur le temps de chargement initial. Il est essentiel de ne pas lazy-loader les éléments LCP (Largest Contentful Paint) pour garantir un rendu rapide des contenus principaux selon les Core Web Vitals.

Pourquoi c'est important (SEO + UX)

L'utilisation du lazy loading images améliore significativement la performance perçue et réelle du site, réduisant le temps de chargement initial et la consommation de bande passante. Pour le SEO, cela impacte positivement les Core Web Vitals, notamment le LCP, un facteur clé dans le classement Google. Du point de vue UX, cela assure une navigation fluide sans latence inutile liée au chargement d'images hors écran, augmentant ainsi le taux de rétention et l'engagement des utilisateurs.

Comment vérifier (pas à pas)

  1. Utilisez un outil d'audit SEO comme Lighthouse ou PageSpeed Insights pour analyser le chargement des images.
  2. Vérifiez que les images hors écran sont bien configurées avec l'attribut loading="lazy".
  3. Assurez-vous que les images LCP ne sont pas lazy-loaded.
  4. Inspectez le code source pour repérer les balises <img> et vérifier leur attribut loading.
  5. Analysez la checklist technique du chapitre 7 - SEO technique pour confirmer la conformité au critère G14.

Comment corriger proprement

Pour corriger ce critère, appliquez loading="lazy" uniquement aux images non critiques (hors viewport initial). Excluez explicitement les images LCP du lazy loading pour éviter d'impacter négativement le Core Web Vitals. Utilisez des bibliothèques JavaScript ou des attributs natifs selon la compatibilité du navigateur. Testez le rendu et le temps de chargement après modification via des outils comme GTmetrix ou Lighthouse pour valider l'efficacité de l'optimisation on-page.

Exemple concret (illustratif)

Dans une page produit, la photo principale affichée en haut doit être chargée immédiatement sans lazy loading, tandis que les images secondaires et les vignettes en bas de page peuvent utiliser loading="lazy". Par exemple :
```html
<img src="main-product.jpg" alt="Produit principal" loading="eager">
<img src="secondary1.jpg" alt="Image secondaire" loading="lazy">
<img src="secondary2.jpg" alt="Image secondaire" loading="lazy">
```
Cette approche garantit la rapidité du LCP et optimise le reste du contenu.

Checklist à cocher

  • [ ] Toutes les images hors écran utilisent loading="lazy"
  • [ ] Les éléments LCP ne sont pas lazy-loaded
  • [ ] Audit SEO passé avec succès via Lighthouse/PageSpeed
  • [ ] Optimisation on-page conforme au chapitre 7 - SEO technique
  • [ ] Core Web Vitals améliorés après implémentation
  • [ ] Code source vérifié pour attributs loading corrects
FAQ

Questions fréquentes — G14

Quelle est l’erreur la plus fréquente sur “Lazy loading images” ?

Appliquer un pattern automatique trop générique (même logique sur toutes les pages) sans ajouter un élément différenciant.

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 curl (headers) 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 →