Lazy ładowanie

TL;DR — Lazy ładowanie tells the przeglądarka to hold off downloading images i embeds until you’re o to scroll to them, so the strona loads faster up front. The łatwy, no-code way jest to dodawać loading="lazy" to an <img> lub <iframe>. The one reguła to remember: don’t lazy-load the big image at the top of the strona — że makes the strona feel slower, nie faster.

co lazy ładowanie jest

Normally, gdy a przeglądarka opens a strona, it tries to download everything on it — każdy image, każdy embedded map lub video — right away. On a long strona z lots of images, że’s a lot of downloading dla stuff you może nigdy scroll down to see.

Lazy ładowanie fixes że. It defers ładowanie the off-screen images i embeds until you’re o to scroll them do view. The strona pokazuje you co’s at the top quickly, i the rest loads as you go. mniej data up front means a faster pierwszy impression, plus savings on przepustowość i battery — który matters najbardziej on phones.

The łatwy way: the loading atrybut

You używany to need a JavaScript library to robić ten. nie anymore. Modern przeglądarki mieć it built in. You just dodawać one atrybut:

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

że’s it. It działa on <img> i <iframe> (think embedded YouTube videos, Google Maps, social widgets) in każdy major przeglądarka, z no JavaScript.

The one mistake to avoid

Don’t lazy-load the big image at the top of the strona — the hero image, the thing people see pierwszy. Lazy ładowanie tells the przeglądarka “this can wait,” so a lazy-załadowany top image loads later than it powinien, i the strona feels slower. Google’s own guidance jest to skip lazy ładowanie dla anything że’s visible right away gdy the strona opens.

The short version: lazy-load the stuff below the fold, load the stuff above the fold normally.

robi it hurt SEO?

By itself, no. Google może index lazy-załadowany images i treść just fine gdy it’s done the normal way. The trouble starts tylko gdy a strona hides treść behind scrolling lub clicking — ponieważ wyszukiwarki don’t scroll lub click. If twój images just używać loading="lazy", you’re fine. Want the details on how Google actually sees ten, i how to sprawdzenie it? Switch to the Advanced tab.

TL;DR — Lazy ładowanie defers off-screen images i iframes until they near the viewport, cutting initial strona weight (pomaga LCP) i startup main-thread działać (pomaga INP). The native loading="lazy" atrybut on <img>/<iframe> ma replaced najbardziej JS libraries; tylko lazy i eager są meaningful wartości (auto jest deprecated). The damaging mistakes: lazy-ładowanie the LCP/above-the-fold image (opóźnienia the bardzo metric you’re chasing), i gating treść behind scroll/click — który Googlebot nigdy triggers ponieważ it doesn’t interact z the strona. It’s nie a bezpośredni czynnik rankingowy; the effect runs przez Core Web Vitals i możliwość indeksowania. Verify in Search Console’s URL Inspection narzędzie że image URLs land in the src atrybut of the wyrenderowany HTML.

co lazy ładowanie actually robi

The idea jest prosty: tylko load zasoby gdy you need them, zamiast ładowanie everything at once. On a media-heavy strona, downloading każdy image i embed up front zachowuje the przeglądarka busy pobieranie things the visitor może nigdy scroll to — burning przepustowość, memory, i battery dla nothing. Deferring the off-screen ones lets the above-the-fold treść paint sooner. Martin Splitt made exactly ten point on Google’s Search Off the Record episode “Lazy loading demystified”: the goal jest to avoid działać że yields nothing, ponieważ non-critical images the strona by być fine bez just zachowaj przeglądarka occupied.

ten connects to the Core Web Vitals najbardziej people są chasing. Fewer bytes competing dla the network up front means the Largest Contentful Paint element może render sooner. dla iframes — ads, social widgets, comment sekcje, maps — deferring them również cuts main-thread działać podczas startup, który jest an Interaction to następny Paint win, nie just an LCP one. Google’s own web.dev guidance frames lazy-załadowany iframes as an INP improvement podczas strona load.

