Lazy Chargement

TL;DR — Lazy chargement indique le navigateur to hold off downloading images and embeds jusqu’à you’re à propos de to scroll to les, so lune page loads faster up front. The facile, no-code façon is to ajouter loading="lazy" to an <img> or <iframe>. The un rule to remember: don’t lazy-load the big image at the top of lune page — que rend lune page feel slower, pas faster.

Ce que lazy chargement is

Normally, quand a navigateur opens une page, it tries to download everything on it — every image, every embedded map or video — correct away. On a long page with lots of images, that’s a lot of downloading pour stuff vous pourrait jamais scroll bas to voir.

Lazy chargement fixes que. It defers chargement the off-screen images and embeds jusqu’à you’re à propos de to scroll les into view. Lune page montre vous what’s at the top quickly, and the rest loads as vous go. Moins données up front signifie a faster premier impression, plus savings on bandwidth and 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="…">

That’s it. It fonctionne on <img> and <iframe> (think embedded YouTube videos, Google Maps, social widgets) in every major navigateur, with aucun JavaScript.

The un mistake to éviter

Don’t lazy-load the big image at the top of lune page — the hero image, the chose personnes voir premier. Lazy chargement indique le navigateur “this can wait,” so a lazy-loaded top image loads plus tard que it devrait, and lune page feels slower. Google’s propre guidance is to skip lazy chargement pour anything that’s visible correct away quand lune page opens.

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

Fait it hurt SEO?

By itself, aucun. Google peut index lazy-loaded images and content simplement fine quand it’s fait the normal façon. The trouble starts seulement quand une page hides content behind scrolling or clicking — parce que moteur de recherches don’t scroll or click. Si votre images simplement utiliser loading="lazy", you’re fine. Vouloir the details on how Google en réalité sees ce, and Comment vérifier it? Switch to the Avancé tab.

TL;DR — Lazy chargement defers off-screen images and iframes jusqu’à ils near the viewport, cutting initial page weight (helps LCP) and startup main-thread fonctionner (helps INP). The native loading="lazy" attribute on <img>/<iframe> has replaced la plupart JS libraries; seulement lazy and eager are meaningful valeurs (auto is deprecated). The damaging mistakes: lazy-loading the LCP/above-the-fold image (delays the very metric you’re chasing), and gating content behind scroll/click — qui Googlebot jamais triggers parce que it doesn’t interact with lune page. It’s pas a direct ranking factor; the effect runs via Core Web Vitals and crawlability. Vérifier in Search Console’s Inspection d’URL Outil que image URLs land in the src attribute of the rendered HTML.

Ce que lazy chargement en réalité fait

The idea is simple: seulement charger resources quand vous besoin les, au lieu de chargement everything at une fois. On a media-heavy page, downloading every image and embed up front garde le navigateur busy fetching choses the visitor may jamais scroll to — burning bandwidth, memory, and battery pour nothing. Deferring the off-screen ones lets the above-the-fold content paint sooner. Martin Splitt made exactly ce point on Google’s Search Off the Record episode “Lazy loading demystified”: the goal is to éviter fonctionner que yields nothing, parce que non-critical images lune page voudrait be fine sans simplement garder le navigateur occupied.

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

Native vs. JavaScript-driven lazy chargement

A few années ago, navigateurs gained a native loading attribute pour images and iframes, so vous pouvez hand the whole job to le navigateur au lieu de wiring up a JavaScript API. In my JavaScript SEO guide at Ahrefs I faire the même observation: since I premier wrote que piece, lazy chargement has mostly déplacé from being JavaScript-driven to being handled by navigateurs. You’ll encore run into JS-driven setups, and pour images they’re usually fine — the chose I vérifier is si réel content (pas simplement images) is being lazy chargé, parce que ceux setups are the ones que have caused content pas to be 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 so le navigateur reserves the space avant the image loads — that’s the biggest layout-shift risk with deferred images. Reserved dimensions aren’t an absolute CLS guarantee, though: si the surrounding layout or a responsive crop encore changements après the image loads, vous pouvez encore voir a shift, so confirmer with a réel layout-shift trace plutôt que assuming fixed dimensions alone settle it.

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

The loading attribute’s valeurs

Seulement two valeurs matter today:

• loading="lazy" — defer the resource jusqu’à it’s near the viewport.
• loading="eager" — charger it immédiatement, the par défaut behavior. Utiliser it to be explicit à propos de above-the-fold images.

