Lazy memuat

TL;DR — Lazy memuat memberi tahu peramban untuk hold off downloading gambar dan embeds until Anda adalah tentang untuk menggulir untuk them, jadi halaman memuat faster di awal. mudah, no-code cara adalah untuk tambahkan loading="lazy" untuk sebuah <img> atau <iframe>. satu aturan untuk remember: tidak lazy-muat besar gambar di atas dari halaman — itu membuat halaman feel slower, tidak faster.

Apa lazy memuat adalah

Normally, ketika sebuah peramban opens sebuah halaman, ini tries untuk mengunduh semuanya pada ini — setiap gambar, setiap embedded map atau video — segera. pada sebuah panjang halaman dengan lots dari gambar, itu’s sebuah lot dari downloading untuk stuff Anda mungkin tidak pernah menggulir turun untuk melihat.

Lazy memuat fixes itu. ini defers memuat off-screen gambar dan embeds until Anda adalah tentang untuk menggulir them ke view. halaman menampilkan Anda apa’s di atas quickly, dan rest memuat sebagai Anda go. Lebih sedikit data di awal berarti sebuah faster pertama impression, plus savings pada bandwidth dan battery — yang penting sebagian besar pada phones.

mudah cara: loading atribut

Anda digunakan untuk perlu sebuah JavaScript library untuk melakukan ini. Tidak anymore. Modern peramban memiliki ini dibangun di. Anda hanya tambahkan satu atribut:

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

itu’s ini. ini berfungsi pada <img> dan <iframe> (think embedded YouTube video, Google Maps, social widgets) di setiap major peramban, dengan tidak JavaScript.

satu mistake untuk hindari

tidak lazy-muat besar gambar di atas dari halaman — hero gambar, hal orang melihat pertama. Lazy memuat memberi tahu peramban “this can wait,” (terjemahan) “ini dapat wait,” jadi sebuah lazy-dimuat atas gambar memuat later daripada ini seharusnya, dan halaman feels slower. Google’s own panduan adalah untuk skip lazy memuat untuk anything itu’s terlihat segera ketika halaman opens.

pendek versi: lazy-muat stuff di bawah fold, muat stuff di atas fold normally.

melakukan ini hurt SEO?

oleh itu sendiri, tidak. Google dapat indeks lazy-dimuat gambar dan konten hanya fine ketika ini adalah done normal cara. trouble memulai hanya ketika sebuah halaman hides konten di balik scrolling atau clicking — karena mesin pencari tidak menggulir atau mengklik. jika Anda gambar hanya gunakan loading="lazy", Anda adalah fine. ingin detail pada cara Google sebenarnya melihat ini, dan cara periksa ini? Switch untuk Advanced tab.

TL;DR — Lazy memuat defers off-screen gambar dan iframes until mereka dekat area pandang, cutting initial halaman weight (membantu LCP) dan startup main-thread berfungsi (membantu INP). native loading="lazy" atribut pada <img>/<iframe> memiliki replaced sebagian besar JS libraries; hanya lazy dan eager adalah bermakna nilai (auto adalah deprecated). damaging mistakes: lazy-memuat LCP/above—fold gambar (delays very metric Anda adalah chasing), dan gating konten di balik menggulir/mengklik — yang Googlebot tidak pernah triggers karena ini tidak interact dengan halaman. ini adalah tidak sebuah langsung peringkat faktor; effect berjalan melalui Core web Vitals dan crawlability. Memverifikasi di Pencarian Console’s pemeriksaan URL alat itu gambar URLs land di src atribut dari dirender HTML.

Apa lazy memuat sebenarnya melakukan

idea adalah sederhana: hanya muat resources ketika Anda perlu them, alih-alih memuat semuanya di sekali. pada sebuah media-heavy halaman, downloading setiap gambar dan embed di awal mempertahankan peramban busy fetching hal pengunjung dapat tidak pernah menggulir untuk — burning bandwidth, memory, dan battery untuk tidak ada. Deferring off-screen ones lets above—fold konten paint sooner. Martin Splitt dibuat tepat ini poin pada Google’s Pencarian Off Record episode “Pemuatan lambat demystified” (terjemahan) “Lazy memuat demystified”: goal adalah untuk hindari berfungsi itu yields tidak ada, karena non-critical gambar halaman akan menjadi fine tanpa hanya pertahankan peramban occupied.

ini connects untuk Core web Vitals sebagian besar orang adalah chasing. Fewer bytes competing untuk network di awal berarti Largest Contentful Paint element dapat merender sooner. untuk iframes — ads, social widgets, comment bagian, maps — deferring them juga cuts main-thread berfungsi selama startup, yang adalah sebuah Interaction untuk Next Paint win, tidak hanya sebuah LCP satu. Google’s own web.dev panduan frames lazy-dimuat iframes sebagai sebuah INP improvement selama pemuatan halaman.

Native vs. JavaScript-driven lazy memuat

