Lazy Chargement

TL;DR — Lazy chargement indique le navigateur à hold off downloading images et embeds jusqu’à vous êtes à propos de à scroll à les, donc lune page charge faster up front. Le facile, aucun-code façon est à ajouter loading="lazy" à an <img> or <iframe>. Le un règle à remember: ne pas lazy-charger le big image à le top de lune page — que rend lune page feel slower, pas faster.

Ce que lazy chargement is

Normally, quand a navigateur opens une page, il tries à download tout on il — chaque image, chaque embedded map or video — correct away. On a long page avec lots de images, c’est a lot de downloading pour stuff vous pourrait jamais scroll bas à voir.

Lazy chargement corrections que. Il defers chargement le off-screen images et embeds jusqu’à vous êtes à propos de à scroll les dans view. Lune page montre vous qu’est-ce que à le top quickly, et le rest charge as vous go. Moins données up front signifie a faster premier impression, plus savings on bandwidth et battery — qui matters la plupart on phones.

The facile façon: the loading attribute

Vous utilisé to besoin a JavaScript library to do ce. Pas anymore. Modern navigateurs have it construit in. Vous simplement ajouter un attribute:

<img src="photo.jpg" loading="lazy" alt="…">

c’est il. Il fonctionne on <img> et <iframe> (think embedded YouTube videos, Google Maps, social widgets) dans chaque major navigateur, avec aucun JavaScript.

The un mistake to éviter