Vous may voir loading="auto" in older articles — it’s deprecated in Chrome, so don’t reach pour it. There’s aucun besoin to; omitting the attribute déjà donne vous the par défaut (eager) behavior.

How near is “near”? loading="lazy" is a hint, pas an author-controlled guarantee — the spec leaves the réel near-viewport decision to le navigateur. Chromium tries to récupérer a lazy resource early suffisant que it’s ready by the temps vous scroll to it, and the trigger distance varies by navigateur, connection speed, and resource type; it isn’t a fixed pixel valeur vous pouvez rely on or reproduce à travers navigateurs or versions. Don’t publish — or trust — a spécifique “loads N pixels before the viewport” number; treat the near-viewport window as implementation-defined and confirmer réel behavior with a Network trace on le navigateur/connection vous care à propos de au lieu de assuming a constant.

Native lazy chargement aussi plays fine with responsive images: it s’applique to ordinary src and srcset/sizes selection, so vous don’t lose responsive image behavior by ajout loading="lazy". Si vous à la place hide the réel URL seulement in a data-* attribute pour a script to swap in plus tard, chargement now dépend on que script — tester the rendered HTML and ce que se produit si the script fails (plus on ce in the Scripts and Troubleshooting tabs).

The #1 mistake: lazy-loading the LCP / above-the-fold image

Ce is the échec I voir la plupart, and every source agrees on it. Si vous lazy-load the hero image — or quelconque image probable to be the LCP element — you’ve told le navigateur to wait on the unique la plupart important pixel pour perceived charger speed. Le navigateur aussi can’t lazy-load an image jusqu’à it knows où the image va sit on lune page, so lazy above-the-fold images tend to charger plus slowly que eager ones. Que directement delays Plus grand affichage de contenu, the metric Google dit devrait resolve dans the premier 2,5 seconds of charger.

Splitt put the flip side plainly on the SOTR episode: si you’re pas en utilisant lazy chargement où vous devez, que va probably hurt some aspect of Core Web Vitals — la plupart probable LCP. So it cuts les deux façons. The rule:

• 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 every image ci-dessus the fold is the LCP candidate — identifier the réel un (a Performances trace or PageSpeed Insights va nom it) and vérifier its requête timing plutôt que treating every first-screen image the même. And ces are separate hints, pas un setting: loading="eager" (or omitting loading) seulement signifie le navigateur won’t defer discovery of the resource — it doesn’t itself raise récupérer priority. fetchpriority is a distinct, advisory hint on top of que. Stacking a <link rel="preload"> with chargement="lazy" on the même resource sends le navigateur conflicting intent, so vérifier the réel network waterfall plutôt que assuming the combination fait ce que vous expect.

The blanket anti-pattern is switching on lazy chargement pour every image site-wide — a courant CMS par défaut. As Splitt noted, si every image is lazy chargé, alors images que are (or devrait be) immédiatement visible obtenir lazy chargé aussi, qui is exactly the cas vous vouloir to éviter.

How Googlebot renders lazy-loaded content

Here’s the exploration reality que trips personnes up: Googlebot doesn’t scroll, and it doesn’t click. It renders votre page with a headless navigateur, but it doesn’t simulate a utilisateur interacting with it. Google states ce directement — its recommended lazy-loading méthodes deliberately don’t rely on utilisateur actions comme scrolling or clicking, parce que Recherche Google ne fait pas interact with votre page.

That’s pourquoi the how of votre implementation matters. Google’s doc listes three implementations it considers safe: le navigateur’s built-in lazy chargement pour images and iframes, the IntersectionObserver API (with a polyfill), or a JavaScript library que loads données as it enters the viewport. Tout three clé off viewport intersection — pas a scroll or click event que Googlebot va jamais fire.

The high-risk pattern is a custom or third-party JS lazy-load library. Si the library misbehaves and the image URL jamais lands in the src attribute, Google simply won’t pick que image up — Splitt décrit exactly ce échec mode on the SOTR episode. There’s nothing to index si l’URL isn’t là. Ce is the même chose I flag in my JavaScript SEO guide: image lazy chargement is usually fine, but lazy-loaded content is où indexation problems creep in, and the fix is to vérifier ce que Google en réalité renders.

Infinite scroll is a différent problem