sebuah sedikit tahun ago, peramban gained sebuah native loading atribut untuk gambar dan iframes, jadi Anda dapat hand seluruh job untuk peramban alih-alih wiring naik sebuah JavaScript API. di my JavaScript SEO panduan di Ahrefs I membuat sama observation: sejak I pertama wrote itu piece, lazy memuat memiliki mostly moved dari menjadi JavaScript-driven untuk menjadi handled oleh peramban. Anda akan masih menjalankan ke JS-driven setups, dan untuk gambar mereka’re biasanya fine — hal I periksa adalah apakah aktual konten (tidak hanya gambar) adalah menjadi lazy dimuat, karena itu setups adalah ones itu memiliki caused konten tidak untuk menjadi picked naik correctly.

native versi:

<!-- 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>

selalu menetapkan eksplisit width/height (atau sebuah aspect-ratio) pada lazy gambar jadi peramban reserves space sebelum gambar memuat — itu’s biggest layout-shift risk dengan deferred gambar. Reserved dimensions bukan sebuah absolute CLS jaminan, though: jika surrounding layout atau sebuah responsive crop masih perubahan setelah gambar memuat, Anda dapat masih melihat sebuah shift, jadi confirm dengan sebuah nyata layout-shift trace alih-alih assuming fixed dimensions saja settle ini.

Lazy memuat dan iframes perlu satu lebih perbedaan: loading="lazy" pada sebuah <iframe> hanya defers ketika embed’s fetch dan creation happen. ini tidak menetapkan -nya title, focus perilaku, sandbox, allow/permissions kebijakan, referrerpolicy, consent handling, atau dimensions untuk Anda — itu masih perlu mereka own attention, dan sebuah embed dapat pertahankan melakukan berfungsi (scripts, tracking pixels, layout) sekali ini becomes memenuhi syarat untuk muat. dan don’t assume “bagian bawah halaman” (terjemahan) “di bawah fold” behaves yang sama di mana-mana: display: none konten, offscreen carousel slides, transformed elements, dan nested menggulir containers dapat intersect area pandang differently daripada sebuah plain below—fold element, jadi uji aktual layout dan navigation kontrol alih-alih assuming equivalence.

loading atribut’s nilai

hanya dua nilai penting today:

• loading="lazy" — defer resource until ini adalah dekat area pandang.
• loading="eager" — muat ini segera, bawaan perilaku. gunakan ini untuk menjadi eksplisit tentang above—fold gambar.

Anda dapat melihat loading="auto" di older artikel — ini adalah deprecated di Chrome, jadi tidak jangkauan untuk ini. ada tidak perlu untuk; menghilangkan atribut sudah memberikan Anda bawaan (eager) perilaku.

Cara dekat adalah “dekat” (terjemahan) “dekat”? loading="lazy" adalah sebuah hint, tidak sebuah author-controlled jaminan — spec leaves aktual near-viewport decision untuk peramban. Chromium tries untuk fetch sebuah lazy resource lebih awal enough itu ini adalah ready oleh waktu Anda menggulir untuk ini, dan trigger distance varies oleh peramban, connection speed, dan resource jenis; ini bukan sebuah fixed pixel nilai Anda dapat rely pada atau reproduce di seluruh peramban atau versi. tidak menerbitkan — atau kepercayaan — sebuah spesifik “loads N pixels before the viewport” (terjemahan) “memuat N pixels sebelum area pandang” angka; treat near-viewport window sebagai implementation-defined dan confirm aktual perilaku dengan sebuah Network trace pada peramban/connection Anda care tentang alih-alih assuming sebuah constant.

Native lazy memuat juga plays fine dengan responsive gambar: ini applies untuk ordinary src dan srcset/sizes selection, jadi Anda tidak lose responsive gambar perilaku oleh menambahkan loading="lazy". jika Anda sebagai gantinya hide nyata URL hanya di sebuah data-* atribut untuk sebuah script untuk mengganti di later, memuat sekarang depends pada itu script — uji dirender HTML dan apa happens jika script fails (lebih pada ini di Scripts dan Troubleshooting tabs).

#1 mistake: lazy-memuat LCP / above—fold gambar

ini adalah failure I melihat sebagian besar, dan setiap sumber agrees pada ini. jika Anda lazy-muat hero gambar — atau apa pun gambar mungkin untuk menjadi LCP element — Anda telah told peramban untuk wait pada single sebagian besar penting pixel untuk perceived muat speed. peramban juga dapat’t lazy-muat sebuah gambar until ini mengetahui tempat gambar akan sit pada halaman, jadi lazy above—fold gambar tend untuk muat lebih slowly daripada eager ones. itu langsung delays Largest Contentful Paint, metric Google mengatakan seharusnya resolve di dalam pertama 2,5 detik dari muat.