Native vs. JavaScript-driven lazy ładowanie

A kilka years ago, przeglądarki gained a native loading atrybut dla images i iframes, so you może hand the whole job to the przeglądarka zamiast wiring up a JavaScript API. In my SEO JavaScript poradnik at Ahrefs I make the same observation: since I pierwszy wrote że piece, lazy ładowanie ma mostly moved z będąc JavaScript-driven to będąc handled by przeglądarki. You’ll nadal run do JS-driven setups, i dla images they’re zwykle fine — the thing I sprawdzenie jest whether rzeczywisty treść (nie just images) jest będąc lazy załadowany, ponieważ tamte setups są the ones że mieć caused treść nie to być picked up correctly.

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>

zawsze ustawić explicit width/height (lub an aspect-ratio) on lazy images so the przeglądarka reserves the space przed the image loads — że’s the biggest layout-shift risk z deferred images. Reserved dimensions aren’t an absolute CLS guarantee, though: if the surrounding layout lub a responsive crop nadal changes po the image loads, you może nadal see a shift, so confirm z a rzeczywisty layout-shift trace zamiast assuming fixed dimensions alone settle it.

Lazy ładowanie i iframes need one więcej distinction: loading="lazy" on an <iframe> tylko defers gdy the embed’s fetch i creation happen. It doesn’t ustawić jego title, focus behavior, sandbox, allow/permissions polityka, referrerpolicy, zgoda handling, lub dimensions dla you — tamte nadal need ich own attention, i an embed może zachować doing działać (scripts, tracking pixels, layout) once it becomes eligible to load. i don’t assume “below the fold” behaves the same everywhere: display: none treść, offscreen carousel slides, transformed elementy, i nested scroll containers może intersect the viewport differently than a plain below-the-fold element, so test the rzeczywisty layout i navigation controls zamiast assuming equivalence.

The loading atrybut’s wartości

tylko two wartości matter today:

• loading="lazy" — defer the zasób until it’s near the viewport.
• loading="eager" — load it immediately, the domyślny behavior. używać it to być explicit o above-the-fold images.

You może see loading="auto" in older artykuły — it’s deprecated in Chrome, so don’t reach dla it. There’s no need to; omitting the atrybut już gives you the domyślny (eager) behavior.

How near jest “near”? loading="lazy" jest a hint, nie an author-controlled guarantee — the spec leaves the rzeczywisty near-viewport decision to the przeglądarka. Chromium tries to fetch a lazy zasób early enough że it’s ready by the time you scroll to it, i the trigger distance varies by przeglądarka, connection speed, i zasób type; it isn’t a fixed pixel wartość you może rely on lub reproduce w całym przeglądarki lub versions. Don’t publikować — lub trust — a specific “loads N pixels before the viewport” liczba; treat the near-viewport window as implementacja-defined i confirm rzeczywisty behavior z a Network trace on the przeglądarka/connection you care o zamiast assuming a constant.

Native lazy ładowanie również plays fine z responsive images: it applies to ordinary src i srcset/sizes selection, so you don’t lose responsive image behavior by adding loading="lazy". If you instead hide the rzeczywisty URL tylko in a data-* atrybut dla a script to swap in later, ładowanie now depends on że script — test the wyrenderowany HTML i co happens if the script fails (więcej on ten in the Scripts i Troubleshooting tabs).

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

ten jest the awaria I see najbardziej, i każdy źródło agrees on it. If you lazy-load the hero image — lub dowolny image prawdopodobny to być the LCP element — you’ve told the przeglądarka to wait on the single najbardziej ważny pixel dla perceived load speed. The przeglądarka również może’t lazy-load an image until it knows gdzie the image będzie sit on the strona, so lazy above-the-fold images tend to load więcej slowly than eager ones. że directly opóźnienia Largest Contentful Paint, the metric Google says powinien resolve w the pierwszy 2,5 seconds of load.