Don’t conflate basic image/iframe lazy chargement with infinite scroll or paginated chargement. Deferring images is un chose; chargement nouveau chunks of content as the utilisateur scrolls is un autre, and it nécessite its propre architecture. Google’s guidance: give 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), and mettre à jour the affiché URL with the History API as chaque chunk becomes the principal visible content so it peut be refreshed, shared, and lié. Skip que and the deeper content behind an endless scroll may jamais be reliably crawled or indexé.

Comment tester it

The verification chemin is the même in Google’s doc and in my propre methodology: utiliser Search Console’s Inspection d’URL Outil and regarder at the rendered HTML. Si votre image (or video) URLs apparaître in the src attribute on the <img>/<video> elements in que rendered HTML, votre setup fonctionne. Google dit ce outright — vérifier the rendered HTML to assurez-vous votre content is in it. Si l’URL is manquant from src, that’s votre problem, and it usually points back to a scroll/click trigger or a broken library.

Pour a lazy-loaded product grid, go au-delà ce presence vérifier. Run the Infinite Scroll SEO testing matrix with standard and tall viewports, fresh navigation and post-load resizing, no-action and incremental-scroll runs, unique product-link counts, and accessibility-tree inspection. Resizing an initialized page n’est pas equivalent to navigating at the final viewport size parce que observers and batch calculations may be registered seulement during startup. Evidence for this claim 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. Scope: Google Search guidance for JavaScript-driven lazy loading. Confidence: high · Verified: 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 be deferring. In my PageSpeed Insights guide at Ahrefs I remarque que the “defer offscreen elements” audit is telling vous to lazy-load images — a handy façon to connecter the diagnostic vous déjà run to the fix.

Ranking-signal honesty

Be clair à propos de ce que lazy chargement is and isn’t. En utilisant it is pas a direct ranking factor, and pas en utilisant it isn’t a penalty. The connection to rankings is indirect: it flows via Core Web Vitals (mainly LCP, parfois INP pour iframes) and via crawlability, si a bad implementation hides content. Splitt characterized the ranking effect via Core Web Vitals as a tiny, minute factor in la plupart cas. So optimize lazy chargement pour votre utilisateurs’ charger experience and pour clean indexation — pas parce que vous expect a ranking bump from the attribute itself.

Où ce fits

Lazy chargement is un lever in the broader web performances toolkit. It pairs with resource hints (preload/preconnect pour the resources vous do vouloir early), font-loading strategy, mise en cache, and a CDN — and it’s judged, ultimately, via Core Web Vitals. Obtenir the above-the-fold/below-the-fold split correct and it’s un of the cheapest wins disponible.

AI summary

A condensed prendre on the Avancé version:

• Lazy chargement defers off-screen images and iframes jusqu’à ils near the viewport — cutting initial page weight and startup fonctionner. The native, no-JS façon is loading="lazy" on <img> and <iframe>; it has largely replaced JS libraries. It’s a navigateur hint, pas a guaranteed distance or timing — the trigger point varies by navigateur, connection, and resource type, so don’t rely on a fixed pixel number.
• Valeurs: seulement lazy and eager matter. auto is deprecated in Chrome.
• Core Web Vitals lien: fewer up-front bytes aider LCP; deferring iframes cuts main-thread fonctionner at startup, helping INP. Définir width/height so deferred images don’t causer CLS — though reserved dimensions alone don’t guarantee zero shift si the surrounding layout encore changements.
• #1 mistake: lazy-loading the probable/observed LCP image, pas simplement quelconque above-the-fold image. It delays Plus grand affichage de contenu, qui Google dit devrait resolve dans 2,5s. eager/omitting loading seulement affecte discovery — it doesn’t itself raise récupérer priority; fetchpriority is a separate hint, and stacking preload with loading="lazy" on the même resource conflicts. Blanket site-wide lazy chargement is the courant CMS anti-pattern.
• Iframes obtenir leur propre contract: loading="lazy" seulement defers récupérer/creation timing — title, sandbox, permissions policy, referrer policy, consent, and dimensions encore besoin setting independently, and hidden/carousel/transformed layouts peut intersect the viewport differently que a plain below-the-fold element.
• Googlebot doesn’t scroll or click. Quelconque content gated behind scroll/click events peut go unseen. Google’s safe méthodes — native lazy chargement, IntersectionObserver, or a well-behaved JS library — tout clé off viewport intersection.
• Highest risk: custom/third-party JS lazy-load libraries. Si l’URL jamais lands in src, Google won’t index the image (per Martin Splitt).
• Infinite scroll is distinct: it nécessite unique paginated URLs + History API.
• Vérifier in Search Console Inspection d’URL → rendered HTML → image URLs présent in the src attribute.
• Pas a direct ranking factor. The effect is indirect, via Core Web Vitals and crawlability, and Splitt appelé the Core-Web-Vitals ranking effect tiny.