Splitt menempatkan flip side plainly pada SOTR episode: jika Anda adalah tidak menggunakan lazy memuat tempat Anda harus, itu akan probably hurt beberapa aspect dari Core web Vitals — sebagian besar mungkin LCP. Jadi ini cuts keduanya cara. aturan:

• Probable atau observed LCP candidate → muat eagerly (omit loading="lazy", atau menetapkan eager). pertimbangkan fetchpriority="high" pada LCP gambar.
• Di bawah fold → loading="lazy".

Tidak setiap gambar di atas fold adalah LCP candidate — identify aktual satu (sebuah performa trace atau PageSpeed Insights akan name ini) dan memverifikasi -nya permintaan timing alih-alih treating setiap pertama-screen gambar yang sama. dan ini adalah terpisah hints, tidak satu setting: loading="eager" (atau menghilangkan loading) hanya berarti peramban tidak dapat defer penemuan dari resource — ini tidak itu sendiri raise fetch prioritas. fetchpriority adalah sebuah distinct, advisory hint pada atas dari itu. Stacking sebuah <link rel="preload"> dengan loading="lazy" pada yang sama resource mengirim peramban conflicting maksud, jadi periksa aktual network waterfall alih-alih assuming combination melakukan apa Anda expect.

blanket anti-pattern adalah switching pada lazy memuat untuk setiap gambar situs-wide — sebuah umum CMS bawaan. sebagai Splitt noted, jika setiap gambar adalah lazy dimuat, lalu gambar itu adalah (atau seharusnya menjadi) segera terlihat mendapatkan lazy dimuat too, yang adalah tepat kasus Anda ingin hindari.

Cara Googlebot renders lazy-dimuat konten

Here’s crawling reality itu trips orang naik: Googlebot tidak menggulir, dan ini tidak mengklik. ini renders Anda halaman dengan sebuah headless peramban, tetapi ini tidak simulate sebuah pengguna interacting dengan ini. Google menyatakan ini langsung — -nya direkomendasikan lazy-memuat metode deliberately tidak rely pada pengguna tindakan seperti scrolling atau clicking, karena Google Pencarian melakukan tidak interact dengan Anda halaman.

“The methods mentioned don’t” (terjemahan) “methods mentioned jangan”

itu’s mengapa cara dari Anda implementation penting. Google’s doc lists tiga implementations ini mempertimbangkan safe: peramban’s dibangun-di lazy memuat untuk gambar dan iframes, IntersectionObserver API (dengan sebuah polyfill), atau sebuah JavaScript library itu memuat data sebagai ini enters area pandang. semua tiga key off area pandang intersection — tidak sebuah menggulir atau mengklik event itu Googlebot akan tidak pernah fire.

tinggi-risk pattern adalah sebuah custom atau ketiga-party JS lazy-muat library. jika library misbehaves dan gambar URL tidak pernah lands di src atribut, Google cukup tidak dapat pick itu gambar naik — Splitt described tepat ini failure mode pada SOTR episode. ada tidak ada untuk indeks jika URL bukan ada. ini adalah yang sama hal I flag di my JavaScript SEO panduan: gambar lazy memuat adalah biasanya fine, tetapi lazy-dimuat konten adalah tempat pengindeksan masalah creep di, dan fix adalah untuk periksa apa Google sebenarnya renders.

Infinite menggulir adalah sebuah berbeda masalah

tidak conflate basic gambar/iframe lazy memuat dengan infinite menggulir atau paginated memuat. Deferring gambar adalah satu hal; memuat baru chunks dari konten sebagai pengguna scrolls adalah lainnya, dan ini perlu -nya own architecture. Google’s panduan: memberikan setiap chunk sebuah persistent, unik URL, pertahankan konten stable per URL (gunakan absolute halaman angka seperti ?page=12, tidak relative nilai seperti ?date=yesterday), dan update displayed URL dengan History API sebagai setiap chunk becomes primary terlihat konten jadi ini dapat menjadi refreshed, shared, dan ditautkan. Skip itu dan deeper konten di balik sebuah endless menggulir dapat tidak pernah menjadi reliably di-crawl atau terindeks.

cara uji ini

verification path adalah yang sama di Google’s doc dan di my own methodology: gunakan Pencarian Console’s pemeriksaan URL alat dan lihat dirender HTML. jika Anda gambar (atau video) URLs muncul di src atribut pada <img>/<video> elements di itu dirender HTML, Anda setup berfungsi. Google mengatakan ini outright — periksa dirender HTML untuk pastikan Anda konten adalah di ini. jika URL adalah hilang dari src, itu’s Anda masalah, dan ini biasanya poin kembali untuk sebuah menggulir/mengklik trigger atau sebuah broken library.

“Check rendered HTML to make” (terjemahan) “Check rendered HTML to make” “Check the rendered HTML to make sure your” (terjemahan) “Check rendered HTML to make sure Anda”

