Hướng dẫn về Lazy Loading

Tóm tắt — Lazy loading tells trình duyệt để hold off downloading images và embeds cho đến khi bạn’re về để scroll để them, so trang loads nhanh hơn lên front. easy, không-code way là để thêm loading="lazy" để <img> hoặc <iframe>. một rule để remember: không lazy-load big image tại top của trang — đó làm trang feel chậm hơn, không nhanh hơn.

Điều gì lazy loading là

Thông thường, Khi trình duyệt opens trang, nó tries để download mọi thứ on nó — mỗi image, mỗi embedded map hoặc video — right away. On dài trang với lots của images, đó lot của downloading cho stuff bạn có thể không bao giờ scroll xuống để see.

Lazy loading các cách sửa đó. nó defers loading off-screen images và embeds cho đến khi bạn’re về để scroll them vào view. trang hiển thị bạn Điều gì tại top quickly, và rest loads as bạn go. ít hơn dữ liệu lên front có nghĩ là nhanh hơn đầu tiên impression, plus savings on bandwidth và battery — mà matters phần lớn on phones.

easy way: loading thuộc tính

bạn được sử dụng để cần JavaScript library để làm điều này. không anymore. Modern các trình duyệt có nó được xây dựng trong. bạn chỉ thêm một thuộc tính:

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

đó nó. nó hoạt động on <img> và <iframe> (think embedded YouTube videos, Google Maps, social widgets) trong mỗi major trình duyệt, với không JavaScript.

một mistake để tránh

không lazy-load đó big image tại đó top of đó trang — đó hero image, đó điều mọi người see đầu tiên. Lazy loading tells đó trình duyệt “this can wait,” (bản dịch) «này có thể chờ,» so một lazy-loaded top image loads sau đó hơn điều này nên, và đó trang feels chậm hơn. Google own hướng dẫn là để skip lazy loading cho bất cứ điều gì đó là visible right away khi đó trang opens.

ngắn version: lazy-load stuff dưới fold, load stuff trên fold thông thường.

Làm nó hurt SEO?

By itself, không. Google có thể chỉ mục lazy-loaded images và nội dung chỉ fine Khi nó đã xong thông thường way. trouble bắt đầu chỉ Khi trang hides nội dung behind scrolling hoặc clicking — vì các công cụ tìm kiếm không scroll hoặc nhấp. nếu của bạn images chỉ sử dụng loading="lazy", bạn’re fine. Muốn details on Cách Google thực ra sees điều này, và Cách kiểm tra nó? Chuyển để Nâng cao tab.

Tóm tắt — Lazy loading defers off-screen images và iframes cho đến khi họ near viewport, cutting ban đầu trang weight (helps LCP) và startup main-chuỗi trao đổi hoạt động (helps INP). native loading="lazy" thuộc tính on <img>/<iframe> có replaced phần lớn JS libraries; chỉ lazy và eager là có ý nghĩa các giá trị (auto là deprecated). damaging mistakes: lazy-loading LCP/trên—fold image (delays rất chỉ số bạn’re chasing), và gating nội dung behind scroll/nhấp — mà Googlebot không bao giờ triggers vì nó không interact với trang. nó không trực tiếp xếp hạng factor; effect chạy qua Core Web Vitals và crawlability. Verify trong Search Console’s URL Inspection Tool đó image các URL land trong src thuộc tính của được kết xuất HTML.

Điều gì lazy loading thực ra làm

Đó ý tưởng là đơn giản: chỉ load các tài nguyên khi bạn cần them, thay vì loading mọi thứ tại khi. On một media-nặng trang, downloading mỗi image và embed lên front giữ đó trình duyệt busy fetching điều đó khách truy cập có thể không bao giờ scroll để — burning bandwidth, memory, và battery cho không có gì. Deferring đó off-screen ones lets đó trên-đó-fold nội dung paint sooner. Martin Splitt đã làm chính xác này point on Google Tìm kiếm Off đó Record episode “Lazy loading demystified” (bản dịch) «Lazy loading demystified»: đó goal là để tránh hoạt động đó yields không có gì, vì non-cốt yếu images đó trang sẽ là fine không có chỉ giữ đó trình duyệt occupied.

điều này connects để Core Web Vitals phần lớn mọi người là chasing. Ít hơn bytes competing cho network lên front có nghĩ là Largest Contentful Paint element có thể render sooner. cho iframes — quảng cáo, social widgets, comment sections, maps — deferring them cũng cuts main-chuỗi trao đổi hoạt động during startup, mà là Interaction để tiếp theo Paint win, không chỉ LCP một. Google own web.dev hướng dẫn frames lazy-loaded iframes as INP improvement during trang load.