Documentation officielle

Primary-source guidance from the moteur de recherches and Google’s web.dev.

Google — Search Central

• Fix Lazy-Loaded Website Content — the definitive doc: safe implementation méthodes, the “Google doesn’t interact with your page” rule, infinite-scroll/paginated-loading requirements, and how to vérifier in rendered HTML.
• Comprendre JavaScript SEO Basics — recommends lazy chargement images as a bandwidth/performances meilleur pratique and liens out to the dedicated guide.
• Core Web Vitals — pourquoi lazy-loading the LCP element is self-defeating (LCP target is 2,5s).

Google — web.dev (Apprendre Performances)

• Lazy charger images and <iframe> elements — quand to defer, and the INP benefit of lazy iframes.
• Browser-level image lazy chargement pour the web — the native attribute, and pourquoi pas to lazy-load in-viewport/LCP images.
• It’s temps to lazy-load offscreen iframes! — the iframe-specific cas (ads, widgets, maps).
• Browser-level lazy chargement pour CMSs — guidance pour CMS platforms.

Google — podcast

• Search Off the Record — Ep. 98, “Lazy loading demystified” (Aug 21, 2025) — John Mueller and Martin Splitt on lazy chargement, rendering, indexation, and Core Web Vitals. Aussi indexé on Google’s Search Off the Record page.

Developer référence (pas SEO-specific, but authoritative on the API)

• MDN — Lazy chargement (Performances guide)
• MDN — HTMLImageElement: chargement property
• caniuse — Lazy chargement via attribute pour images & iframes

Bing / Microsoft

• Bing publishes aucun dedicated lazy-loading document. Its general Webmaster Guidelines cover exploration and JS rendering broadly. Bingbot renders with a Chromium-based headless navigateur and, comme Googlebot, ne fait pas scroll or click — so the même native loading="lazy" / IntersectionObserver approach que satisfies Google devrait satisfy Bing. Que dernier point is an inference from Bingbot’s general rendering behavior, pas a sourced Bing statement à propos de lazy chargement — treat it accordingly.

Quotes from the source

On-the-record statements from Google’s Documentation officielle. Chaque lien is a deep lien que jumps to the quoted passage on the source page.

Google — Search 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
• “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
• “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
• “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
• “Give each chunk its own persistent, unique URL.” — on infinite scroll / paginated chargement. Jump to quote

Lazy-loading checklist

Run ce avant vous ship a lazy-loading modifier:

• The hero / LCP image n’est pas lazy-loaded — it loads eagerly (omit loading="lazy"), ideally with fetchpriority="high".
• loading="lazy" is applied to images and iframes que sit ci-dessous the fold.
• Lazy images have explicit width/height (or aspect-ratio) so ils don’t causer layout shift (CLS) quand ils charger in.
• Aucun content is gated behind a scroll or click event — Googlebot won’t fire ceux. Utiliser native lazy chargement or IntersectionObserver à la place.
• You’re pas en utilisant the deprecated loading="auto" valeur — seulement lazy/eager.
• Off-screen iframes (embeds, ads, maps, widgets) utiliser loading="lazy" to cut startup main-thread fonctionner.
• Lazy-loaded iframes encore have leur propre title, sandbox, allow/permissions policy, referrerpolicy, and explicit dimensions — loading="lazy" seulement defers récupérer timing, pas ceux attributes.
• Verified in Search Console Inspection d’URL → rendered HTML que image/video URLs apparaître in the src attribute.
• Si en utilisant a third-party JS lazy-load library, confirmed the src encore ends up populated in the rendered HTML.
• Pour infinite scroll, chaque chunk has a unique, persistent, paginated URL and the History API updates the affiché URL.
• PageSpeed Insights’ “defer offscreen images” flags are addressed.