untuk sebuah lazy-dimuat produk grid, go beyond ini presence periksa. Menjalankan Infinite Menggulir SEO testing matrix dengan standar dan tall viewports, fresh navigation dan post-muat resizing, no-tindakan dan incremental-scroll berjalan, unik product-tautan menghitung, dan accessibility-tree inspection. Resizing sebuah initialized halaman adalah tidak equivalent untuk navigating di akhir area pandang ukuran karena observers dan batch calculations dapat menjadi registered hanya selama 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

Anda dapat juga lean pada Anda web-performa tooling: PageSpeed Insights flags off-screen gambar Anda harus menjadi deferring. di my PageSpeed Insights panduan di Ahrefs I catatan itu “defer offscreen elements” (terjemahan) “defer offscreen elements” audit adalah telling Anda untuk lazy-muat gambar — sebuah handy cara untuk connect diagnostic Anda sudah menjalankan untuk fix.

peringkat-signal honesty

menjadi jelas tentang apa lazy memuat adalah dan bukan. menggunakan ini adalah tidak sebuah langsung peringkat faktor, dan tidak menggunakan ini bukan sebuah penalti. connection untuk rankings adalah indirect: ini alur melalui Core web Vitals (mainly LCP, terkadang INP untuk iframes) dan melalui crawlability, jika sebuah buruk implementation hides konten. Splitt characterized peringkat effect melalui Core web Vitals sebagai sebuah tiny, minute faktor dalam kebanyakan kasus. Jadi mengoptimalkan lazy memuat untuk Anda pengguna’ muat experience dan untuk murni pengindeksan — tidak karena Anda expect sebuah peringkat bump dari atribut itu sendiri.

Tempat ini fits

Lazy memuat adalah satu lever di broader web performa toolkit. ini pairs dengan resource hints (preload/preconnect untuk resources Anda melakukan ingin lebih awal), font-memuat strategy, caching, dan sebuah CDN — dan ini adalah judged, ultimately, melalui Core web Vitals. Mendapatkan above—fold/below—fold split tepat dan ini adalah satu dari cheapest wins available.

AI summary

sebuah condensed take pada Advanced versi:

• Lazy memuat defers off-screen gambar dan iframes until mereka dekat area pandang — cutting initial halaman weight dan startup berfungsi. native, no-JS cara adalah loading="lazy" pada <img> dan <iframe>; ini memiliki largely replaced JS libraries. ini adalah sebuah peramban hint, tidak sebuah guaranteed distance atau timing — trigger poin varies oleh peramban, connection, dan resource jenis, jadi tidak rely pada sebuah fixed pixel angka.
• nilai: hanya lazy dan eager penting. auto adalah deprecated di Chrome.
• Core web Vitals tautan: fewer up-front bytes membantu LCP; deferring iframes cuts main-thread berfungsi di startup, helping INP. Menetapkan width/height jadi deferred gambar don’t cause CLS — though reserved dimensions alone don’t jaminan nol shift jika surrounding layout masih perubahan.
• #1 mistake: lazy-memuat probable/observed LCP gambar, tidak hanya apa pun above—fold gambar. ini delays Largest Contentful Paint, yang Google mengatakan seharusnya resolve di dalam 2,5s. eager/menghilangkan loading hanya affects penemuan — ini tidak itu sendiri raise fetch prioritas; fetchpriority adalah sebuah terpisah hint, dan stacking preload dengan loading="lazy" pada yang sama resource conflicts. Blanket situs-wide lazy memuat adalah umum CMS anti-pattern.
• Iframes mendapatkan mereka own contract: loading="lazy" hanya defers fetch/creation timing — judul, sandbox, permissions kebijakan, referrer kebijakan, consent, dan dimensions masih perlu setting independently, dan hidden/carousel/transformed layouts dapat intersect area pandang differently daripada sebuah plain below—fold element.
• Googlebot tidak menggulir atau mengklik. apa pun konten gated di balik menggulir/mengklik events dapat go unseen. Google’s safe metode — native lazy memuat, IntersectionObserver, atau sebuah well-behaved JS library — semua key off area pandang intersection.
• Highest risk: custom/ketiga-party JS lazy-muat libraries. jika URL tidak pernah lands di src, Google tidak dapat indeks gambar (per Martin Splitt).
• Infinite menggulir adalah distinct: ini perlu unik paginated URLs + History API.
• Memverifikasi di Pencarian Console pemeriksaan URL → dirender HTML → gambar URLs present di src atribut.
• Tidak sebuah langsung peringkat faktor. effect adalah indirect, via Core web Vitals dan crawlability, dan Splitt called Core-Web-Vitals peringkat effect tiny.

Official documentation

Primary-source panduan dari mesin pencari dan Google’s web.dev.

Google — Pencarian Pusat