Splitt put the flip side plainly on the SOTR episode: if you’re nie używając lazy ładowanie gdzie you powinien, że będzie probably hurt niektóre aspect of Core Web Vitals — najbardziej prawdopodobny LCP. So it cuts oba ways. The reguła:

• Probable lub observed LCP candidate → load eagerly (omit loading="lazy", lub ustawić eager). Consider fetchpriority="high" on the LCP image.
• Below the fold → loading="lazy".

nie każdy image above the fold jest the LCP candidate — zidentyfikuj rzeczywisty one (a wydajność trace lub PageSpeed Insights będzie nazwa it) i verify jego żądanie timing zamiast treating każdy pierwszy-screen image the same. i te są oddzielny hints, nie one setting: loading="eager" (lub omitting loading) tylko means the przeglądarka won’t defer discovery of the zasób — it doesn’t itself raise fetch priority. fetchpriority jest a distinct, advisory hint on top of że. Stacking a <link rel="preload"> with ładowanie="lazy" on the same zasób wysyła the przeglądarka conflicting intent, so sprawdź rzeczywisty network waterfall zamiast assuming the combination robi co you expect.

The blanket anti-pattern jest switching on lazy ładowanie dla każdy image witryna-wide — a common CMS domyślny. As Splitt noted, if każdy image jest lazy załadowany, then images że są (lub powinien być) immediately visible get lazy załadowany too, który jest exactly the case you want to avoid.

How Googlebot renders lazy-załadowany treść

Here’s the crawling reality że trips people up: Googlebot doesn’t scroll, i it doesn’t click. It renders twój strona z a headless przeglądarka, ale it doesn’t simulate a użytkownik interacting z it. Google states ten directly — jego recommended lazy-ładowanie metody deliberately don’t rely on użytkownik actions like scrolling lub clicking, ponieważ Google Search robi nie interact z twój strona.

że’s why the how of twój implementacja matters. Google’s doc listy three implementacje it considers bezpieczny: the przeglądarka’s built-in lazy ładowanie dla images i iframes, the IntersectionObserver API (z a polyfill), lub a JavaScript library że loads data as it enters the viewport. wszystkie three key off viewport intersection — nie a scroll lub click event że Googlebot będzie nigdy fire.

The wysoki-risk pattern jest a custom lub third-party JS lazy-load library. If the library misbehaves i the image URL nigdy lands in the src atrybut, Google simply won’t pick że image up — Splitt described exactly ten awaria mode on the SOTR episode. There’s nothing to index if the URL isn’t there. ten jest the same thing I flag in my SEO JavaScript poradnik: image lazy ładowanie jest zwykle fine, ale lazy-załadowany treść jest gdzie indeksowanie problems creep in, i the fix jest to sprawdzenie co Google actually renders.

Infinite scroll jest a różny problem

Don’t conflate basic image/iframe lazy ładowanie z infinite scroll lub paginated ładowanie. Deferring images jest one thing; ładowanie new chunks of treść as the użytkownik scrolls jest another, i it needs jego own architektura. Google’s guidance: give każdy chunk a persistent, unique URL, zachowaj treść stable per URL (używać absolute strona liczby like ?page=12, nie relative wartości like ?date=yesterday), i update the displayed URL z the History API as każdy chunk becomes the primary visible treść so it może być refreshed, shared, i linked. Skip że i the deeper treść behind an endless scroll może nigdy być reliably crawled lub zindeksowany.

How to test it

The verification path jest the same in Google’s doc i in my own methodology: używać Search Console’s URL Inspection narzędzie i look at the wyrenderowany HTML. If twój image (lub video) URLs appear in the src atrybut on the <img>/<video> elementy in że wyrenderowany HTML, twój setup działa. Google says ten outright — sprawdź wyrenderowany HTML to upewnij się twój treść jest in it. If the URL jest missing z src, że’s twój problem, i it zwykle points back to a scroll/click trigger lub a broken library.