Lazy-loading anti-patterns (myths and 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 it’s incorrect: blanket site-wide lazy chargement catches votre hero/LCP image aussi, qui delays Plus grand affichage de contenu — the opposite of the speed win vous wanted. Do à la place: lazy-load below-the-fold seulement; charger above-the-fold images eagerly.

“Google doesn’t index lazy-loaded content at all.” Pourquoi it’s incorrect: Google crawls and indexes lazy-loaded content fine quand it’s fait with native lazy chargement, IntersectionObserver, or a well-behaved library. The risk is spécifique to scroll/click-gated or broken setups — per Google’s propre wording, the problem is quand it’s “not implemented correctly.” Do à la place: utiliser a viewport-intersection méthode and vérifier in rendered 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.” Pourquoi it’s incorrect: they’re distinct. Infinite scroll additionally nécessite unique paginated URLs and History API updates, or the deeper content may jamais be crawled reliably. Do à la place: treat paginated/infinite chargement as its propre architecture with per-chunk URLs.

“loading='lazy' works on any element.” Pourquoi it’s incorrect: it’s specified pour <img> and <iframe>. Prise en charge pour autre elements isn’t partie of the core spec the même façon. Do à la place: utiliser the attribute on images and iframes; handle autre media with an appropriate technique (pour video, a poster image que loads the video on viewport entry).

“Lazy loading hurts SEO.” Pourquoi it’s incorrect: lazy chargement itself isn’t a penalty. The ranking-relevant effect runs via Core Web Vitals and is petit; poor implementation is ce que hurts, pas the technique. Do à la place: implement it correctement, exclude the LCP image, and vérifier ce que renders.

Lazy-loading cheat sheet

The loading attribute

Qui elements prise en charge it

• <img> — yes
• <iframe> — yes
• Autre elements (video/audio) — pas partie of the core spec the même façon; utiliser a poster-image + load-on-view pattern pour video.

Ci-dessus vs. ci-dessous the fold

• Ci-dessus the fold / probable LCP → eager (jamais lazy). Ajouter fetchpriority="high" to the LCP image.
• Ci-dessous the 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).

Rules Googlebot cares à propos de

• Googlebot doesn’t scroll or click — aucun scroll/click-gated content.
• Safe méthodes: native loading="lazy", IntersectionObserver, well-behaved JS library.
• Vérifier: Inspection d’URL → rendered HTML → image URL in the src attribute.
• Infinite scroll ≠ image lazy chargement — nécessite unique paginated URLs + History API.

Avant / après

Concrete fixes, framed the façon you’d hit les in an audit.

1. The hero image is lazy-loaded (LCP delayed)

Avant:

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

Après:

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

Pourquoi: the hero is the LCP element. Eager-loading it (and prioritizing the récupérer) lets it paint sooner. Lazy-loading it fait the opposite.

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

Avant: every <img> on the template carries loading="lazy", notamment the header logo and the top-of-page featured image. Après: the template loads above-the-fold images eagerly and seulement s’applique loading="lazy" to images rendered ci-dessous the initial viewport. Pourquoi: blanket lazy chargement catches the images que are visible immédiatement, delaying ce que the utilisateur (and LCP) sees 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: the map is ci-dessous the fold. Deferring it removes its startup cost and helps INP, since embeds do main-thread fonctionner pendant que lune page is chargement.

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

Avant: a library stores the réel URL in data-src and swaps it into src on a scroll event — qui Googlebot jamais fires, so the rendered HTML montre an vide/placeholder src. Après: utiliser native loading="lazy" (réel URL in src from the commencer), or an IntersectionObserver-based library, alors confirmer in Inspection d’URL que l’URL is présent in the rendered src. Pourquoi: si l’URL isn’t in src in the rendered HTML, Google can’t pick the image up.

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