• Fix Lazy-dimuat situs web konten — definitive doc: safe implementation metode, “Google doesn’t interact dengan Anda halaman” (terjemahan) “Google tidak interact dengan Anda halaman” aturan, infinite-scroll/paginated-memuat requirements, dan cara memverifikasi di dirender HTML.
• memahami JavaScript SEO Basics — recommends lazy memuat gambar sebagai sebuah bandwidth/performa terbaik practice dan tautan keluar untuk dedicated panduan.
• Core web Vitals — mengapa lazy-memuat LCP element adalah self-defeating (LCP target adalah 2,5s).

Google — web.dev (Mempelajari performa)

• Lazy muat gambar dan <iframe> elements — ketika untuk defer, dan INP benefit dari lazy iframes.
• browser-tingkat gambar lazy memuat untuk web — native atribut, dan mengapa tidak untuk lazy-muat di-viewport/LCP gambar.
• ini adalah waktu untuk lazy-muat offscreen iframes! — iframe-spesifik kasus (ads, widgets, maps).
• browser-tingkat lazy memuat untuk CMSs — panduan untuk CMS platforms.

Google — podcast

• Pencarian Off Record — Ep. 98, “Lazy loading demystified” (terjemahan) “Lazy memuat demystified” (Aug 21, 2025) — John Mueller dan Martin Splitt pada lazy memuat, rendering, pengindeksan, dan Core web Vitals. juga terindeks pada Google’s Pencarian Off Record halaman.

Developer reference (tidak SEO-spesifik, tetapi authoritative pada API)

• MDN — Lazy memuat (performa panduan)
• MDN — HTMLImageElement: memuat properti
• caniuse — Lazy memuat via atribut untuk gambar & iframes

Bing / Microsoft

• Bing publishes tidak dedicated lazy-memuat document. -nya umum Webmaster Guidelines cover crawling dan JS rendering broadly. Bingbot renders dengan sebuah Chromium-based headless peramban dan, seperti Googlebot, melakukan tidak menggulir atau mengklik — jadi yang sama native loading="lazy" / IntersectionObserver approach itu satisfies Google seharusnya satisfy Bing. itu last poin adalah sebuah inference dari Bingbot’s umum rendering perilaku, tidak sebuah sourced Bing pernyataan tentang lazy memuat — treat ini accordingly.

Quotes dari sumber

pada—record statements dari Google’s official documentation. setiap tautan adalah sebuah deep tautan itu jumps untuk quoted passage pada sumber halaman.

Google — Pencarian Pusat, “Fix Lazy-Loaded Website Content” (terjemahan) “Fix Lazy-dimuat situs web konten”

• “Deferring loading of non-critical or non-visible content, also commonly known as ‘lazy-loading’, is a common performance and UX best practice.” (terjemahan) “Deferring memuat dari non-critical atau non-terlihat konten, juga commonly known sebagai ‘lazy-memuat’, adalah sebuah umum performa dan UX terbaik practice.” Jump untuk 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.” (terjemahan) “Namun, jika tidak implemented correctly, ini technique dapat inadvertently hide konten dari Google. ini document menjelaskan cara pastikan Google dapat merayapi dan indeks lazy-dimuat konten.” Jump untuk quote
• “The methods mentioned don’t rely pada user actions, seperti scrolling atau clicking, untuk memuat konten, yang adalah penting sebagai Google Pencarian tidak interact dengan Anda halaman.” (terjemahan) “ metode mentioned tidak rely pada pengguna tindakan, such sebagai scrolling atau clicking, untuk muat konten, yang adalah penting sebagai Google Pencarian melakukan tidak interact dengan Anda halaman.” Jump untuk 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.” (terjemahan) “tidak tambahkan lazy-memuat untuk konten itu adalah mungkin untuk menjadi segera terlihat ketika sebuah pengguna opens sebuah halaman. itu mungkin menyebabkan konten untuk take longer untuk muat dan tampilkan naik di peramban, yang akan menjadi very noticeable untuk pengguna.” Jump untuk quote
• “Give each chunk its own persistent, unique URL.” (terjemahan) “Memberikan setiap chunk -nya own persistent, unik URL.” — pada infinite menggulir / paginated memuat. Jump untuk quote

Lazy-memuat checklist

Menjalankan ini sebelum Anda ship sebuah lazy-memuat perubahan:

• hero / LCP gambar adalah Tidak lazy-dimuat — ini memuat eagerly (omit loading="lazy"), ideally dengan fetchpriority="high".
• loading="lazy" adalah applied untuk gambar dan iframes itu sit di bawah fold.
• Lazy gambar memiliki eksplisit width/height (atau aspect-ratio) jadi mereka tidak menyebabkan layout shift (CLS) ketika mereka muat di.
• tanpa konten adalah gated di balik sebuah menggulir atau mengklik event — Googlebot tidak dapat fire itu. gunakan native lazy memuat atau IntersectionObserver sebagai gantinya.
• Anda adalah tidak menggunakan deprecated loading="auto" nilai — hanya lazy/eager.
• Off-screen iframes (embeds, ads, maps, widgets) gunakan loading="lazy" untuk cut startup main-thread berfungsi.
• Lazy-dimuat iframes masih memiliki mereka own title, sandbox, allow/permissions kebijakan, referrerpolicy, dan eksplisit dimensions — loading="lazy" hanya defers fetch timing, tidak itu attributes.
• Verified di Pencarian Console pemeriksaan URL → dirender HTML itu gambar/video URLs muncul di src atribut.
• jika menggunakan sebuah ketiga-party JS lazy-muat library, dikonfirmasi src masih ends naik populated di dirender HTML.
• untuk infinite menggulir, setiap chunk memiliki sebuah unik, persistent, paginated URL dan History API updates displayed URL.
• PageSpeed Insights’ “defer offscreen images” (terjemahan) “defer offscreen gambar” flags adalah addressed.