Native so với. JavaScript-driven lazy loading

một vài năm ago, các trình duyệt gained native loading thuộc tính cho images và iframes, so Bạn có thể hand toàn bộ job để trình duyệt thay vì wiring lên JavaScript API. Trong my JavaScript SEO hướng dẫn tại Ahrefs I làm giống nhau observation: since I đầu tiên wrote đó piece, lazy loading có mostly moved từ là JavaScript-driven để là handled by các trình duyệt. bạn’ll vẫn chạy vào JS-driven setups, và cho images họ’re thường fine — điều I kiểm tra là liệu thực tế nội dung (không chỉ images) là lazy loaded, vì những điều đó setups là ones đó có gây ra nội dung không để là picked lên correctly.

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>

luôn đặt rõ ràng width/height (hoặc aspect-ratio) on lazy images so trình duyệt reserves space trước khi image loads — đó biggest layout-shift risk với deferred images. Reserved dimensions không phải absolute CLS bảo đảm, though: nếu xung quanh layout hoặc responsive crop vẫn thay đổi sau khi image loads, Bạn có thể vẫn see shift, so xác nhận với thực layout-shift trace thay vì assuming fixed dimensions alone settle nó.

Lazy loading và iframes cần một hơn phân biệt: loading="lazy" on an <iframe> chỉ defers khi đó embed fetch và creation happen. Điều này không set của nó title, focus behavior, sandbox, allow/permissions policy, referrerpolicy, consent xử lý, hoặc dimensions cho bạn — những vẫn cần của họ own attention, và an embed có thể giữ đang làm hoạt động (scripts, tracking pixels, layout) khi điều này becomes eligible để load. Và không assume “below the fold” (bản dịch) «dưới đó fold» behaves đó giống nhau mọi nơi: display: none nội dung, offscreen carousel slides, transformed elements, và nested scroll containers có thể intersect đó viewport differently hơn một đơn giản dưới-đó-fold element, so kiểm thử đó thực tế layout và navigation controls thay vì assuming sự tương đương.

loading thuộc tính các giá trị

chỉ hai các giá trị quan trọng hôm nay:

• loading="lazy" — defer tài nguyên cho đến khi nó near viewport.
• loading="eager" — load nó immediately, default behavior. sử dụng nó để là rõ ràng về trên—fold images.

bạn có thể see loading="auto" trong older các bài viết — nó deprecated trong Chrome, so không reach cho nó. có không cần để; omitting thuộc tính đã cho bạn default (eager) behavior.

Cách near là “near”? loading="lazy" là một hint, không an tác giả-controlled bảo đảm — đó spec leaves đó thực tế near-viewport decision để đó trình duyệt. Chromium tries để fetch một lazy tài nguyên sớm đủ đó đây là ready by đó time bạn scroll để điều này, và đó trigger distance varies by trình duyệt, connection speed, và tài nguyên loại; điều này không một fixed pixel giá trị bạn có thể rely on hoặc reproduce trên các trình duyệt hoặc versions. không publish — hoặc trust — một cụ thể “loads N pixels before the viewport” (bản dịch) «loads N pixels trước đó viewport» number; treat đó near-viewport window as implementation-được định nghĩa và xác nhận thực tế behavior với một Network trace on đó trình duyệt/connection bạn care về thay vì assuming một constant.

Native lazy loading cũng plays fine với responsive images: nó áp dụng để ordinary src và srcset/sizes selection, so bạn không lose responsive image behavior by thêm loading="lazy". nếu bạn thay vì hide thực URL chỉ trong data-* thuộc tính cho script để đổi trong sau đó, loading hiện tại phụ thuộc vào đó script — kiểm thử được kết xuất HTML và Điều gì happens nếu script fails (nhiều hơn on điều này trong Scripts và Khắc phục sự cố tabs).

#1 mistake: lazy-loading LCP / trên—fold image

Đây là thất bại I see phần lớn, và mỗi nguồn agrees on nó. nếu bạn lazy-load hero image — hoặc bất kỳ image có khả năng để là LCP element — bạn’ve told trình duyệt để chờ on single phần lớn quan trọng pixel cho perceived load speed. trình duyệt cũng có thể’t lazy-load image cho đến khi nó knows nơi image sẽ sit on trang, so lazy trên—fold images tend để load nhiều hơn slowly hơn eager ones. đó trực tiếp delays Largest Contentful Paint, chỉ số Google nói nên resolve trong đầu tiên 2,5 seconds của load.

Splitt put flip side plainly on SOTR episode: nếu bạn’re không sử dụng lazy loading nơi bạn nên, đó sẽ probably hurt some aspect của Core Web Vitals — phần lớn có khả năng LCP. So nó cuts cả hai ways. rule:

