Lazy Loading Là Gì? Cách Hoãn Tải Ảnh Ngoài Màn Hình

Lazy loading là gì và hoạt động như thế nào?

Lazy loading là việc hoãn tải tài nguyên nằm ngoài màn hình cho tới khi nó sắp được nhìn thấy. Với thuộc tính loading="lazy" trên thẻ img, trình duyệt chỉ tải ảnh khi ảnh tới một khoảng cách tính sẵn so với khung nhìn. Ảnh xem được ngay mà không cần cuộn thì vẫn tải bình thường.

Theo bài về lazy loading cấp trình duyệt của web.dev, Chrome tải ảnh lazy khi ảnh cách khung nhìn 1250px ở kết nối nhanh và 2500px ở kết nối chậm, để ảnh thường đã tải xong lúc người dùng cuộn tới.

Lazy loading hoãn những ảnh chưa cần, ảnh đang nhìn thấy vẫn tải ngay.

Vì sao không lazy load ảnh ở màn hình đầu?

Không lazy load ảnh ở màn hình đầu vì trình duyệt chỉ hoãn được một ảnh sau khi biết ảnh nằm ở đâu trên trang, nên ảnh đó tải chậm hơn bình thường. web.dev ghi rõ: không lazy load ảnh có khả năng nằm trong khung nhìn lúc trang mở, nhất là ảnh LCP. Google Search Central cũng khuyên y vậy.

Ba luật đặt thuộc tính loading

• Ảnh màn hình đầu: không khai loading="lazy". Ảnh LCP có thể thêm fetchpriority="high" để được tải ưu tiên.
• Ảnh bên dưới: khai loading="lazy" cho mọi ảnh và iframe nằm ngoài màn hình đầu.
• Kích thước ảnh: khai width và height cho mọi thẻ img để trình duyệt giữ chỗ, tránh xô lệch bố cục.

Ảnh lazy không khai kích thước làm tăng nguy cơ xô lệch bố cục, tức ảnh hưởng tới CLS. Cách xử lý ảnh lớn nhất của màn hình đầu nằm ở bài tối ưu LCP.

Lazy load sai chỗ làm chậm đúng tấm ảnh người dùng thấy đầu tiên.

Lazy loading sai cách làm Google không thấy nội dung ra sao?

Lazy loading sai cách làm Google không thấy nội dung khi ảnh hoặc đoạn chữ chỉ được tải sau một thao tác của người dùng, như cuộn hay bấm. Google Search không tương tác với trang. Tài liệu của Google yêu cầu mọi nội dung liên quan phải được tải khi nó hiện trong khung nhìn.

Kiểm lại bằng công cụ URL Inspection trong Search Console: mở phần rendered HTML và tìm URL ảnh trong thuộc tính src của thẻ img. Có URL ở đó là Google đã thấy ảnh. Hướng dẫn gốc ở trang Fix lazy-loaded content, phần cơ chế hiển thị nằm ở bài JavaScript SEO và rendering.

Ảnh lazy phải tự tải khi vào khung nhìn, không chờ người dùng cuộn hay bấm.

Thêm lazy loading cho website bằng cách nào?

Thêm lazy loading bằng cách khai thuộc tính loading="lazy" trên thẻ img và thẻ iframe nằm ngoài màn hình đầu. Theo web.dev, lazy loading có sẵn trong các trình duyệt lớn nên phần lớn website không còn cần thư viện ngoài. Với thẻ picture, chỉ cần khai thuộc tính trên thẻ img dự phòng.

Bốn việc khi thêm lazy loading

• Ảnh trong bài viết: khai loading="lazy", kèm width và height.
• Video nhúng và bản đồ: khai loading="lazy" trên thẻ iframe.
• Ảnh nền CSS: thuộc tính loading không áp được, chỉ dùng cho thẻ img.
• WordPress: kiểm thuộc tính loading của ảnh do theme và plugin sinh ra, nhất là ảnh ở màn hình đầu. Chi tiết ở bài SEO WordPress #15: hình ảnh và code.

Một thuộc tính trên thẻ img là đủ, phần còn lại là chọn đúng ảnh để khai.

Lazy loading nằm ở đâu trong bảng chuẩn SQA-200?

Lazy loading là mục P1.07 trong bảng chuẩn SQA-200, thuộc trụ cột I về kỹ thuật và Core Web Vitals, trọng số 1 điểm. Chuẩn đạt của mục này: đặt loading="lazy" cho mọi ảnh và iframe nằm ngoài màn hình đầu. Ảnh ở màn hình đầu không thuộc phạm vi của mục này.

Các mục đứng cạnh P1.07 trong trụ cột I

• P1.05 Gzip / Brotli Compression: bật nén Brotli hoặc Gzip trên máy chủ để giảm dung lượng HTML, CSS, JS khi truyền.
• P1.06 WebP / AVIF Images: chuyển ảnh raster sang định dạng WebP hoặc AVIF với mức nén phù hợp.
• P1.08 Critical CSS Inline: nhúng thẳng CSS của màn hình đầu vào trang để không chặn hiển thị.
• P1.09 Unused JS/CSS Elimination: gỡ hoặc hoãn tải CSS, JavaScript không dùng bằng code splitting và tree shaking.

Toàn bộ 99 mục kiểm, chuẩn đạt và điểm từng mục nằm ở bài SQA-200 là gì, mục này ở dòng P1.07 Native Lazy Loading.

P1.07 đạt khi mọi ảnh và iframe ngoài màn hình đầu có loading="lazy", còn ảnh màn hình đầu thì không.

Người làm website hay hỏi gì về lazy loading?

Người làm website hay hỏi ba câu về lazy loading: có cần thư viện JavaScript nữa không, lazy loading có ảnh hưởng tới việc Google lập chỉ mục ảnh không, và vì sao báo cáo Lighthouse mới không còn mục Defer offscreen images. Ba câu trả lời dưới đây lấy từ tài liệu của Google.

Có cần thư viện JavaScript để lazy load ảnh nữa không?

Phần lớn website không cần. web.dev ghi lazy loading đã có sẵn trong các trình duyệt lớn và được khuyên dùng cho đa số trường hợp, để bớt phụ thuộc JavaScript. Thư viện ngoài chỉ còn hợp khi cần hỗ trợ thêm trình duyệt cũ, hoặc muốn tự chỉnh khoảng cách bắt đầu tải ảnh.

Lazy loading có làm Google bỏ sót ảnh không?

Không, nếu làm đúng. Google nêu ba cách dùng được: lazy loading có sẵn của trình duyệt, IntersectionObserver và thư viện tải nội dung khi vào khung nhìn. Cả ba không chờ thao tác của người dùng. Cách kiểm là mở URL Inspection trong Search Console và tìm URL ảnh trong rendered HTML.

Vì sao Lighthouse không còn mục Defer offscreen images?

Tài liệu Lighthouse ghi mục Defer offscreen images đã được gỡ từ Lighthouse 13. Việc lazy load ảnh ngoài màn hình vẫn là thực hành Google khuyên, chỉ là báo cáo không còn một mục riêng cho nó. Cách kiểm chắc nhất là xem mã nguồn: ảnh ngoài màn hình đầu có loading="lazy" hay chưa.

Ba câu này quay về một ý: hoãn đúng ảnh, bằng cách trình duyệt và Google đều hiểu.