Lazy-memuat anti-patterns (myths dan mistakes)

setiap dari ini adalah sebuah umum belief atau habit, mengapa ini adalah salah, dan apa untuk melakukan sebagai gantinya.

“Lazy loading is always good, so apply it to every image.” (terjemahan) “Lazy memuat adalah selalu baik, jadi apply ini untuk setiap gambar.” Mengapa ini adalah salah: blanket situs-wide lazy memuat catches Anda hero/LCP gambar too, yang delays Largest Contentful Paint — opposite dari speed win Anda wanted. melakukan sebagai gantinya: lazy-muat below—fold hanya; muat above—fold gambar eagerly.

“Google doesn’t mengindeks lazy-loaded konten at semua.” (terjemahan) “Google tidak indeks lazy-dimuat konten di semua.” Mengapa ini adalah salah: Google melakukan merayapi dan indeks lazy-dimuat konten fine ketika ini adalah done dengan native lazy memuat, IntersectionObserver, atau sebuah well-behaved library. risk adalah spesifik untuk menggulir/click-gated atau broken setups — per Google’s own wording, masalah adalah ketika ini adalah “not implemented correctly.” (terjemahan) “tidak implemented correctly.” melakukan sebagai gantinya: gunakan viewport-intersection metode dan memverifikasi di dirender HTML.

“loading='auto' adalah sebuah good bawaan.” (terjemahan) “tidak tersedia adalah sebuah baik bawaan.” Mengapa ini adalah salah: auto adalah deprecated di Chrome; recommending ini adalah stale advice. melakukan sebagai gantinya: gunakan lazy untuk off-screen resources, eager (atau tidak ada) untuk rest.

“Lazy loading and infinite scroll are the same fix.” (terjemahan) “Lazy memuat dan infinite menggulir adalah yang sama fix.” Mengapa ini adalah salah: mereka’re distinct. Infinite menggulir additionally perlu unik paginated URLs dan History API updates, atau deeper konten dapat tidak pernah menjadi di-crawl reliably. melakukan sebagai gantinya: treat paginated/infinite memuat sebagai -nya own architecture dengan per-chunk URLs.

“loading='lazy' berfungsi pada apa pun element.” (terjemahan) “tidak tersedia berfungsi pada apa pun element.” Mengapa ini adalah salah: ini adalah specified untuk <img> dan <iframe>. mendukung untuk lainnya elements bukan bagian dari core spec yang sama cara. melakukan sebagai gantinya: gunakan atribut pada gambar dan iframes; handle lainnya media dengan sebuah appropriate technique (untuk video, sebuah poster gambar itu memuat video pada area pandang entry).

“Lazy loading hurts SEO.” (terjemahan) “Lazy memuat hurts SEO.” Mengapa ini adalah salah: lazy memuat itu sendiri bukan sebuah penalti. peringkat-relevant effect berjalan melalui Core web Vitals dan adalah kecil; poor implementation adalah apa hurts, tidak technique. melakukan sebagai gantinya: implement ini correctly, mengecualikan LCP gambar, dan memverifikasi apa renders.

Lazy-memuat cheat sheet

** loading atribut**

Yang elements mendukung ini

• <img> — yes
• <iframe> — yes
• lainnya elements (video/audio) — tidak bagian dari core spec yang sama cara; gunakan poster-image + muat-pada-view pattern untuk video.

Di atas vs. di bawah fold

• Di atas fold / mungkin LCP → eager (tidak pernah lazy). tambahkan fetchpriority="high" untuk LCP gambar.
• Di bawah fold → lazy.

Core web Vitals impact

• Deferring off-screen gambar → membantu LCP (fewer bytes compete di awal).
• Deferring off-screen iframes → membantu INP (lebih sedikit startup main-thread berfungsi).
• hilang width/height pada lazy gambar → dapat hurt CLS (layout shift pada muat).

aturan Googlebot cares tentang

• Googlebot tidak menggulir atau mengklik — tidak menggulir/click-gated konten.
• Safe metode: native loading="lazy", IntersectionObserver, well-behaved JS library.
• Memverifikasi: pemeriksaan URL → dirender HTML → gambar URL di src atribut.
• Infinite menggulir ≠ gambar lazy memuat — perlu unik paginated URLs + History API.