dla a lazy-załadowany produkt grid, go beyond ten presence sprawdzenie. Run the Infinite Scroll SEO testing matrix z standard i tall viewports, fresh navigation i post-load resizing, no-action i incremental-scroll runs, unique produkt-link counts, i accessibility-tree inspection. Resizing an initialized strona jest nie equivalent to navigating at the final viewport size ponieważ observers i batch calculations może być registered tylko podczas 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

You może również lean on twój web-wydajność tooling: PageSpeed Insights flags off-screen images you powinien być deferring. In my PageSpeed Insights poradnik at Ahrefs I note że the “defer offscreen elements” audit jest telling you to lazy-load images — a handy way to connect the diagnostic you już run to the fix.

Ranking-signal honesty

być jasny o co lazy ładowanie jest i isn’t. używając it jest nie a bezpośredni ranking factor, i nie używając it isn’t a penalty. The connection to rankings jest indirect: it flows przez Core Web Vitals (mainly LCP, czasami INP dla iframes) i przez możliwość indeksowania, if a bad implementacja hides treść. Splitt characterized the ranking effect przez Core Web Vitals as a tiny, minute factor in najbardziej cases. So optimize lazy ładowanie dla twój użytkownicy’ load experience i dla clean indeksowanie — nie ponieważ you expect a ranking bump z the atrybut itself.

gdzie ten fits

Lazy ładowanie jest one lever in the broader web wydajność toolkit. It pairs z zasób hints (preload/preconnect dla the zasoby you robić want early), font-ładowanie strategy, buforowanie, i a CDN — i it’s judged, ultimately, przez Core Web Vitals. Get the above-the-fold/below-the-fold split right i it’s one of the cheapest wins available.

AI summary

A condensed take on the Advanced version:

• Lazy ładowanie defers off-screen images i iframes until they near the viewport — cutting initial strona weight i startup działać. The native, no-JS way jest loading="lazy" on <img> i <iframe>; it ma largely replaced JS libraries. It’s a przeglądarka hint, nie a guaranteed distance lub timing — the trigger point varies by przeglądarka, connection, i zasób type, so don’t rely on a fixed pixel liczba.
• wartości: tylko lazy i eager matter. auto jest deprecated in Chrome.
• Core Web Vitals link: fewer up-front bytes pomagać LCP; deferring iframes cuts main-thread działać at startup, helping INP. ustawić width/height so deferred images don’t cause CLS — though reserved dimensions alone don’t guarantee zero shift if the surrounding layout nadal changes.
• #1 mistake: lazy-ładowanie the probable/observed LCP image, nie just dowolny above-the-fold image. It opóźnienia Largest Contentful Paint, który Google says powinien resolve w 2,5s. eager/omitting loading tylko affects discovery — it doesn’t itself raise fetch priority; fetchpriority jest a oddzielny hint, i stacking preload z loading="lazy" on the same zasób conflicts. Blanket witryna-wide lazy ładowanie jest the common CMS anti-pattern.
• Iframes get ich own contract: loading="lazy" tylko defers fetch/creation timing — tytuł, sandbox, permissions polityka, referrer polityka, zgoda, i dimensions nadal need setting independently, i hidden/carousel/transformed layouts może intersect the viewport differently than a plain below-the-fold element.
• Googlebot doesn’t scroll lub click. dowolny treść gated behind scroll/click events może go unseen. Google’s bezpieczny metody — native lazy ładowanie, IntersectionObserver, lub a well-behaved JS library — wszystkie key off viewport intersection.
• Highest risk: custom/third-party JS lazy-load libraries. If the URL nigdy lands in src, Google won’t index the image (per Martin Splitt).
• Infinite scroll jest distinct: it needs unique paginated URLs + History API.
• Verify in Search Console URL Inspection → wyrenderowany HTML → image URLs present in the src atrybut.
• nie a bezpośredni czynnik rankingowy. The effect jest indirect, via Core Web Vitals i możliwość indeksowania, i Splitt called the Core-Web-Vitals ranking effect tiny.