• Probable hoặc observed LCP candidate → load eagerly (omit loading="lazy", hoặc đặt eager). cân nhắc fetchpriority="high" on LCP image.
• Dưới fold → loading="lazy".

không mỗi image trên fold là LCP candidate — identify thực tế một ( Performance trace hoặc PageSpeed Insights sẽ name nó) và verify của nó yêu cầu timing thay vì treating mỗi đầu tiên-screen image giống nhau. và những điều này là tách biệt hints, không một setting: loading="eager" (hoặc omitting loading) chỉ có nghĩ là trình duyệt sẽ không defer phát hiện của tài nguyên — nó không itself raise fetch priority. fetchpriority là distinct, advisory hint bên cạnh đó. Stacking <link rel="preload"> với loading="lazy" on giống nhau tài nguyên gửi trình duyệt conflicting intent, so kiểm tra thực tế network waterfall thay vì assuming combination làm Điều gì bạn expect.

blanket anti-pattern là switching on lazy loading cho mỗi image trang web-wide — phổ biến CMS default. As Splitt noted, nếu mỗi image là lazy loaded, sau đó images đó là (hoặc nên là) immediately visible nhận lazy loaded cũng, mà là chính xác case bạn muốn để tránh.

Cách Googlebot renders lazy-loaded nội dung

Ở đây crawling reality đó trips mọi người lên: Googlebot không scroll, và nó không nhấp. nó renders của bạn trang với headless trình duyệt, nhưng nó không simulate người dùng interacting với nó. Google trạng thái điều này trực tiếp — của nó được khuyến nghị lazy-loading các phương thức có chủ ý không rely on người dùng actions như scrolling hoặc clicking, vì Google Search không interact với của bạn trang.

Đó là lý làm Cách của bạn implementation matters. Google doc lists three implementations nó considers safe: trình duyệt được xây dựng-trong lazy loading cho images và iframes, IntersectionObserver API (với polyfill), hoặc JavaScript library đó loads dữ liệu as nó enters viewport. All three mấu chốt off viewport intersection — không scroll hoặc nhấp event đó Googlebot sẽ không bao giờ fire.

cao-risk pattern là custom hoặc thứ ba-party JS lazy-load library. nếu library misbehaves và image URL không bao giờ lands trong src thuộc tính, Google đơn giản sẽ không pick đó image lên — Splitt described chính xác điều này thất bại chế độ on SOTR episode. có không có gì để chỉ mục nếu URL không phải ở đó. Đây là giống nhau điều I flag trong my JavaScript SEO hướng dẫn: image lazy loading là thường fine, nhưng lazy-loaded nội dung là nơi lập chỉ mục các vấn đề creep trong, và khắc phục là để kiểm tra Điều gì Google thực ra renders.

Infinite scroll là khác vấn đề

không conflate basic image/iframe lazy loading với infinite scroll hoặc paginated loading. Deferring images là một điều; loading new chunks của nội dung as người dùng scrolls là một, và nó cần của nó own architecture. Google hướng dẫn: cho mỗi chunk persistent, unique URL, giữ nội dung ổn định theo URL (sử dụng absolute trang numbers như ?page=12, không relative các giá trị như ?date=yesterday), và cập nhật displayed URL với History API as mỗi chunk becomes chính visible nội dung so nó có thể là refreshed, shared, và linked. Skip đó và deeper nội dung behind endless scroll có thể không bao giờ là reliably được crawl hoặc được lập chỉ mục.

Cách kiểm thử nó

Đó verification path là đó giống nhau trong Google doc và trong my own methodology: dùng Search Console’s URL Inspection Tool và xem đó được kết xuất HTML. Nếu của bạn image (hoặc video) URLs xuất hiện trong đó src thuộc tính on đó <img>/<video> elements trong đó được kết xuất HTML, của bạn setup hoạt động. Google says này outright — kiểm tra đó được kết xuất HTML để hãy bảo đảm nội dung của bạn là trong điều này — “Check the rendered HTML to make sure your content is in the rendered HTML” (bản dịch) «Kiểm tra HTML đã kết xuất để bảo đảm nội dung của bạn nằm trong HTML đã kết xuất». Nếu đó URL là bị thiếu từ src, đó là của bạn vấn đề, và điều này thường points lại để một scroll/nhấp trigger hoặc một hỏng library.

cho lazy-loaded sản phẩm grid, go beyond điều này presence kiểm tra. Chạy Infinite Scroll SEO kiểm thử matrix với tiêu chuẩn và tall viewports, fresh navigation và post-load resizing, không-hành động và incremental-scroll chạy, unique sản phẩm-link được tính, và accessibility-tree inspection. Resizing initialized trang không phải tương đương để navigating tại cuối viewport size vì observers và batch calculations có thể là registered chỉ 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

