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 của Search Console để xem lại rendered HTML 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.”
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.”
SEOs nên làm gì?
- Giữ hình ảnh hero và các hình ảnh hiển thị ngay khi tải trang khác ở trạng thái eager với chiều rộng và chiều cao được đặt.
- Sử dụng
loading="lazy"gốc cho các hình ảnh và iframe nằm dưới màn hình. - Nếu bạn dựa vào một thư viện để xem trước, video hoặc các phần động, hãy đảm bảo rằng markup cuối cùng hiển thị các URL thực trong các thuộc tính chuẩn và xác nhận trong rendered HTML.
Bonus
Lazy loading hữu ích khi được áp dụng một cách chọn lọc. Hãy coi nó là một tùy chọn cho Content không quan trọng.
Kiểm tra việc triển khai của bạn với rendered HTML và theo dõi xu hướng LCP của bạn theo thời gian.
© Cre: NGHIỆN SEO (Team biên tập).