Google cảnh báo: Lazy loading sai chỗ = LCP chậm

Lazy loading là kỹ thuật tối ưu tốc độ website quen thuộc, nhưng nếu áp dụng sai cách, nó có thể khiến LCP (Largest Contentful Paint) chậm, ảnh hưởng trực tiếp đến SEO và trải nghiệm người dùng.

Trong bài viết này, chúng ta sẽ phân tích sâu các chia sẻ từ John Mueller và Martin Splitt của Google về cách lazy loading tác động đến lập chỉ mục, xếp hạng và Core Web Vitals, đồng thời gợi ý cách triển khai tối ưu nhất cho website của bạn.

Google cảnh báo: Lazy loading sai chỗ = LCP chậm

Trong một tập gần đây của podcast Search Off the Record của Google, Martin Splitt và John Mueller đã thảo luận về thời điểm lazy loading hữu ích và khi nào nó có thể làm chậm các trang.

Splitt đã sử dụng một ví dụ thực tế trên developers.google.com để minh họa một mô hình phổ biến: Việc mặc định tất cả các hình ảnh là lazy có thể làm chậm Largest Contentful Paint (Viết tắt là LCP) nếu nó bao gồm các hình ảnh hiển thị ngay khi tải trang.

Splitt nói:

“Hệ thống quản lý Content mà chúng tôi đang sử dụng cho developers.google.com … mặc định tất cả các hình ảnh là lazy loading, điều này không tốt.”

Splitt đã sử dụng ví dụ này để giải thích tại sao lazy-loading hình ảnh hero là rủi ro: bạn yêu cầu trình duyệt đợi phần tử hiển thị rõ nhất, điều này có thể đẩy lùi LCP và gây ra sự dịch chuyển bố cục nếu không đặt kích thước.

Splitt nói:

“Nếu bạn đang sử dụng lazy loading trên một hình ảnh hiển thị ngay lập tức, điều đó rất có thể sẽ ảnh hưởng đến Largest Contentful Paint của bạn. Điều đó gần như được đảm bảo.”

Lazy loading làm chậm LCP như thế nào?

LCP đo lường thời điểm văn bản hoặc hình ảnh lớn nhất trong khung nhìn ban đầu được hiển thị.

Thông thường, trình quét tải trước của trình duyệt sẽ tìm thấy hình ảnh hero đó sớm và tìm nạp nó với ưu tiên cao để nó có thể hiển thị nhanh chóng.

Khi bạn thêm loading="lazy" vào cùng một hình ảnh hero đó, bạn sẽ thay đổi lịch trình của trình duyệt:

• Hình ảnh được coi là ưu tiên thấp hơn, vì vậy các tài nguyên khác bắt đầu trước.

• Trình duyệt đợi cho đến khi bố cục và các công việc khác tiến triển trước khi yêu cầu hình ảnh hero.

• Hình ảnh hero sau đó cạnh tranh băng thông sau khi các script, style và các tài sản khác đã được xếp hàng.

Sự chậm trễ đó làm dịch chuyển thời gian hiển thị của phần tử lớn nhất muộn hơn, điều này làm tăng LCP của bạn.

Trên các mạng chậm hoặc thiết bị bị giới hạn CPU, hiệu ứng này rõ rệt hơn. Nếu thiếu chiều rộng và chiều cao, hình ảnh đến muộn cũng có thể làm dịch chuyển bố cục và gây cảm giác “khó chịu”.

Rủi ro SEO với một số thư viện

Các trình duyệt hiện hỗ trợ thuộc tính loading tích hợp cho hình ảnh và iframe, loại bỏ nhu cầu sử dụng JavaScript nặng trong các tình huống tiêu chuẩn. WordPress đã áp dụng lazy loading gốc theo mặc định, giúp nó phổ biến hơn.

Splitt nói:

“Các trình duyệt có thuộc tính gốc cho hình ảnh và iframe, thuộc tính loading … điều này khiến trình duyệt tự động xử lý lazy loading cho bạn.”

Các thư viện lazy-loading cũ hơn hoặc tùy chỉnh có thể ẩn URL hình ảnh trong các thuộc tính không chuẩn. Nếu URL thực sự không bao giờ nằm trong src hoặc srcset trong HTML Google hiển thị, hình ảnh có thể không được thu thập để index.