Bạn có thể cũng lean on của bạn web-performance tooling: PageSpeed Insights flags off-screen images bạn nên là deferring. Trong my PageSpeed Insights hướng dẫn tại Ahrefs I note đó “defer offscreen elements” (bản dịch) «defer offscreen elements» audit là telling bạn để lazy-load images — một handy way để connect đó diagnostic bạn đã chạy để đó cách sửa.

Xếp hạng-tín hiệu honesty

là clear về Điều gì lazy loading là và không phải. sử dụng nó là không trực tiếp xếp hạng factor, và không sử dụng nó không phải hình phạt. connection để thứ hạng là gián tiếp: nó luồng qua Core Web Vitals (mainly LCP, đôi khi INP cho iframes) và qua crawlability, nếu bad implementation hides nội dung. Splitt characterized xếp hạng effect qua Core Web Vitals as tiny, minute factor trong phần lớn cases. So optimize lazy loading cho của bạn người dùng’ load experience và cho sạch lập chỉ mục — không vì bạn expect xếp hạng bump từ thuộc tính itself.

nơi điều này fits

Lazy loading là một lever trong rộng hơn web performance toolkit. nó pairs với tài nguyên hints (preload/preconnect cho các tài nguyên bạn làm muốn sớm), font-loading strategy, bộ nhớ đệm, và CDN — và nó judged, ultimately, qua Core Web Vitals. Nhận trên—fold/dưới—fold split right và nó một của cheapest wins khả dụng.

AI summary

condensed take on Nâng cao version:

• Lazy loading defers off-screen images và iframes cho đến khi họ near viewport — cutting ban đầu trang weight và startup hoạt động. native, không-JS way là loading="lazy" on <img> và <iframe>; nó có largely replaced JS libraries. nó trình duyệt hint, không guaranteed distance hoặc timing — trigger point varies by trình duyệt, connection, và tài nguyên loại, so không rely on fixed pixel number.
• Các giá trị: chỉ lazy và eager quan trọng. auto là deprecated trong Chrome.
• Core Web Vitals link: ít hơn lên-front bytes help LCP; deferring iframes cuts main-chuỗi trao đổi hoạt động tại startup, helping INP. đặt width/height so deferred images không nguyên nhân CLS — though reserved dimensions alone không bảo đảm zero shift nếu xung quanh layout vẫn thay đổi.
• #1 mistake: lazy-loading probable/observed LCP image, không chỉ bất kỳ trên—fold image. nó delays Largest Contentful Paint, mà Google nói nên resolve trong 2,5s. eager/omitting loading chỉ ảnh hưởng phát hiện — nó không itself raise fetch priority; fetchpriority là tách biệt hint, và stacking preload với loading="lazy" on giống nhau tài nguyên conflicts. Blanket trang web-wide lazy loading là phổ biến CMS anti-pattern.
• Iframes nhận của họ own contract: loading="lazy" chỉ defers fetch/creation timing — tiêu đề, sandbox, permissions policy, referrer policy, consent, và dimensions vẫn cần setting independently, và hidden/carousel/transformed layouts có thể intersect viewport differently hơn đơn giản dưới—fold element.
• Googlebot không scroll hoặc nhấp. bất kỳ nội dung gated behind scroll/nhấp events có thể go unseen. Google safe các phương thức — native lazy loading, IntersectionObserver, hoặc well-behaved JS library — all mấu chốt off viewport intersection.
• Highest risk: custom/thứ ba-party JS lazy-load libraries. nếu URL không bao giờ lands trong src, Google sẽ không chỉ mục image (theo Martin Splitt).
• Infinite scroll là distinct: nó cần unique paginated các URL + History API.
• Verify trong Search Console URL Inspection → được kết xuất HTML → image các URL present trong src thuộc tính.
• không trực tiếp xếp hạng factor. effect là gián tiếp, qua Core Web Vitals và crawlability, và Splitt được gọi là Cốt lõi-Web-Chỉ số quan trọng tác động đến thứ hạng tiny.

Tài liệu chính thức

Chính-nguồn hướng dẫn từ các công cụ tìm kiếm và Google web.dev.

Google — Tìm kiếm Central

• Cách sửa Lazy-Loaded Website Nội dung — đó definitive doc: safe implementation các phương thức, đó “Google doesn’t interact with your page” (bản dịch) «Google không interact với trang của bạn» rule, infinite-scroll/paginated-loading requirements, và cách verify trong được kết xuất HTML.
• Understand JavaScript SEO Basics — khuyến nghị lazy loading images as một bandwidth/performance best practice và links out để đó dedicated hướng dẫn.
• Core Web Vitals — vì sao lazy-loading đó LCP element là self-defeating (LCP đích là 2,5s).