«Don’t lazy-load the big image at the top of the page — the hero image, the thing people see first. Lazy loading tells the browser “this can wait,” so a lazy-loaded top image loads later than it should, and the page feels slower. Google’s own guidance is to skip lazy loading for anything that’s visible right away when the page opens. » (Traduction) (Résumé en français de la section douze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

La version courte: lazy-charger le stuff ci-dessous le fold, charger le stuff ci-dessus le fold normally.

Fait it hurt SEO?

Par itself, aucun. Google peut indexer lazy-chargé images et contenu simplement fine quand c’est fait le normal façon. Le trouble commence seulement quand une page hides contenu behind scrolling or clicking — parce que moteur de recherches ne pas scroll or click. Si votre images simplement utiliser loading="lazy", vous êtes fine. Vouloir le details on comment Google en réalité voit ce, et Comment vérifier il? Switch à le Avancé tab.

TL;DR — Lazy chargement defers off-screen images et iframes jusqu’à ils near le viewport, cutting initial page weight (aide LCP) et startup main-thread fonctionner (aide INP). Le native loading="lazy" attribut on <img>/<iframe> a replaced la plupart JS libraries; seulement lazy et eager sont meaningful valeurs (auto est deprecated). Le damaging mistakes: lazy-loading le LCP/ci-dessus-le-fold image (delays le very metric vous êtes chasing), et gating contenu behind scroll/click — qui Googlebot jamais triggers parce que il ne fait pas interact avec lune page. c’est pas a direct facteur de classement; le effect exécute via Core Web Vitals et crawlability. Vérifier dans Search Console’s Inspection d’URL Outil que image URLs land dans le src attribut de le rendu HTML.

Ce que lazy chargement en réalité fait

Le idea est simple: seulement charger resources quand vous besoin les, au lieu de chargement tout à une fois. On a media-heavy page, downloading chaque image et embed up front garde le navigateur busy fetching choses le visitor peut jamais scroll à — burning bandwidth, memory, et battery pour rien. Deferring le off-screen ones lets le ci-dessus-le-fold contenu paint sooner. Martin Splitt fait exactly ce point on Google’s Recherche Off le Record episode “Lazy loading demystified”: le goal est à éviter fonctionner que yields rien, parce que non-critical images lune page voudrait être fine sans simplement garder le navigateur occupied.

Ce connects à le Core Web Vitals la plupart personnes sont chasing. Fewer bytes competing pour le network up front signifie le Plus grand affichage de contenu element peut rendre sooner. Pour iframes — ads, social widgets, comment sections, maps — deferring les aussi cuts main-thread fonctionner during startup, qui est an Interaction jusqu’au prochain affichage win, pas simplement an LCP un. Google’s propre web.dev guidance frames lazy-chargé iframes as an INP improvement during page charger.

Native vs. JavaScript-driven lazy chargement

A quelques années ago, navigateurs gained a native loading attribut pour images et iframes, donc vous pouvez hand le entier job à le navigateur au lieu de wiring up a JavaScript API. Dans mon JavaScript SEO guide à Ahrefs Je faire le même observation: since Je premier wrote que piece, lazy chargement a mostly déplacé depuis étant JavaScript-driven à étant handled par navigateurs. Vous’ll encore exécuter dans JS-driven setups, et pour images ils sont généralement fine — le chose Je vérifier est si réel contenu (pas simplement images) est étant lazy chargé, parce que ceux setups sont le ones que ont caused contenu pas à être picked up correctement.

The native version:

<!-- Below-the-fold image: defer it -->
<img src="gallery-07.jpg" loading="lazy" width="800" height="600" alt="…">

<!-- Off-screen embed: defer it -->
<iframe src="https://www.youtube.com/embed/…" loading="lazy" title="…"></iframe>

Toujours définir explicit width/height (or an aspect-ratio) on lazy images donc le navigateur reserves le space avant le image charge — c’est le biggest layout-shift risque avec deferred images. Reserved dimensions ne sont pas an absolute CLS guarantee, though: si le surrounding layout or a responsive crop encore changements après le image charge, vous pouvez encore voir a shift, donc confirmer avec a réel layout-shift trace plutôt que assuming fixed dimensions alone settle il.

Lazy chargement et iframes besoin un plus distinction: loading="lazy" on an <iframe> seulement defers quand le embed’s récupérer et creation se produire. Il ne fait pas définir son title, focus behavior, sandbox, allow/permissions policy, referrerpolicy, consent handling, or dimensions pour vous — ceux encore besoin leur propre attention, et an embed peut garder doing fonctionner (scripts, tracking pixels, layout) une fois il becomes eligible à charger. Et ne pas assume “ci-dessous le fold” behaves le même everywhere: display: none contenu, offscreen carousel slides, transformed elements, et nested scroll containers peut intersect le viewport differently que a plain ci-dessous-le-fold element, donc tester le réel layout et navigation contrôle plutôt que assuming equivalence.

The loading attribute’s valeurs

Seulement two valeurs matter today:

• loading="lazy" — defer le resource jusqu’à c’est near le viewport.
• loading="eager" — charger il immédiatement, le par défaut behavior. Utiliser il à être explicit à propos de ci-dessus-le-fold images.

Vous peut voir loading="auto" dans older articles — c’est deprecated dans Chrome, donc ne pas reach pour il. il y a aucun besoin à; omitting le attribut déjà donne vous le par défaut (eager) behavior.

Comment near est “near”? loading="lazy" est a hint, pas an author-controlled guarantee — le spec laisse le réel near-viewport décision à le navigateur. Chromium tries à récupérer a lazy resource early suffisant que c’est ready par le temps vous scroll à il, et le trigger distance varies par navigateur, connection speed, et resource type; il n’est pas a fixed pixel valeur vous pouvez rely on or reproduce à travers navigateurs or versions. ne pas publish — or confiance — a spécifique “charge N pixels avant le viewport” number; treat le near-viewport window as implementation-defined et confirmer réel behavior avec a Network trace on le navigateur/connection vous care à propos de au lieu de assuming a constant.

Native lazy chargement aussi plays fine avec responsive images: il s’applique à ordinary src et srcset/sizes selection, donc vous ne pas lose responsive image behavior par ajout loading="lazy". Si vous à la place hide le réel URL seulement dans a data-* attribut pour a script à swap dans plus tard, chargement maintenant dépend on que script — tester le rendu HTML et ce que se produit si le script fails (plus on ce dans le Scripts et Troubleshooting tabs).

Le #1 mistake: lazy-loading le LCP / ci-dessus-le-fold image

Ce est le échec Je voir la plupart, et chaque source agrees on il. Si vous lazy-charger le hero image — or quelconque image probable à être le LCP element — vous avez told le navigateur à wait on le unique la plupart important pixel pour perceived charger speed. Le navigateur aussi ne peut pas lazy-charger an image jusqu’à il knows où le image va sit on lune page, donc lazy ci-dessus-le-fold images tend à charger plus slowly que eager ones. Que directement delays Plus grand affichage de contenu, le metric Google dit devrait resolve dans le premier 2,5 seconds de charger.

Splitt put le flip side plainly on le SOTR episode: si vous êtes pas en utilisant lazy chargement où vous devez, que va probably hurt some aspect de Core Web Vitals — la plupart probable LCP. Donc il cuts les deux façons. Le règle:

• Probable or observed LCP candidate → charger eagerly (omit loading="lazy", or définir eager). Considérer fetchpriority="high" on the LCP image.
• Ci-dessous the fold → loading="lazy".

Pas chaque image ci-dessus le fold est le LCP candidate — identifier le réel un (a Performances trace or PageSpeed Insights va nom il) et vérifier son requête timing plutôt que treating chaque premier-screen image le même. Et ces sont séparé hints, pas un paramètre: loading="eager" (or omitting loading) seulement signifie le navigateur ne va pas defer discovery de le resource — il ne fait pas itself raise récupérer priority. fetchpriority est a distinct, advisory hint on top de que. Stacking a <lien rel="preload"> with loading="lazy" on le même resource sends le navigateur conflicting intent, donc vérifier le réel network waterfall plutôt que assuming le combination fait ce que vous expect.

Le blanket anti-modèle est switching on lazy chargement pour chaque image site-wide — a courant CMS par défaut. As Splitt noted, si chaque image est lazy chargé, alors images que sont (or devrait être) immédiatement visible obtenir lazy chargé aussi, qui est exactly le cas vous vouloir à éviter.

Comment Googlebot renders lazy-chargé contenu

Ici’s le exploration reality que trips personnes up: Googlebot ne fait pas scroll, et il ne fait pas click. Il renders votre page avec a headless navigateur, mais il ne fait pas simulate a utilisateur interacting avec il. Google states ce directement — son recommended lazy-loading méthodes deliberately ne pas rely on utilisateur actions comme scrolling or clicking, parce que Recherche Google ne fait pas interact avec votre page.

c’est pourquoi le comment de votre implementation matters. Google’s doc listes three implementations il considers sûr: le navigateur’s built-dans lazy chargement pour images et iframes, le IntersectionObserver API (avec a polyfill), or a JavaScript library que charge données as il enters le viewport. Tout three clé off viewport intersection — pas a scroll or click event que Googlebot va jamais fire.

Le élevé-risque modèle est a custom or tiers JS lazy-charger library. Si le library misbehaves et le image URL jamais lands dans le src attribut, Google simplement ne va pas pick que image up — Splitt décrit exactly ce échec mode on le SOTR episode. il y a rien à indexer si l’URL n’est pas là. Ce est le même chose Je flag dans mon JavaScript SEO guide: image lazy chargement est généralement fine, mais lazy-chargé contenu est où indexation problèmes creep dans, et le corriger est à vérifier ce que Google en réalité renders.

Infinite scroll is a différent problem

ne pas conflate basic image/iframe lazy chargement avec infinite scroll or paginated chargement. Deferring images est un chose; chargement nouveau chunks de contenu as le utilisateur scrolls est un autre, et il nécessite son propre architecture. Google’s guidance: donner chaque chunk a persistent, unique URL, garder le contenu stable per URL (utiliser absolute page numbers comme ?page=12, pas relative valeurs comme ?date=yesterday), et mettre à jour le affiché URL avec le History API as chaque chunk becomes le principal visible contenu donc il peut être refreshed, shared, et lié. Skip que et le deeper contenu behind an endless scroll peut jamais être reliably exploré or indexé.

Comment tester it

«The verification path is the same in Google’s doc and in my own methodology: use Search Console’s URL Inspection Tool and look at the rendered HTML. If your image (or video) URLs appear in the src attribute on the <img>/<video> elements in that rendered HTML, your setup works. Google says this outright — check the rendered HTML to make sure your content is in it. If the URL is missing from src, that’s your problem, and it usually points back to a scroll/click trigger or a broken library. » (Traduction) (Résumé en français de la section quarante-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Pour a lazy-chargé produit grid, go au-delà ce presence vérifier. Exécuter le Infinite Scroll SEO testing matrix avec standard et tall viewports, fresh navigation et post-charger resizing, aucun-action et incremental-scroll exécute, unique produit-lien counts, et accessibility-tree inspection. Resizing an initialized page n’est pas equivalent à navigating à le final viewport size parce que observers et batch calculations peut être registered seulement during startup. Preuve à l’appui de cette affirmation Google Search does not scroll or click to trigger lazy-loaded content, so implementations should not depend on user interaction and should expose resource URLs in rendered HTML. Portée : Google Search guidance for JavaScript-driven lazy loading. Niveau de confiance : élevé · Vérifié : 2026-07-14 Google Search Central: Lazy-load content

Vous pouvez aussi lean on votre web-performance tooling: PageSpeed Insights flags off-screen images vous devez être deferring. Dans mon PageSpeed Insights guide à Ahrefs Je remarque que le “defer offscreen elements” audit est telling vous à lazy-charger images — a handy façon à connecter le diagnostic vous déjà exécuter à le corriger.

Ranking-signal honesty

Être clair à propos de ce que lazy chargement est et n’est pas. En utilisant il est pas a direct classement factor, et pas en utilisant il n’est pas a penalty. Le connection à rankings est indirect: il flows via Core Web Vitals (mainly LCP, parfois INP pour iframes) et via crawlability, si a mauvais implementation hides contenu. Splitt characterized le classement effect via Core Web Vitals as a tiny, minute factor dans la plupart cas. Donc optimize lazy chargement pour votre utilisateurs’ charger experience et pour clean indexation — pas parce que vous expect a classement bump depuis le attribut itself.

Où ce fits

Lazy chargement est un lever dans le broader web performances toolkit. Il pairs avec resource hints (preload/preconnect pour le resources vous faire vouloir early), font-loading stratégie, mise en cache, et a CDN — et c’est judged, ultimately, via Core Web Vitals. Obtenir le ci-dessus-le-fold/ci-dessous-le-fold split correct et c’est un de le cheapest wins disponible.

AI summary

A condensed prendre on the Avancé version:

• Lazy chargement defers off-screen images et iframes jusqu’à ils near le viewport — cutting initial page weight et startup fonctionner. Le native, aucun-JS façon est loading="lazy" on <img> et <iframe>; il a largely replaced JS libraries. c’est a navigateur hint, pas a guaranteed distance or timing — le trigger point varies par navigateur, connection, et resource type, donc ne pas rely on a fixed pixel number.
• Valeurs: seulement lazy et eager matter. auto est deprecated dans Chrome.
• Core Web Vitals lien: fewer up-front bytes aider LCP; deferring iframes cuts main-thread fonctionner à startup, helping INP. Définir width/height donc deferred images ne pas causer CLS — though reserved dimensions alone ne pas guarantee zero shift si le surrounding layout encore changements.
• #1 mistake: lazy-loading le probable/observed LCP image, pas simplement quelconque ci-dessus-le-fold image. Il delays Plus grand affichage de contenu, qui Google dit devrait resolve dans 2,5s. eager/omitting loading seulement affecte discovery — il ne fait pas itself raise récupérer priority; fetchpriority est a séparé hint, et stacking preload avec loading="lazy" on le même resource conflicts. Blanket site-wide lazy chargement est le courant CMS anti-modèle.
• Iframes obtenir leur propre contract: loading="lazy" seulement defers récupérer/creation timing — titre, sandbox, permissions policy, referrer policy, consent, et dimensions encore besoin paramètre independently, et hidden/carousel/transformed layouts peut intersect le viewport differently que a plain ci-dessous-le-fold element.
• Googlebot ne fait pas scroll or click. Quelconque contenu gated behind scroll/click events peut go unseen. Google’s sûr méthodes — native lazy chargement, IntersectionObserver, or a well-behaved JS library — tout clé off viewport intersection.
• Highest risque: custom/tiers JS lazy-charger libraries. Si l’URL jamais lands dans src, Google ne va pas indexer le image (per Martin Splitt).
• Infinite scroll est distinct: il nécessite unique paginated URLs + History API.
• Vérifier dans Search Console Inspection d’URL → rendu HTML → image URLs présent dans le src attribut.
• Pas a direct facteur de classement. Le effect est indirect, via Core Web Vitals et crawlability, et Splitt appelé le Core-Web-Vitals classement effect tiny.

Documentation officielle

«Primary-source guidance from the search engines and Google’s web.dev. » (Traduction) (Résumé en français de la section soixante-trois, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Google — Search Central » (Traduction) (Résumé en français de la section soixante-quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Fix Lazy-Loaded Website Content — the definitive doc: safe implementation methods, the “Google doesn’t interact with your page” rule, infinite-scroll/paginated-loading requirements, and how to verify in rendered HTML. » (Traduction) (Résumé en français de la section soixante-quatre, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Understand JavaScript SEO Basics — recommends lazy loading images as a bandwidth/performance best practice and links out to the dedicated guide. » (Traduction) (Résumé en français de la section soixante-quatre, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Core Web Vitals — why lazy-loading the LCP element is self-defeating (LCP target is 2.5s). » (Traduction) (Résumé en français de la section soixante-quatre, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.)

«Google — web.dev (Learn Performance) » (Traduction) (Résumé en français de la section soixante-cinq, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Lazy load images and <iframe> elements — when to defer, and the INP benefit of lazy iframes. » (Traduction) (Résumé en français de la section soixante-cinq, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Browser-level image lazy loading for the web — the native attribute, and why not to lazy-load in-viewport/LCP images. » (Traduction) (Résumé en français de la section soixante-cinq, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- It’s time to lazy-load offscreen iframes! — the iframe-specific case (ads, widgets, maps). » (Traduction) (Résumé en français de la section soixante-cinq, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- Browser-level lazy loading for CMSs — guidance for CMS platforms. » (Traduction) (Résumé en français de la section soixante-cinq, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.)

«Google — podcast » (Traduction) (Résumé en français de la section soixante-six, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Search Off the Record — Ep. 98, “Lazy loading demystified” (Aug 21, 2025) — John Mueller and Martin Splitt on lazy loading, rendering, indexing, and Core Web Vitals. Also indexed on Google’s Search Off the Record page. » (Traduction) (Résumé en français de la section soixante-six, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

«Developer reference (not SEO-specific, but authoritative on the API) » (Traduction) (Résumé en français de la section soixante-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- MDN — Lazy loading (Performance guide) » (Traduction) (Résumé en français de la section soixante-sept, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- MDN — HTMLImageElement: loading property » (Traduction) (Résumé en français de la section soixante-sept, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- caniuse — Lazy loading via attribute for images & iframes » (Traduction) (Résumé en français de la section soixante-sept, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.)

«Bing / Microsoft » (Traduction) (Résumé en français de la section soixante-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Bing publishes no dedicated lazy-loading document. Its general Webmaster Guidelines cover crawling and JS rendering broadly. Bingbot renders with a Chromium-based headless browser and, like Googlebot, does not scroll or click — so the same native loading="lazy" / IntersectionObserver approach that satisfies Google should satisfy Bing. That last point is an inference from Bingbot’s general rendering behavior, not a sourced Bing statement about lazy loading — treat it accordingly. » (Traduction) (Résumé en français de la section soixante-huit, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Quotes from the source » (Traduction) (Résumé en français de la section soixante-onze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

On-le-record statements depuis Google’s Documentation officielle. Chaque lien est a deep lien que jumps à le quoted passage on le page source.

Google — Recherche Central, “Fix Lazy-Loaded Website Content”

«- “Deferring loading of non-critical or non-visible content, also commonly known as ‘lazy-loading’, is a common performance and UX best practice.” Jump to quote » (Traduction) (Résumé en français de la section soixante-quatorze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- “However, if not implemented correctly, this technique can inadvertently hide content from Google. This document explains how to make sure Google can crawl and index lazy-loaded content.” Jump to quote » (Traduction) (Résumé en français de la section soixante-quatorze, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- “The methods mentioned don’t rely on user actions, such as scrolling or clicking, to load content, which is important as Google Search does not interact with your page.” Jump to quote » (Traduction) (Résumé en français de la section soixante-quatorze, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- “Don’t add lazy-loading to content that is likely to be immediately visible when a user opens a page. That might cause content to take longer to load and show up in the browser, which will be very noticeable to the user.” Jump to quote » (Traduction) (Résumé en français de la section soixante-quatorze, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- “Give each chunk its own persistent, unique URL.” — on infinite scroll / paginated loading. Jump to quote » (Traduction) (Résumé en français de la section soixante-quatorze, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.)

Lazy-loading checklist

Run ce avant vous ship a lazy-loading modifier:

• Le hero / LCP image n’est pas lazy-chargé — il charge eagerly (omit loading="lazy"), ideally avec fetchpriority="high".
• loading="lazy" est applied à images et iframes que sit ci-dessous le fold.
• Lazy images ont explicit width/height (or aspect-ratio) donc ils ne pas causer layout shift (CLS) quand ils charger dans.
• Aucun contenu est gated behind a scroll or click event — Googlebot ne va pas fire ceux. Utiliser native lazy chargement or IntersectionObserver à la place.
• vous êtes pas en utilisant le deprecated loading="auto" valeur — seulement lazy/eager.
• Off-screen iframes (embeds, ads, maps, widgets) utiliser loading="lazy" à cut startup main-thread fonctionner.
• Lazy-chargé iframes encore ont leur propre title, sandbox, allow/permissions policy, referrerpolicy, et explicit dimensions — loading="lazy" seulement defers récupérer timing, pas ceux attributs.
• Verified dans Search Console Inspection d’URL → rendu HTML que image/video URLs apparaître dans le src attribut.
• Si en utilisant a tiers JS lazy-charger library, confirmed le src encore ends up populated dans le rendu HTML.
• Pour infinite scroll, chaque chunk a a unique, persistent, paginated URL et le History API mises à jour le affiché URL.
• PageSpeed Insights’ “defer offscreen images” flags sont addressed.

Lazy-loading anti-patterns (myths et mistakes)

Chaque of ces is a courant belief or habit, pourquoi it’s incorrect, and Que faire à la place.

“Lazy loading is always good, so apply it to every image.” Pourquoi c’est incorrect: blanket site-wide lazy chargement catches votre hero/LCP image aussi, qui delays Plus grand affichage de contenu — le opposite de le speed win vous wanted. Faire à la place: lazy-charger ci-dessous-le-fold seulement; charger ci-dessus-le-fold images eagerly.

“Google ne fait pas indexer lazy-chargé contenu à tous.” Pourquoi c’est incorrect: Google explore et indexes lazy-chargé contenu fine quand c’est fait avec native lazy chargement, IntersectionObserver, or a well-behaved library. Le risque est spécifique à scroll/click-gated or broken setups — per Google’s propre wording, le problème est quand c’est “not implemented correctly.” Faire à la place: utiliser a viewport-intersection méthode et vérifier dans rendu HTML.

“loading='auto' is a good default.” Pourquoi it’s incorrect: auto is deprecated in Chrome; recommending it is stale advice. Do à la place: utiliser lazy pour off-screen resources, eager (or nothing) pour the rest.

«“Lazy loading and infinite scroll are the same fix.” Why it’s wrong: they’re distinct. Infinite scroll additionally needs unique paginated URLs and History API updates, or the deeper content may never be crawled reliably. Do instead: treat paginated/infinite loading as its own architecture with per-chunk URLs. » (Traduction) (Résumé en français de la section quatre-vingt-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

“loading='lazy' fonctionne on tout element.” Pourquoi c’est incorrect: c’est specified pour <img> et <iframe>. Prise en charge pour autre elements n’est pas partie de le core spec le même façon. Faire à la place: utiliser le attribut on images et iframes; handle autre media avec an appropriate technique (pour video, a poster image que charge le video on viewport entry).

“Lazy loading hurts SEO.” Pourquoi c’est incorrect: lazy chargement itself n’est pas a penalty. Le classement-pertinent effect exécute via Core Web Vitals et est petit; poor implementation est ce que hurts, pas le technique. Faire à la place: implement il correctement, exclude le LCP image, et vérifier ce que renders.

«## Lazy-loading cheat sheet » (Traduction) (Résumé en français de la section quatre-vingt-treize, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«The loading attribute » (Traduction) (Résumé en français de la section quatre-vingt-quatorze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«| Value | What it does | When to use | | --- | --- | --- | | loading="lazy" | Defers the resource until it’s near the viewport | Below-the-fold images and iframes | | loading="eager" | Loads immediately (the default) | Above-the-fold / LCP images (or just omit) | | loading="auto" | Deprecated in Chrome — don’t use | — | » (Traduction) (Résumé en français de la section quatre-vingt-quinze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Qui elements prise en charge il

• <img> — oui
• <iframe> — oui
• Autre elements (video/audio) — pas partie de le core spec le même façon; utiliser a poster-image + charger-on-view modèle pour video.

Ci-dessus vs. ci-dessous le fold

• Ci-dessus le fold / probable LCP → eager (jamais lazy). Ajouter fetchpriority="high" à le LCP image.
• Ci-dessous le fold → lazy.

Core Web Vitals impact

• Deferring off-screen images → helps LCP (fewer bytes compete up front).
• Deferring off-screen iframes → helps INP (moins startup main-thread fonctionner).
• Manquant width/height on lazy images → peut hurt CLS (layout shift on charger).

Règles Googlebot cares à propos de

• Googlebot ne fait pas scroll or click — aucun scroll/click-gated contenu.
• Sûr méthodes: native loading="lazy", IntersectionObserver, well-behaved JS library.
• Vérifier: Inspection d’URL → rendu HTML → image URL dans le src attribut.
• Infinite scroll ≠ image lazy chargement — nécessite unique paginated URLs + History API.

Avant / après

Concrete corrections, framed le façon vous’d hit les dans an audit.

1. Le hero image est lazy-chargé (LCP delayed)

Avant:

<img src="hero.jpg" loading="lazy" alt="Product hero">

Après:

<img src="hero.jpg" fetchpriority="high" alt="Product hero">

Pourquoi: le hero est le LCP element. Eager-loading il (et prioritizing le récupérer) lets il paint sooner. Lazy-loading il fait le opposite.

2. Site-wide blanket lazy chargement from a CMS par défaut

Avant: chaque <img> on le template carries loading="lazy", notamment le header logo et le top-de-page featured image. Après: le template charge ci-dessus-le-fold images eagerly et seulement s’applique loading="lazy" à images rendu ci-dessous le initial viewport. Pourquoi: blanket lazy chargement catches le images que sont visible immédiatement, delaying ce que le utilisateur (et LCP) voit premier.

3. Off-screen embed chargement on page charger

Avant:

<iframe src="https://maps.google.com/…" title="Store map"></iframe>

Après:

<iframe src="https://maps.google.com/…" loading="lazy" title="Store map"></iframe>

Pourquoi: le map est ci-dessous le fold. Deferring il supprime son startup coût et aide INP, since embeds faire main-thread fonctionner pendant que lune page est chargement.

4. Custom JS lazy-load leaves src vide pour Googlebot

Avant: a library stores le réel URL dans data-src et swaps il dans src on a scroll event — qui Googlebot jamais fires, donc le rendu HTML montre an vide/placeholder src. Après: utiliser native loading="lazy" (réel URL dans src depuis le commencer), or an IntersectionObserver-based library, alors confirmer dans Inspection d’URL que l’URL est présent dans le rendu src. Pourquoi: si l’URL n’est pas dans src dans le rendu HTML, Google ne peut pas pick le image up.

Trouver images que devrait (or shouldn’t) be lazy-loaded

A DevTools Console extrait vous pouvez paste on quelconque page à audit le loading attribut. Il listes images avec leur loading valeur et si ils sont currently dans le viewport — donc vous pouvez spot an ci-dessus-le-fold image marked lazy, or a ci-dessous-le-fold un que n’est pas.

Chrome DevTools Console

// Audit loading attributes vs. viewport position
[...document.images].forEach(img => {
  const r = img.getBoundingClientRect();
  const inView = r.top < innerHeight && r.bottom > 0;
  const loading = img.getAttribute('loading') || '(none/eager)';
  // Flag the two mistakes: in-view + lazy, or off-view + not lazy
  const flag =
    (inView && loading === 'lazy') ? '⚠ above-the-fold but LAZY' :
    (!inView && loading !== 'lazy') ? '· off-screen, not lazy' : '';
  console.log(loading.padEnd(14), inView ? 'in-view ' : 'off-view', flag, img.currentSrc || img.src);
});

Grep votre source pour risky lazy-load patterns

Vérifier votre templates/construire sortie pour le deprecated auto valeur et pour data-src-style JS lazy chargement (qui peut laisser src vide pour Googlebot).

macOS / Linux (bash)

# Deprecated loading="auto"
grep -rn 'loading="auto"' ./src

# JS-driven lazy load leaving real URL in data-src (verify these render into src)
grep -rn 'data-src=' ./src

Windows (PowerShell)

# Deprecated loading="auto"
Get-ChildItem -Recurse .\src | Select-String -Pattern 'loading="auto"'

# JS-driven lazy load using data-src
Get-ChildItem -Recurse .\src | Select-String -Pattern 'data-src='

Remember: data-src n’est pas automatiquement a problème — c’est a prompt à confirmer le réel URL ends up dans le rendu src, qui vous vérifier dans Search Console Inspection d’URL.

Hero image starts plus tard après enabling lazy chargement

Symptom: LCP obtient slower et le hero requête begins late dans le waterfall.

Probable causer: A global CMS rule ajouté loading="lazy" to an above-the-fold or LCP image.

«Fix and confirmation: Remove the lazy attribute from that image, optionally add fetchpriority="high", and confirm its request starts earlier in a matched trace. » (Traduction) (Résumé en français de la section cent vingt-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Lazy image apparaît but shifts lune page

Symptom: Contenu jumps quand a deferred image enters le viewport.

Probable causer: The image has aucun explicit dimensions or reserved aspect ratio.

Corriger et confirmation: Ajouter width et height attributs or reserve le même aspect ratio dans CSS. Reload avec layout-shift regions enabled et vérifier le image aucun plus long moves surrounding contenu.

Google ne fait pas voir deferred content

Symptom: A rendered inspection is manquant the image URL or content que apparaît après a human scrolls.

Probable causer: A scroll/click handler jamais exécute pour Googlebot, or a lazy-charger library laisse le réel URL dans data-src au lieu de le rendu src.

Corriger et confirmation: Utiliser native lazy chargement or an IntersectionObserver-based implementation, alors inspect le rendu HTML et confirmer le final URL et contenu sont présent sans interaction.

Off-screen embed encore loads immédiatement

Symptom: A below-the-fold iframe apparaît in the initial waterfall despite a lazy-loading modifier.

Probable causer: Le attribut est absent depuis le deployed iframe, a wrapper crée le iframe eagerly, or le embed sits fermer suffisant à le viewport pour le navigateur’s charger threshold.

Corriger et confirmation: Inspect le actif DOM et requête initiator, tester on a long page avec a cold cache, et vérifier la requête est deferred jusqu’à le navigateur’s near-viewport threshold.

«## Tools for implementation and proof » (Traduction) (Résumé en français de la section cent quarante-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- Chrome DevTools Elements and Network panels: confirm the deployed loading attribute, identify which script created an iframe, and compare request start times before and after a change. » (Traduction) (Résumé en français de la section cent quarante-trois, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Chrome DevTools Performance panel: record a load and verify that deferring an embed reduces startup main-thread work without delaying the LCP image. » (Traduction) (Résumé en français de la section cent quarante-trois, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- PageSpeed Insights: use the off-screen-image diagnostic as a starting list, then separate true below-the-fold candidates from the hero or other immediate content. » (Traduction) (Résumé en français de la section cent quarante-trois, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Search Console URL Inspection: inspect rendered HTML and verify that deferred image URLs end up in src and that lazy-loaded content exists without a scroll or click. » (Traduction) (Résumé en français de la section cent quarante-trois, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- The browser viewport and filmstrip: test more than one viewport size. An image below the fold on desktop may be above the fold on a smaller or differently shaped device. » (Traduction) (Résumé en français de la section cent quarante-trois, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.)

Below-the-fold image deferral

Tester to run: Record a cold-load Network trace avant and après ajout native lazy chargement to an image bien ci-dessous the initial viewport.

Attendu résultat: Le image requête est absent depuis le initial critical waterfall et begins as le viewport approaches il.

Échec interpretation: Le deployed markup lacks le attribut, JavaScript crée or récupère le image eagerly, or le tester image est dans le navigateur’s near-viewport threshold.

Monitoring window: Vérifier immédiatement après deployment à travers representative mobile et desktop viewport sizes.

Rollback trigger: Roll back si an image visible on initial charger is deferred or si the image routinely fails to apparaître avant the utilisateur reaches it.

LCP-image exclusion

Tester à exécuter: Comparer matched performances traces et requête waterfalls pour le page’s LCP image après removing blanket lazy chargement.

Attendu résultat: Le LCP image charge eagerly, son requête commence précédent, et LCP ne fait pas regress.

Échec interpretation: Un autre template or optimization couche re-adds the attribute, or discovery is encore delayed by CSS, JavaScript, or markup.

Monitoring window: Vérifier repeated lab exécute immédiatement, alors watch champ LCP over le suivant reporting window.

Rollback trigger: Roll back le surrounding rollout si le modifier delays autre critical resources suffisant à causer a repeatable LCP regression.

Rendered-content visibility

Tester à exécuter: Utiliser Inspection d’URL à view rendu HTML sans interacting avec le page et recherche pour le deferred image URL et associated contenu.

Attendu résultat: Le final URL apparaît dans src, et important contenu est présent dans le rendu HTML.

Échec interpretation: Le implementation dépend on a scroll/click event or le lazy-charger script failed during rendu.

Monitoring window: Tester every affected template après release and après modification the lazy-load library or CMS image pipeline.

Rollback trigger: Roll back si indexable contenu or image URLs disappear depuis le rendu sortie.

Testez vos connaissances: Lazy Chargement

Five rapide questions on deferring images and iframes sans hurting Core Web Vitals or indexation. Pick an réponse pour chaque, alors vérifier.

Ressources utiles

Mon connexe writing

• JavaScript SEO Problèmes & Meilleur Practices — où Je cover le shift depuis JS-driven à navigateur-native lazy chargement, et pourquoi lazy-chargé contenu (pas simplement images) est le indexation risque.
• Google PageSpeed Insights Pour le SEOs & Developers — connects le “defer offscreen images” audit à lazy chargement, plus le rest de le PSI rapport.
• Le Beginner’s Guide à SEO technique — où performances et rendu fit dans le bigger picture.

Depuis autour le industry

• Corriger Lazy-Chargé Site web Contenu (Recherche Google Central) — le definitive implementation-et-testing doc.
• Navigateur-level image lazy chargement pour le web (web.dev) — le native attribut et le LCP caveat, straight depuis Google’s performances team.
• c’est temps à lazy-charger offscreen iframes! (web.dev) — le iframe cas et son startup/INP avantage.
• Lazy chargement demystified — Recherche Off le Record, Ep. 98 (Google) — Mueller et Splitt’s complet episode on lazy chargement, rendu, indexation, et Core Web Vitals.
• Lazy chargement explained: Speed up votre site & UX rapide (Moteur de recherche Land) — a thorough industry guide avec CMS-spécifique notes.
• Lazy chargement (Performances guide) (MDN) — le developer-reference view de le API.
• A lazy chargement primer pour crawlability & indexation success (Oncrawl) — le explorer/indexer angle dans depth.

Journal des modifications