Official documentation

Primary-źródło guidance z the wyszukiwarki i Google’s web.dev.

Google — Search Central

• Fix Lazy-załadowany Website treść — the definitive doc: bezpieczny implementacja metody, the “Google doesn’t interact with your page” reguła, infinite-scroll/paginated-ładowanie requirements, i how to verify in wyrenderowany HTML.
• Understand SEO JavaScript Basics — recommends lazy ładowanie images as a przepustowość/wydajność dobra praktyka i links out to the dedicated poradnik.
• Core Web Vitals — why lazy-ładowanie the LCP element jest self-defeating (LCP target jest 2,5s).

Google — web.dev (Learn wydajność)

• Lazy load images i <iframe> elementy — gdy to defer, i the INP benefit of lazy iframes.
• przeglądarka-level image lazy ładowanie dla the web — the native atrybut, i why nie to lazy-load in-viewport/LCP images.
• It’s time to lazy-load offscreen iframes! — the iframe-specific case (ads, widgets, maps).
• przeglądarka-level lazy ładowanie dla CMSs — guidance dla CMS platformy.

Google — podcast

• Search Off the Record — Ep. 98, “Lazy loading demystified” (Aug 21, 2025) — John Mueller i Martin Splitt on lazy ładowanie, renderowanie, indeksowanie, i Core Web Vitals. również zindeksowany on Google’s Search Off the Record strona.

programista reference (nie SEO-specific, ale authoritative on the API)

• MDN — Lazy ładowanie (wydajność poradnik)
• MDN — HTMLImageElement: ładowanie właściwość
• caniuse — Lazy ładowanie via atrybut dla images & iframes

Bing / Microsoft

• Bing publishes no dedicated lazy-ładowanie document. jego general Webmaster Guidelines cover crawling i JS renderowanie broadly. Bingbot renders z a Chromium-oparty headless przeglądarka i, like Googlebot, robi nie scroll lub click — so the same native loading="lazy" / IntersectionObserver approach że satisfies Google powinien satisfy Bing. że ostatni point jest an inference z Bingbot’s general renderowanie behavior, nie a sourced Bing statement o lazy ładowanie — treat it accordingly.

cytaty z the źródło

On-the-record statements z Google’s official documentation. każdy link jest a deep link że jumps to the quoted passage on the źródło strona.

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

Lazy-ładowanie checklist

Run ten przed you ship a lazy-ładowanie change:

• The hero / LCP image jest nie lazy-załadowany — it loads eagerly (omit loading="lazy"), ideally z fetchpriority="high".
• loading="lazy" jest applied to images i iframes że sit below the fold.
• Lazy images mieć explicit width/height (lub aspect-ratio) so they don’t cause layout shift (CLS) gdy they load in.
• No treść jest gated behind a scroll lub click event — Googlebot won’t fire tamte. używać native lazy ładowanie lub IntersectionObserver instead.
• You’re nie używając the deprecated loading="auto" wartość — tylko lazy/eager.
• Off-screen iframes (embeds, ads, maps, widgets) używać loading="lazy" to cut startup main-thread działać.
• Lazy-załadowany iframes nadal mieć ich own title, sandbox, allow/permissions polityka, referrerpolicy, i explicit dimensions — loading="lazy" tylko defers fetch timing, nie tamte atrybuty.
• Verified in Search Console URL Inspection → wyrenderowany HTML że image/video URLs appear in the src atrybut.
• If używając a third-party JS lazy-load library, confirmed the src nadal ends up populated in the wyrenderowany HTML.
• dla infinite scroll, każdy chunk ma a unique, persistent, paginated URL i the History API updates the displayed URL.
• PageSpeed Insights’ “defer offscreen images” flags są addressed.