Google — web.dev (Learn Performance)

• Lazy load images và <iframe> elements — Khi để defer, và INP benefit của lazy iframes.
• trình duyệt-cấp độ image lazy loading cho web — native thuộc tính, và Vì sao không để lazy-load trong-viewport/LCP images.
• nó time để lazy-load offscreen iframes! — iframe-cụ thể case (quảng cáo, widgets, maps).
• trình duyệt-cấp độ lazy loading cho CMSs — hướng dẫn cho CMS các nền tảng.

Google — podcast

• Tìm kiếm Off đó Record — Ep. 98, “Lazy loading demystified” (bản dịch) «Lazy loading demystified» (Aug 21, 2025) — John Mueller và Martin Splitt on lazy loading, kết xuất, lập chỉ mục, và Core Web Vitals. Cũng được lập chỉ mục on Google Tìm kiếm Off đó Record trang.

Nhà phát triển reference (không SEO-cụ thể, nhưng có thẩm quyền on API)

• MDN — Lazy loading (Performance hướng dẫn)
• MDN — HTMLImageElement: loading thuộc tính
• caniuse — Lazy loading qua thuộc tính cho images & iframes

Bing / Microsoft

• Bing publishes không dedicated lazy-loading document. Của nó chung Quản trị viên web Guidelines cover crawling và JS kết xuất broadly. Bingbot renders với Chromium-based headless trình duyệt và, như Googlebot, không scroll hoặc nhấp — so giống nhau native loading="lazy" / IntersectionObserver approach đó satisfies Google nên satisfy Bing. đó cuối cùng point là inference từ Bingbot’s chung kết xuất behavior, không sourced Bing statement về lazy loading — treat nó accordingly.

Quotes từ nguồn

On—record statements từ Google tài liệu chính thức. mỗi link là deep link đó jumps để quoted passage on nguồn trang.

Google — Tìm kiếm Central, “Fix Lazy-Loaded Website Content” (bản dịch) «Cách sửa Lazy-Loaded Website Nội dung»

• “Deferring loading of non-critical or non-visible content, also commonly known as ‘lazy-loading’, is a common performance and UX best practice.” (bản dịch) «Deferring loading of non-cốt yếu hoặc non-visible nội dung, cũng commonly known as ‘lazy-loading’, là một phổ biến performance và UX best practice.» Nhảy đến trích dẫn
• “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.” (bản dịch) «Tuy nhiên, nếu không implemented correctly, này technique có thể inadvertently hide nội dung từ Google. Này document giải thích cách hãy bảo đảm Google có thể crawl và chỉ mục lazy-loaded nội dung.» Nhảy đến trích dẫn
• “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.” (bản dịch) «Đó các phương thức mentioned không rely on người dùng actions, such as scrolling hoặc clicking, để load nội dung, mà là quan trọng as Google Search không interact với trang của bạn.» Nhảy đến trích dẫn
• “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.” (bản dịch) «không thêm lazy-loading để nội dung đó có khả năng là immediately visible khi một người dùng opens một trang. Đó có thể nguyên nhân nội dung để take lâu hơn để load và cho thấy lên trong đó trình duyệt, mà sẽ là very noticeable để người dùng.» Nhảy đến trích dẫn
• “Give each chunk its own persistent, unique URL.” (bản dịch) «Cho mỗi chunk của nó own persistent, unique URL.» — on infinite scroll / paginated loading. Nhảy đến trích dẫn

Lazy-loading checklist

Chạy điều này trước khi bạn ship lazy-loading thay đổi:

• Đó hero / LCP image không phải lazy-loaded — điều này loads eagerly (omit loading="lazy"), ideally với fetchpriority="high".
• loading="lazy" là applied để images và iframes đó sit dưới đó fold.
• Lazy images có rõ ràng width/height (hoặc aspect-ratio) so they không nguyên nhân layout shift (CLS) khi they load trong.
• Không có nội dung là gated behind một scroll hoặc nhấp event — Googlebot sẽ không fire những. Dùng native lazy loading hoặc IntersectionObserver thay vì.
• bạn là không dùng đó deprecated loading="auto" giá trị — chỉ lazy/eager.
• Off-screen iframes (embeds, quảng cáo, maps, widgets) dùng loading="lazy" để cut startup main-chuỗi trao đổi hoạt động.
• Lazy-loaded iframes vẫn có của họ own title, sandbox, allow/permissions policy, referrerpolicy, và rõ ràng dimensions — loading="lazy" chỉ defers fetch timing, không những các thuộc tính.
• Verified trong Search Console URL Inspection → được kết xuất HTML đó image/video URLs xuất hiện trong đó src thuộc tính.
• Nếu dùng một bên thứ ba JS lazy-load library, confirmed đó src vẫn ends lên populated trong đó được kết xuất HTML.
• Cho infinite scroll, mỗi chunk có một unique, persistent, paginated URL và đó History API cập nhật đó displayed URL.
• PageSpeed Insights’ “defer offscreen images” (bản dịch) «defer offscreen images» flags là addressed.