Splitt nói:

“Chúng tôi đã thấy nhiều thư viện lazy loading … sử dụng một số thuộc tính data-source thay vì thuộc tính source… Nếu nó không nằm trong thuộc tính source, chúng tôi sẽ không thu thập nó nếu nó nằm trong một thuộc tính tùy chỉnh nào đó.”

Cách kiểm tra website của bạn

Sử dụng URL Inspection(Kiểm tra URL) của Search Console để xem lại rendered HTML (HTML đã kết xuất) và xác nhận rằng các hình ảnh hiển thị ngay khi tải trang và các module lazy-loaded được phân giải thành các thuộc tính chuẩn. Tránh dựa vào ảnh chụp màn hình.

Splitt khuyên:

“Nếu rendered HTML trông giống như nó chứa tất cả các URL hình ảnh trong thuộc tính source của thẻ hình ảnh … thì bạn sẽ ổn.”

Các bước kiểm tra:

1. Truy cập Google Search Console
   • Mở: https://search.google.com/search-console/
   • Đăng nhập bằng tài khoản Google quản lý website của bạn.
2. Chọn công cụ URL Inspection (Kiểm tra URL)
   • Ở thanh menu bên trái, bấm vào Kiểm tra URL.
   • Nhập URL của trang cần kiểm tra và nhấn Enter.
3. Xem phần Rendered HTML (HTML đã kết xuất)
   • Sau khi quá trình phân tích hoàn tất, nhấn Xem trang đã thu thập dữ liệu → Xem HTML.
   • Kiểm tra xem trong mã HTML đã kết xuất:
     • Hình ảnh chính của trang có xuất hiện URL trực tiếp trong thuộc tính src của thẻ <img> hay không.
     • Nếu chỉ thấy thuộc tính data-src hoặc trống, nghĩa là lazy loading của bạn chưa được Google nhận diện đúng.
4. Không dựa vào ảnh chụp màn hình
   • Splitt nhấn mạnh rằng hình ảnh xem trước (screenshot) trong Search Console không phản ánh chính xác quá trình Googlebot đọc dữ liệu.
   • Hãy luôn dựa vào HTML đã kết xuất để kiểm tra.
5. Khi nào là ổn?
   • Nếu bạn thấy tất cả URL hình ảnh xuất hiện trong thuộc tính src, như Splitt nói:

• • Điều này có nghĩa là Google có thể nhận diện và lập chỉ mục hình ảnh đúng cách.

Tác động đến Ranking

Splitt cho rằng tác động đến ranking là khiêm tốn. Core Web Vitals đóng góp vào ranking, nhưng ông gọi đó là “một yếu tố rất nhỏ trong hầu hết các trường hợp.”

Cách khắc phục

Để khắc phục, bạn cần xác định các hình ảnh “above the fold” (những hình ảnh hiển thị ngay khi trang tải) và loại bỏ thuộc tính loading="lazy" khỏi chúng.

• Xác định hình ảnh LCP: Sử dụng công cụ PageSpeed Insights hoặc Lighthouse của Google để kiểm tra và xác định hình ảnh nào là Largest Contentful Paint trên trang của bạn.
• Loại bỏ lazy loading: Sau khi đã biết hình ảnh LCP, bạn hãy chỉnh sửa mã HTML của trang, đảm bảo rằng hình ảnh này không có thuộc tính loading="lazy".

Ví dụ:

Thay vì:

<img src="hero-image.jpg" alt="Hero Image" loading="lazy" />

Hãy sửa thành:

<img src="hero-image.jpg" alt="Hero Image" />

Nếu bạn sài các plugin cache như WP Rocket, Litespeed cache… vào loại trừ media khỏi Lazy Load là được

Kết luận

Bằng cách khắc phục này, trình duyệt sẽ tải hình ảnh quan trọng nhất (LCP) ngay lập tức, cải thiện tốc độ hiển thị và điểm Core Web Vitals của trang. Trong khi đó, các hình ảnh còn lại ở phía dưới (above the fold) vẫn sẽ được áp dụng lazy loading để tiết kiệm băng thông và tối ưu hóa hiệu suất tổng thể của trang.

Chúc các bạn thành công !!!