sebelum / setelah

Concrete fixes, framed cara Anda akan hit them di sebuah audit.

1. hero gambar adalah lazy-dimuat (LCP delayed)

sebelum:

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

setelah:

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

Mengapa: hero adalah LCP element. Eager-memuat ini (dan prioritizing fetch) lets ini paint sooner. Lazy-memuat ini melakukan opposite.

2. situs-wide blanket lazy memuat dari sebuah CMS bawaan

sebelum: setiap <img> pada templat carries loading="lazy", termasuk header logo dan top-dari-halaman featured gambar. setelah: templat memuat above—fold gambar eagerly dan hanya applies loading="lazy" untuk gambar dirender di bawah initial area pandang. Mengapa: blanket lazy memuat catches gambar itu adalah terlihat segera, delaying apa pengguna (dan LCP) melihat pertama.

3. Off-screen embed memuat pada pemuatan halaman

sebelum:

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

setelah:

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

Mengapa: map adalah di bawah fold. Deferring ini menghapus -nya startup cost dan membantu INP, sejak embeds melakukan main-thread berfungsi sementara halaman adalah memuat.

4. Custom JS lazy-muat leaves src empty untuk Googlebot

sebelum: sebuah library stores nyata URL di data-src dan swaps ini ke src pada sebuah menggulir event — yang Googlebot tidak pernah fires, jadi dirender HTML menampilkan sebuah empty/placeholder src. setelah: gunakan native loading="lazy" (nyata URL di src dari mulai), atau sebuah IntersectionObserver-based library, lalu confirm di pemeriksaan URL itu URL adalah present di dirender src. Mengapa: jika URL bukan di src di dirender HTML, Google dapat’t pick gambar naik.

temukan gambar itu seharusnya (atau tidak dapat) menjadi lazy-dimuat

sebuah DevTools Console cuplikan Anda dapat paste pada apa pun halaman untuk audit loading atribut. ini lists gambar dengan mereka loading nilai dan apakah mereka’re currently di area pandang — jadi Anda dapat spot sebuah above—fold gambar marked lazy, atau sebuah below—fold satu itu bukan.

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 Anda sumber untuk risky lazy-muat patterns