Lazy-loading anti-patterns (myths và mistakes)

mỗi của những điều này là phổ biến belief hoặc habit, Vì sao nó sai, và Điều gì để làm thay vì.

“Lazy loading is always good, so apply it to every image.” (bản dịch) «Lazy loading là luôn good, so apply điều này để mỗi image.» Vì sao đây là sai: blanket site-wide lazy loading catches của bạn hero/LCP image cũng, mà delays Largest Contentful Paint — đó opposite of đó speed win bạn wanted. Làm thay vì: lazy-load dưới-đó-fold chỉ; load trên-đó-fold images eagerly.

“Google doesn’t index lazy-loaded content at all.” (bản dịch) «Google không chỉ mục lazy-loaded nội dung tại all.» Vì sao đây là sai: Google crawl và indexes lazy-loaded nội dung fine khi đây là đã xong với native lazy loading, IntersectionObserver, hoặc một well-behaved library. Đó risk là cụ thể để scroll/nhấp-gated hoặc hỏng setups — theo Google own wording, đó vấn đề là khi đây là “not implemented correctly.” (bản dịch) «không implemented correctly.» Làm thay vì: dùng một viewport-intersection phương thức và verify trong được kết xuất HTML.

“loading='auto' is a good default.” (bản dịch) «loading='auto' là một good default.» Vì sao đây là sai: auto là deprecated trong Chrome; recommending điều này là stale advice. Làm thay vì: dùng lazy cho off-screen các tài nguyên, eager (hoặc không có gì) cho đó rest.

“Lazy loading and infinite scroll are the same fix.” (bản dịch) «Lazy loading và infinite scroll là đó giống nhau cách sửa.» Vì sao đây là sai: họ là distinct. Infinite scroll additionally cần unique paginated URLs và History API cập nhật, hoặc đó deeper nội dung có thể không bao giờ là được crawl reliably. Làm thay vì: treat paginated/infinite loading as của nó own architecture với theo-chunk URLs.

“loading='lazy' works on any element.” (bản dịch) «loading='lazy' hoạt động on bất kỳ element.» Vì sao đây là sai: đây là specified cho <img> và <iframe>. Hỗ trợ cho other elements không part of đó cốt lõi spec cùng cách. Làm thay vì: dùng đó thuộc tính on images và iframes; xử lý other media với an appropriate technique (cho video, một poster image đó loads đó video on viewport entry).

“Lazy loading hurts SEO.” (bản dịch) «Lazy loading hurts SEO.» Vì sao đây là sai: lazy loading itself không một hình phạt. Đó xếp hạng-relevant effect chạy qua Core Web Vitals và là nhỏ; poor implementation là điều gì hurts, không đó technique. Làm thay vì: implement điều này correctly, exclude đó LCP image, và verify điều gì renders.

Lazy-loading bảng tra nhanh

** loading thuộc tính**

Mà elements hỗ trợ nó

• <img> — có
• <iframe> — có
• khác elements (video/audio) — không part của cốt lõi spec giống nhau way; sử dụng poster-image + load-on-view pattern cho video.

Trên so với. dưới fold

• Trên fold / có khả năng LCP → eager (không bao giờ lazy). Thêm fetchpriority="high" để LCP image.
• Dưới fold → lazy.

Core Web Vitals impact

• Deferring off-screen images → helps LCP (ít hơn bytes compete lên front).
• Deferring off-screen iframes → helps INP (ít hơn startup main-chuỗi trao đổi hoạt động).
• Bị thiếu width/height on lazy images → có thể hurt CLS (layout shift on load).

Rules Googlebot cares về

• Googlebot không scroll hoặc nhấp — không scroll/nhấp-gated nội dung.
• Safe các phương thức: native loading="lazy", IntersectionObserver, well-behaved JS library.
• Verify: URL Inspection → được kết xuất HTML → image URL trong src thuộc tính.
• Infinite scroll ≠ image lazy loading — cần unique paginated các URL + History API.

trước khi / sau khi

Concrete các cách sửa, được diễn đạt way bạn’d hit them trong audit.

1. hero image là lazy-loaded (LCP delayed)

Trước:

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

Sau:

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