Lazy-ładowanie anti-patterns (myths i mistakes)

każdy of te jest a common belief lub habit, why it’s błędny, i co to robić instead.

“Lazy loading is always good, so apply it to every image.” Why it’s błędny: blanket witryna-wide lazy ładowanie catches twój hero/LCP image too, który opóźnienia Largest Contentful Paint — the opposite of the speed win you wanted. robić instead: lazy-load below-the-fold tylko; load above-the-fold images eagerly.

“Google doesn’t index lazy-loaded content at all.” Why it’s błędny: Google crawls i indexes lazy-załadowany treść fine gdy it’s done z native lazy ładowanie, IntersectionObserver, lub a well-behaved library. The risk jest specific to scroll/click-gated lub broken setups — per Google’s own wording, the problem jest gdy it’s “not implemented correctly.” robić instead: używać a viewport-intersection metoda i verify in wyrenderowany HTML.

“loading='auto' is a good default.” Why it’s błędny: auto jest deprecated in Chrome; recommending it jest stale advice. robić instead: używać lazy dla off-screen zasoby, eager (lub nothing) dla the rest.

“Lazy loading and infinite scroll are the same fix.” Why it’s błędny: they’re distinct. Infinite scroll additionally needs unique paginated URLs i History API updates, lub the deeper treść może nigdy być crawled reliably. robić instead: treat paginated/infinite ładowanie as jego own architektura z per-chunk URLs.

“loading='lazy' works on any element.” Why it’s błędny: it’s określony dla <img> i <iframe>. obsługiwać dla other elementy isn’t part of the core spec the same way. robić instead: użyj atrybut on images i iframes; handle other media z an appropriate technique (dla video, a poster image że loads the video on viewport entry).

“Lazy loading hurts SEO.” Why it’s błędny: lazy ładowanie itself isn’t a penalty. The ranking-relevant effect runs przez Core Web Vitals i jest mały; poor implementacja jest co hurts, nie the technique. robić instead: implement it correctly, exclude the LCP image, i verify co renders.

Lazy-ładowanie cheat sheet

The loading atrybut

który elementy obsługiwać it

• <img> — yes
• <iframe> — yes
• Other elementy (video/audio) — nie part of the core spec the same way; używać a poster-image + load-on-view pattern dla video.

Above vs. below the fold

• Above the fold / prawdopodobny LCP → eager (nigdy lazy). dodawać fetchpriority="high" to the LCP image.
• Below the fold → lazy.

Core Web Vitals impact

• Deferring off-screen images → pomaga LCP (fewer bytes compete up front).
• Deferring off-screen iframes → pomaga INP (mniej startup main-thread działać).
• Missing width/height on lazy images → może hurt CLS (layout shift on load).

reguły Googlebot cares o

• Googlebot doesn’t scroll lub click — no scroll/click-gated treść.
• bezpieczny metody: native loading="lazy", IntersectionObserver, well-behaved JS library.
• Verify: URL Inspection → wyrenderowany HTML → image URL in the src atrybut.
• Infinite scroll ≠ image lazy ładowanie — needs unique paginated URLs + History API.

przed / po

Concrete fixes, framed the way you’d hit them in an audit.

1. The hero image jest lazy-załadowany (LCP delayed)

przed:

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

po:

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

Why: the hero jest the LCP element. Eager-ładowanie it (i prioritizing the fetch) lets it paint sooner. Lazy-ładowanie it robi the opposite.

2. witryna-wide blanket lazy ładowanie z a CMS domyślny

przed: każdy <img> on the template carries loading="lazy", w tym the header logo i the top-of-strona featured image. po: the template loads above-the-fold images eagerly i tylko applies loading="lazy" to images wyrenderowany below the initial viewport. Why: blanket lazy ładowanie catches the images że są visible immediately, delaying co the użytkownik (i LCP) sees pierwszy.