periksa Anda templates/bangun keluaran untuk deprecated auto nilai dan untuk data-src-style JS lazy memuat (yang dapat leave src empty untuk 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 bukan secara otomatis sebuah masalah — ini adalah sebuah prompt untuk confirm nyata URL ends naik di dirender src, yang Anda memverifikasi di Pencarian Console pemeriksaan URL.

Hero gambar memulai later setelah enabling lazy memuat

Symptom: LCP mendapatkan slower dan hero permintaan dimulai late di waterfall.

mungkin menyebabkan: sebuah global CMS aturan ditambahkan loading="lazy" untuk sebuah above—fold atau LCP gambar.

Fix dan konfirmasi: hapus lazy atribut dari itu gambar, secara opsional tambahkan fetchpriority="high", dan confirm -nya permintaan memulai sebelumnya di sebuah dicocokkan trace.

Lazy gambar muncul tetapi shifts halaman

Symptom: konten jumps ketika sebuah deferred gambar enters area pandang.

mungkin menyebabkan: gambar memiliki tidak eksplisit dimensions atau reserved aspect ratio.

Fix dan konfirmasi: tambahkan width dan height attributes atau reserve yang sama aspect ratio di CSS. Reload dengan layout-shift regions enabled dan memverifikasi gambar tidak longer moves surrounding konten.

Google melakukan tidak melihat deferred konten

Symptom: sebuah dirender inspection adalah hilang gambar URL atau konten itu muncul setelah sebuah human scrolls.

mungkin menyebabkan: sebuah menggulir/mengklik handler tidak pernah berjalan untuk Googlebot, atau sebuah lazy-muat library leaves nyata URL di data-src alih-alih dirender src.

Fix dan konfirmasi: gunakan native lazy memuat atau sebuah IntersectionObserver-based implementation, lalu inspect dirender HTML dan confirm akhir URL dan konten adalah present tanpa interaction.

Off-screen embed masih memuat segera

Symptom: sebuah below—fold iframe muncul di initial waterfall despite sebuah lazy-memuat perubahan.

mungkin menyebabkan: atribut adalah absent dari deployed iframe, sebuah wrapper membuat iframe eagerly, atau embed sits close enough untuk area pandang untuk peramban’s muat threshold.

Fix dan konfirmasi: Inspect aktif DOM dan permintaan initiator, uji pada sebuah panjang halaman dengan sebuah cold cache, dan memverifikasi permintaan adalah deferred until peramban’s near-viewport threshold.

alat untuk implementation dan proof

• Chrome DevTools Elements dan Network panels: confirm deployed loading atribut, identify yang script dibuat sebuah iframe, dan membandingkan permintaan mulai times sebelum dan setelah sebuah perubahan.
• Chrome DevTools performa panel: record sebuah muat dan memverifikasi itu deferring sebuah embed mengurangi startup main-thread berfungsi tanpa delaying LCP gambar.
• PageSpeed Insights: gunakan off-screen-image diagnostic sebagai sebuah starting list, lalu terpisah benar below—fold candidates dari hero atau lainnya immediate konten.
• Pencarian Console pemeriksaan URL: inspect dirender HTML dan memverifikasi itu deferred gambar URLs akhir naik di src dan itu lazy-dimuat konten ada tanpa sebuah menggulir atau mengklik.
• ** peramban area pandang dan filmstrip:** uji lebih daripada satu area pandang ukuran. sebuah gambar di bawah fold pada desktop dapat menjadi di atas fold pada sebuah smaller atau differently shaped device.

Below—fold gambar deferral

Uji untuk menjalankan: Record sebuah cold-muat Network trace sebelum dan setelah menambahkan native lazy memuat untuk sebuah gambar well di bawah initial area pandang.

diharapkan hasil: gambar permintaan adalah absent dari initial critical waterfall dan dimulai sebagai area pandang approaches ini.

Failure interpretation: deployed markup lacks atribut, JavaScript membuat atau fetches gambar eagerly, atau uji gambar adalah di dalam peramban’s near-viewport threshold.

Monitoring window: periksa segera setelah deployment di seluruh representative mobile dan desktop area pandang sizes.

Rollback trigger: Roll kembali jika sebuah gambar terlihat pada initial muat adalah deferred atau jika gambar routinely fails untuk muncul sebelum pengguna reaches ini.

LCP-image exclusion

Uji untuk menjalankan: Membandingkan dicocokkan performa traces dan permintaan waterfalls untuk halaman’s LCP gambar setelah menghapus blanket lazy memuat.

diharapkan hasil: LCP gambar memuat eagerly, -nya permintaan memulai sebelumnya, dan LCP melakukan tidak regress.

Failure interpretation: lainnya templat atau optimization layer re-menambahkan atribut, atau penemuan adalah masih delayed oleh CSS, JavaScript, atau markup.

Monitoring window: periksa repeated lab berjalan segera, lalu menonton field LCP di atas following reporting window.

Rollback trigger: Roll kembali surrounding peluncuran bertahap jika perubahan delays lainnya critical resources enough untuk menyebabkan sebuah repeatable LCP regression.

Rendered-konten visibilitas

Uji untuk menjalankan: gunakan pemeriksaan URL untuk view dirender HTML tanpa interacting dengan halaman dan pencarian untuk deferred gambar URL dan associated konten.

diharapkan hasil: akhir URL muncul di src, dan penting konten adalah present di dirender HTML.

Failure interpretation: implementation depends pada sebuah menggulir/mengklik event atau lazy-muat script failed selama rendering.

Monitoring window: Uji setiap affected templat setelah rilis dan setelah changing lazy-muat library atau CMS gambar pipeline.

Rollback trigger: Roll kembali jika dapat diindeks konten atau gambar URLs disappear dari dirender keluaran.

Uji diri Anda sendiri: Lazy memuat

Lima quick pertanyaan pada deferring gambar dan iframes tanpa hurting Core web Vitals atau pengindeksan. Pick sebuah jawaban untuk setiap, lalu periksa.

Resources worth Anda waktu

My related writing

• JavaScript SEO Issues & Terbaik Practices — tempat I cover shift dari JS-driven untuk browser-native lazy memuat, dan mengapa lazy-dimuat konten (tidak hanya gambar) adalah pengindeksan risk.
• Google PageSpeed Insights untuk SEOs & Developers — connects “defer offscreen images” (terjemahan) “defer offscreen gambar” audit untuk lazy memuat, plus rest dari PSI laporan.
• Beginner’s Panduan untuk SEO teknis — tempat performa dan rendering fit di bigger picture.

dari sekitar industri

• Fix Lazy-dimuat situs web konten (Google Pencarian Pusat) — definitive implementation-dan-testing doc.
• browser-tingkat gambar lazy memuat untuk web (web.dev) — native atribut dan LCP caveat, straight dari Google’s performa team.
• ini adalah waktu untuk lazy-muat offscreen iframes! (web.dev) — iframe kasus dan -nya startup/INP benefit.
• Lazy memuat demystified — Pencarian Off Record, Ep. 98 (Google) — Mueller dan Splitt’s penuh episode pada lazy memuat, rendering, pengindeksan, dan Core web Vitals.
• Lazy memuat dijelaskan: Speed naik Anda situs & UX fast (mesin pencari Land) — sebuah thorough industri panduan dengan CMS-spesifik catatan.
• Lazy memuat (performa panduan) (MDN) — developer-reference view dari API.
• sebuah lazy memuat primer untuk crawlability & pengindeksan success (Oncrawl) — merayapi/indeks angle secara mendalam.

Log perubahan