Vì sao: đó hero là đó LCP element. Eager-loading điều này (và prioritizing đó fetch) lets điều này paint sooner. Lazy-loading điều này làm đó opposite.

2. trang web-wide blanket lazy loading từ CMS default

trước khi: mỗi <img> on template carries loading="lazy", including header logo và top-của-trang featured image. sau khi: template loads trên—fold images eagerly và chỉ áp dụng loading="lazy" để images được kết xuất dưới ban đầu viewport. Vì sao: blanket lazy loading catches images đó là visible immediately, delaying Điều gì người dùng (và LCP) sees đầu tiên.

3. Off-screen embed loading on trang load

Trước:

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

Sau:

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

Vì sao: đó map là dưới đó fold. Deferring điều này xóa của nó startup cost và helps INP, since embeds làm main-chuỗi trao đổi hoạt động trong khi đó trang là loading.

4. Custom JS lazy-load leaves src rỗng cho Googlebot

trước khi: library stores thực URL trong data-src và swaps nó vào src on scroll event — mà Googlebot không bao giờ fires, so được kết xuất HTML hiển thị rỗng/placeholder src. sau khi: sử dụng native loading="lazy" (thực URL trong src từ bắt đầu), hoặc IntersectionObserver-based library, sau đó xác nhận trong URL Inspection đó URL là present trong được kết xuất src. Vì sao: nếu URL không phải trong src trong được kết xuất HTML, Google có thể’t pick image lên.

tìm images đó nên (hoặc không nên) là lazy-loaded

DevTools Console snippet Bạn có thể paste on bất kỳ trang để audit loading thuộc tính. nó lists images với của họ loading giá trị và liệu họ’re hiện tại trong viewport — so Bạn có thể spot trên—fold image marked lazy, hoặc dưới—fold một đó không phải.

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 của bạn nguồn cho risky lazy-load patterns