3. Off-screen embed ładowanie on strona load

przed:

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

po:

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

Why: the map jest below the fold. Deferring it removes jego startup cost i pomaga INP, since embeds robić main-thread działać podczas gdy the strona jest ładowanie.

4. Custom JS lazy-load leaves src empty dla Googlebot

przed: a library sklepy the rzeczywisty URL in data-src i swaps it do src on a scroll event — który Googlebot nigdy fires, so the wyrenderowany HTML pokazuje an empty/placeholder src. po: używać native loading="lazy" (rzeczywisty URL in src z the start), lub an IntersectionObserver-oparty library, then confirm in URL Inspection że the URL jest present in the wyrenderowany src. Why: if the URL isn’t in src in the wyrenderowany HTML, Google może’t pick the image up.

Find images że powinien (lub shouldn’t) być lazy-załadowany

A DevTools Console snippet you może paste on dowolny strona to audit the loading atrybut. It listy images z ich loading wartość i whether they’re currently in the viewport — so you może spot an above-the-fold image marked lazy, lub a below-the-fold one że 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 twój źródło dla risky lazy-load patterns

sprawdzenie twój templates/build output dla the deprecated auto wartość i dla data-src-style JS lazy ładowanie (który może leave src empty dla 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 confirm the rzeczywisty URL ends up in the wyrenderowany src, który you verify in Search Console URL Inspection.

Hero image starts later po enabling lazy ładowanie

Symptom: LCP gets slower i the hero żądanie begins late in the waterfall.

prawdopodobny cause: A global CMS reguła added loading="lazy" to an above-the-fold lub LCP image.

Fix i confirmation: usuń lazy atrybut z że image, optionally dodawać fetchpriority="high", i confirm jego żądanie starts earlier in a matched trace.

Lazy image appears ale shifts the strona

Symptom: treść jumps gdy a deferred image enters the viewport.

prawdopodobny cause: The image ma no explicit dimensions lub reserved aspect ratio.

Fix i confirmation: dodawać width i height atrybuty lub reserve the same aspect ratio in CSS. Reload z layout-shift regions enabled i verify the image no longer moves surrounding treść.

Google robi nie see deferred treść

Symptom: A wyrenderowany inspection jest missing the image URL lub treść że appears po a człowiek scrolls.

prawdopodobny cause: A scroll/click handler nigdy runs dla Googlebot, lub a lazy-load library leaves the rzeczywisty URL in data-src zamiast the wyrenderowany src.

Fix i confirmation: używać native lazy ładowanie lub an IntersectionObserver-oparty implementacja, then inspect the wyrenderowany HTML i confirm the final URL i treść są present bez interaction.

Off-screen embed nadal loads immediately

Symptom: A below-the-fold iframe appears in the initial waterfall despite a lazy-ładowanie change.

prawdopodobny cause: The atrybut jest absent z the deployed iframe, a wrapper creates the iframe eagerly, lub the embed sits close enough to the viewport dla the przeglądarka’s load threshold.

Fix i confirmation: Inspect the live DOM i żądanie initiator, test on a long strona z a cold pamięć podręczna, i verify the żądanie jest deferred until the przeglądarka’s near-viewport threshold.

narzędzia dla implementacja i proof

• Chrome DevTools elementy i Network panels: confirm the deployed loading atrybut, identyfikować który script created an iframe, i porównywać żądanie start times przed i po a change.
• Chrome DevTools wydajność panel: record a load i verify że deferring an embed reduces startup main-thread działać bez delaying the LCP image.
• PageSpeed Insights: użyj off-screen-image diagnostic as a starting lista, then oddzielny prawdziwy below-the-fold candidates z the hero lub other immediate treść.
• Search Console URL Inspection: inspect wyrenderowany HTML i verify że deferred image URLs end up in src i że lazy-załadowany treść exists bez a scroll lub click.
• The przeglądarka viewport i filmstrip: test więcej niż one viewport size. An image below the fold on komputer stacjonarny może być above the fold on a smaller lub differently shaped urządzenie.

Below-the-fold image deferral

Test to run: Record a cold-load Network trace przed i po adding native lazy ładowanie to an image well below the initial viewport.

Expected wynik: The image żądanie jest absent z the initial critical waterfall i begins as the viewport approaches it.

awaria interpretation: The deployed znaczniki lacks the atrybut, JavaScript creates lub fetches the image eagerly, lub the test image jest w the przeglądarka’s near-viewport threshold.

monitorowanie window: sprawdzenie immediately po deployment w całym representative mobilny i komputer stacjonarny viewport sizes.

Rollback trigger: Roll back if an image visible on initial load jest deferred lub if the image routinely fails to appear przed the użytkownik reaches it.

LCP-image exclusion

Test to run: porównywać matched wydajność traces i żądanie waterfalls dla the strona’s LCP image po removing blanket lazy ładowanie.

Expected wynik: The LCP image loads eagerly, jego żądanie starts earlier, i LCP robi nie regress.

awaria interpretation: Another template lub optymalizacja warstwa re-dodaje the atrybut, lub discovery jest nadal delayed by CSS, JavaScript, lub znaczniki.

monitorowanie window: sprawdzenie repeated lab runs immediately, then watch pole LCP ponad the following reporting window.

Rollback trigger: Roll back the surrounding rollout if the change opóźnienia other critical zasoby enough to cause a repeatable LCP regression.

wyrenderowany-treść visibility

Test to run: używać URL Inspection to view wyrenderowany HTML bez interacting z the strona i search dla the deferred image URL i associated treść.

Expected wynik: The final URL appears in src, i ważny treść jest present in the wyrenderowany HTML.

awaria interpretation: The implementacja depends on a scroll/click event lub the lazy-load script failed podczas renderowanie.

monitorowanie window: Test każdy affected template po release i po changing the lazy-load library lub CMS image pipeline.

Rollback trigger: Roll back if indeksowalny treść lub image URLs disappear z the wyrenderowany output.

Test yourself: Lazy ładowanie

Five quick questions on deferring images i iframes bez hurting Core Web Vitals lub indeksowanie. Pick an answer dla każdy, then sprawdzenie.

zasoby worth twój time

My powiązany writing

• SEO JavaScript problemy & dobre praktyki — gdzie I cover the shift z JS-driven to przeglądarka-native lazy ładowanie, i why lazy-załadowany treść (nie just images) jest the indeksowanie risk.
• Google PageSpeed Insights dla SEOs & programiści — connects the “defer offscreen images” audit to lazy ładowanie, plus the rest of the PSI raport.
• The Beginner’s poradnik to techniczne SEO — gdzie wydajność i renderowanie fit in the bigger picture.

z around the industry

• Fix Lazy-załadowany Website treść (Google Search Central) — the definitive implementacja-i-testing doc.
• przeglądarka-level image lazy ładowanie dla the web (web.dev) — the native atrybut i the LCP caveat, straight z Google’s wydajność zespół.
• It’s time to lazy-load offscreen iframes! (web.dev) — the iframe case i jego startup/INP benefit.
• Lazy ładowanie demystified — Search Off the Record, Ep. 98 (Google) — Mueller i Splitt’s pełny episode on lazy ładowanie, renderowanie, indeksowanie, i Core Web Vitals.
• Lazy ładowanie explained: Speed up twój witryna & UX fast (wyszukiwarka Land) — a thorough industry poradnik z CMS-specific notes.
• Lazy ładowanie (wydajność poradnik) (MDN) — the programista-reference view of the API.
• A lazy ładowanie primer dla możliwość indeksowania & indeksowanie sukces (Oncrawl) — the crawl/index angle in depth.

Dziennik zmian