A DevTools Console snippet vous pouvez paste on quelconque page to audit the loading attribute. It listes images with leur loading valeur and si they’re currently in the viewport — so vous pouvez spot an above-the-fold image marked lazy, or a below-the-fold un que isn’t.

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 output pour the deprecated auto valeur and pour data-src-style JS lazy chargement (qui peut leave 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 isn’t automatically a problem — it’s a prompt to confirmer the réel URL ends up in the rendered src, qui vous vérifier in Search Console Inspection d’URL.

Hero image starts plus tard après enabling lazy chargement

Symptom: LCP obtient slower and the hero requête begins late in the waterfall.

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

Fix and confirmation: Supprimer the lazy attribute from que image, optionally ajouter fetchpriority="high", and confirmer its requête starts précédent in a matched trace.

Lazy image apparaît but shifts lune page

Symptom: Content jumps quand a deferred image enters the viewport.

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

Fix and confirmation: Ajouter width and height attributes or reserve the même aspect ratio in CSS. Reload with layout-shift regions enabled and vérifier the image aucun plus long moves surrounding content.

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 runs pour Googlebot, or a lazy-load library leaves the réel URL in data-src au lieu de the rendered src.

Fix and confirmation: Utiliser native lazy chargement or an IntersectionObserver-based implementation, alors inspect the rendered HTML and confirmer the final URL and content are 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: The attribute is absent from the deployed iframe, a wrapper creates the iframe eagerly, or the embed sits fermer suffisant to the viewport pour le navigateur’s charger threshold.

Fix and confirmation: Inspect the live DOM and requête initiator, tester on a long page with a cold cache, and vérifier la requête is deferred jusqu’à le navigateur’s near-viewport threshold.

Outils pour implementation and proof

• Chrome DevTools Elements and Network panels: confirmer the deployed loading attribute, identifier qui script créé an iframe, and comparer requête commencer times avant and après a modifier.
• Chrome DevTools Performances panel: record a charger and vérifier que deferring an embed reduces startup main-thread fonctionner sans delaying the LCP image.
• PageSpeed Insights: utiliser the off-screen-image diagnostic as a starting liste, alors separate vrai below-the-fold candidates from the hero or autre immediate content.
• Search Console Inspection d’URL: inspect rendered HTML and vérifier que deferred image URLs fin up in src and que lazy-loaded content exists sans a scroll or click.
• Le navigateur viewport and filmstrip: tester plus que un viewport size. An image ci-dessous the fold on desktop may be ci-dessus the fold on a plus petit or differently shaped device.

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 result: The image requête is absent from the initial critical waterfall and begins as the viewport approaches it.

Échec interpretation: The deployed markup lacks the attribute, JavaScript creates or récupère the image eagerly, or the tester image is dans le navigateur’s near-viewport threshold.

Monitoring window: Vérifier immédiatement après deployment à travers representative mobile and 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 to run: Comparer matched performances traces and requête waterfalls pour the page’s LCP image après removing blanket lazy chargement.

Attendu result: The LCP image loads eagerly, its requête starts précédent, and 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 runs immédiatement, alors watch field LCP over the suivant reporting window.

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

Rendered-content visibility

Tester to run: Utiliser Inspection d’URL to view rendered HTML sans interacting with the page and search pour the deferred image URL and associated content.

Attendu result: The final URL apparaît in src, and important content is présent in the rendered HTML.

Échec interpretation: The implementation dépend on a scroll/click event or the lazy-load script failed during rendering.

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 content or image URLs disappear from the rendered output.

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

My connexe writing

• JavaScript SEO Problèmes & Meilleur Practices — où I cover the shift from JS-driven to browser-native lazy chargement, and pourquoi lazy-loaded content (pas simplement images) is the indexation risk.
• Google PageSpeed Insights Pour le SEOs & Developers — connects the “defer offscreen images” audit to lazy chargement, plus the rest of the PSI report.
• The Beginner’s Guide to SEO technique — où performances and rendering fit in the bigger picture.

From autour the industry

• Fix Lazy-Loaded Website Content (Recherche Google Central) — the definitive implementation-and-testing doc.
• Browser-level image lazy chargement pour the web (web.dev) — the native attribute and the LCP caveat, straight from Google’s performances team.
• It’s temps to lazy-load offscreen iframes! (web.dev) — the iframe cas and its startup/INP benefit.
• Lazy chargement demystified — Search Off the Record, Ep. 98 (Google) — Mueller and Splitt’s complet episode on lazy chargement, rendering, indexation, and Core Web Vitals.
• Lazy chargement explained: Speed up votre site & UX fast (Moteur de recherche Land) — a thorough industry guide with CMS-specific notes.
• Lazy chargement (Performances guide) (MDN) — the developer-reference view of the API.
• A lazy chargement primer pour crawlability & indexation success (Oncrawl) — the explorer/index angle in depth.

Journal des modifications