kiểm tra của bạn templates/xây dựng output cho deprecated auto giá trị và cho data-src-style JS lazy loading (mà có thể leave src rỗng cho 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 không phải tự động vấn đề — nó prompt để xác nhận thực URL ends lên trong được kết xuất src, mà bạn verify trong Search Console URL Inspection.

Hero image bắt đầu sau đó sau khi enabling lazy loading

Symptom: LCP nhận chậm hơn và hero yêu cầu begins muộn trong waterfall.

có khả năng nguyên nhân: global CMS rule đã thêm loading="lazy" để trên—fold hoặc LCP image.

khắc phục và xác nhận: Xóa lazy thuộc tính từ đó image, tùy chọn thêm fetchpriority="high", và xác nhận của nó yêu cầu bắt đầu trước đó trong khớp trace.

Lazy image xuất hiện nhưng shifts trang

Symptom: nội dung jumps Khi deferred image enters viewport.

có khả năng nguyên nhân: image có không rõ ràng dimensions hoặc reserved aspect ratio.

khắc phục và xác nhận: Thêm width và height các thuộc tính hoặc reserve giống nhau aspect ratio trong CSS. Reload với layout-shift regions enabled và verify image không lâu hơn moves xung quanh nội dung.

Google không see deferred nội dung

Symptom: được kết xuất inspection là bị thiếu image URL hoặc nội dung đó xuất hiện sau khi human scrolls.

có khả năng nguyên nhân: scroll/nhấp handler không bao giờ chạy cho Googlebot, hoặc lazy-load library leaves thực URL trong data-src thay vì được kết xuất src.

khắc phục và xác nhận: sử dụng native lazy loading hoặc IntersectionObserver-based implementation, sau đó inspect được kết xuất HTML và xác nhận cuối URL và nội dung là present không có interaction.

Off-screen embed vẫn loads immediately

Symptom: dưới—fold iframe xuất hiện trong ban đầu waterfall despite lazy-loading thay đổi.

có khả năng nguyên nhân: thuộc tính là absent từ deployed iframe, wrapper tạo iframe eagerly, hoặc embed sits close đủ để viewport cho trình duyệt load ngưỡng.

khắc phục và xác nhận: Inspect trực tiếp DOM và yêu cầu initiator, kiểm thử on dài trang với cold bộ nhớ đệm, và verify yêu cầu là deferred cho đến khi trình duyệt near-viewport ngưỡng.

Tools cho implementation và proof

• Chrome DevTools Elements và Network panels: xác nhận deployed loading thuộc tính, identify mà script đã tạo iframe, và so sánh yêu cầu bắt đầu times trước khi và sau khi thay đổi.
• Chrome DevTools Performance panel: record load và verify đó deferring embed reduces startup main-chuỗi trao đổi hoạt động không có delaying LCP image.
• PageSpeed Insights: sử dụng off-screen-image diagnostic as starting list, sau đó tách biệt đúng dưới—fold candidates từ hero hoặc khác immediate nội dung.
• Search Console URL Inspection: inspect được kết xuất HTML và verify đó deferred image các URL end lên trong src và đó lazy-loaded nội dung tồn tại không có scroll hoặc nhấp.
• ** trình duyệt viewport và filmstrip:** kiểm thử nhiều hơn một viewport size. image dưới fold on desktop có thể là trên fold on nhỏ hơn hoặc differently shaped device.

Dưới—fold image deferral

Kiểm thử để chạy: Record cold-load Network trace trước khi và sau khi thêm native lazy loading để image well dưới ban đầu viewport.

Dự kiến kết quả: image yêu cầu là absent từ ban đầu cốt yếu waterfall và begins as viewport approaches nó.

thất bại interpretation: deployed markup lacks thuộc tính, JavaScript tạo hoặc fetches image eagerly, hoặc kiểm thử image là trong trình duyệt near-viewport ngưỡng.

Monitoring window: kiểm tra immediately sau khi deployment trên representative mobile và desktop viewport sizes.

Rollback trigger: Roll lại nếu image visible on ban đầu load là deferred hoặc nếu image routinely fails để xuất hiện trước khi người dùng reaches nó.

LCP-image exclusion

Kiểm thử để chạy: So sánh khớp performance traces và yêu cầu waterfalls cho trang LCP image sau khi removing blanket lazy loading.

Dự kiến kết quả: LCP image loads eagerly, của nó yêu cầu bắt đầu trước đó, và LCP không regress.

thất bại interpretation: một template hoặc optimization layer re-adds thuộc tính, hoặc phát hiện là vẫn delayed by CSS, JavaScript, hoặc markup.

Monitoring window: kiểm tra repeated lab chạy immediately, sau đó watch trường LCP over sau reporting window.

Rollback trigger: Roll lại xung quanh rollout nếu thay đổi delays khác cốt yếu các tài nguyên đủ để nguyên nhân repeatable LCP regression.

Được kết xuất-nội dung visibility

Kiểm thử để chạy: sử dụng URL Inspection để view được kết xuất HTML không có interacting với trang và tìm kiếm cho deferred image URL và associated nội dung.

Dự kiến kết quả: cuối URL xuất hiện trong src, và quan trọng nội dung là present trong được kết xuất HTML.

thất bại interpretation: implementation phụ thuộc vào scroll/nhấp event hoặc lazy-load script thất bại during kết xuất.

Monitoring window: Kiểm thử mỗi affected template sau khi phát hành và sau khi thay đổi lazy-load library hoặc CMS image pipeline.

Rollback trigger: Roll lại nếu indexable nội dung hoặc image các URL disappear từ được kết xuất output.

Tự kiểm tra: Lazy Loading

Five nhanh các câu hỏi on deferring images và iframes không có hurting Core Web Vitals hoặc lập chỉ mục. Pick câu trả lời cho mỗi, sau đó kiểm tra.

các tài nguyên worth của bạn time

My related writing

• JavaScript SEO Các vấn đề & Thực hành tốt nhất — nơi I cover đó shift từ JS-driven để trình duyệt-native lazy loading, và vì sao lazy-loaded nội dung (không chỉ images) là đó lập chỉ mục risk.
• Google PageSpeed Insights Cho SEOs & Nhà phát triển — connects đó “defer offscreen images” (bản dịch) «defer offscreen images» audit để lazy loading, plus đó rest of đó PSI báo cáo.
• Đó Beginner Hướng dẫn để SEO kỹ thuật — nơi performance và kết xuất fit trong đó bigger picture.

từ khoảng ngành

• khắc phục Lazy-Loaded trang web nội dung (Google Search Central) — definitive implementation-và-kiểm thử doc.
• trình duyệt-cấp độ image lazy loading cho web (web.dev) — native thuộc tính và LCP caveat, straight từ Google performance team.
• nó time để lazy-load offscreen iframes! (web.dev) — iframe case và của nó startup/INP benefit.
• Lazy loading demystified — Tìm kiếm Off Record, Ep. 98 (Google) — Mueller và Splitt đầy đủ episode on lazy loading, kết xuất, lập chỉ mục, và Core Web Vitals.
• Lazy loading explained: Speed lên của bạn trang web & UX fast (công cụ tìm kiếm Land) — thorough ngành hướng dẫn với CMS-cụ thể notes.
• Lazy loading (Performance hướng dẫn) (MDN) — nhà phát triển-reference view của API.
• lazy loading primer cho crawlability & lập chỉ mục thành công (Oncrawl) — crawl/chỉ mục angle trong depth.

Nhật ký thay đổi