Lazy Loading

Lazy Loading là gì?

Lazy Loading (tạm dịch: tải chậm / tải theo nhu cầu) là kỹ thuật chỉ tải nội dung — như hình ảnh, video, iframe hoặc đoạn mã JavaScript — khi người dùng cuộn trang đến gần vị trí xuất hiện của chúng trong khung nhìn (viewport), thay vì tải tất cả ngay từ đầu.

Đây không phải là cách làm chậm trang, mà là cách tối ưu hóa hiệu suất bằng cách phân bổ tài nguyên hợp lý. Nội dung vẫn hiển thị đầy đủ và chính xác, nhưng thời điểm tải được điều chỉnh để giảm áp lực lên máy chủ, băng thông và CPU trình duyệt.

Tại sao quan trọng trong SEO?

Google và các công cụ tìm kiếm ngày càng coi trọng trải nghiệm người dùng (UX) như một yếu tố xếp hạng trực tiếp. Lazy Loading ảnh hưởng tích cực đến ba chỉ số Core Web Vitals — đặc biệt là Largest Contentful Paint (LCP) và Cumulative Layout Shift (CLS):

• LCP cải thiện: Khi ảnh lớn ở đầu trang được tải trước, còn ảnh dưới cùng bị hoãn, thời gian hiển thị nội dung chính giảm rõ rệt — thường từ 0,8–2,5 giây tuỳ cấu trúc trang.
• CLS ổn định hơn: Nếu ảnh không có kích thước cố định (width/height), việc tải muộn có thể gây dịch chuyển bố cục. Nhưng nếu triển khai đúng (kèm thuộc tính width, height, hoặc aspect-ratio), CLS giảm đáng kể — nhiều trang đạt dưới 0,1 (mức tốt).
• Tỷ lệ thoát giảm: Trang tải nhanh hơn giúp giữ chân người dùng lâu hơn. Theo dữ liệu thử nghiệm thực tế của Google (2023), trang giảm LCP từ 4s xuống 1,8s ghi nhận tỷ lệ thoát giảm trung bình 22% trên thiết bị di động.

Lưu ý: Lazy Loading không ảnh hưởng đến khả năng lập chỉ mục nội dung — Googlebot xử lý ảnh và iframe đã lazy load bình thường nếu thẻ HTML hợp lệ và không bị chặn bởi JavaScript phức tạp.

Cách hoạt động

Lazy Loading dựa vào hai cơ chế chính:

1. Intersection Observer API: Là API chuẩn của trình duyệt, cho phép theo dõi xem một phần tử có xuất hiện trong viewport hay chưa — không cần dùng scroll event gây nặng CPU.
2. Thuộc tính loading="lazy": Được hỗ trợ từ Chrome 76+, Firefox 75+, Safari 15.4+. Khi thêm vào thẻ <img> hoặc <iframe>, trình duyệt tự động hoãn tải cho đến khi phần tử nằm trong phạm vi ~125px trước khi vào viewport.

Với ảnh nền CSS hoặc nội dung động (ví dụ: sản phẩm trong danh sách kéo), cần dùng JavaScript thủ công kết hợp Intersection Observer — vì loading="lazy" chỉ áp dụng cho thẻ <img> và <iframe>.

Hướng dẫn thực hiện

Dưới đây là các cách triển khai Lazy Loading phổ biến, từ đơn giản nhất đến nâng cao:

1. Sử dụng thuộc tính native loading="lazy" (khuyến nghị)
   • Thêm vào mọi thẻ <img> không cần hiển thị ngay:

     <img src="san-pham.jpg" loading="lazy" width="600" height="400" alt="Mô tả ngắn">

   • Bắt buộc kèm width và height (hoặc aspect-ratio) để tránh layout shift.
   • Không dùng cho ảnh ở vùng “above the fold” — ví dụ banner đầu trang, logo — vì có thể làm chậm LCP.
2. Triển khai bằng JavaScript (dành cho iframe, ảnh nền, hoặc trình duyệt cũ)
   • Dùng IntersectionObserver để theo dõi phần tử.
   • Khi phần tử vào vùng quan sát, thay data-src thành src và khởi chạy.
   • Luôn có fallback: nếu JS bị chặn hoặc lỗi, ảnh vẫn hiển thị nhờ src mặc định hoặc placeholder.
3. Plugin CMS (WordPress, Shopify…)
   • WordPress: Plugin như Smush, WP Rocket, hoặc LiteSpeed Cache hỗ trợ bật lazy load qua giao diện — nhưng cần kiểm tra xem có tự thêm width/height hay không.
   • Shopify: Dùng thuộc tính loading="lazy" trực tiếp trong theme Liquid — không cần plugin bên ngoài.

Lỗi thường gặp

Lỗi	Nguồn gốc	Cách khắc phục
Ảnh không hiển thị trên mobile	Thiếu width/height, trình duyệt không cấp không gian chờ	Thêm kích thước cố định hoặc dùng aspect-ratio: 4/3 trong CSS
Lỗi LCP tăng sau khi bật lazy load	Áp dụng cho ảnh đầu trang hoặc hero image	Loại trừ ảnh above-the-fold khỏi lazy load — chỉ áp dụng từ ảnh thứ 2 trở đi
Google Search Console báo “Hình ảnh không được lập chỉ mục”	Ảnh tải bằng JS không có src ban đầu, hoặc bị chặn bởi robots.txt	Dùng src placeholder (ví dụ: data:image/svg+xml,%3Csvg...) hoặc đảm bảo đường dẫn ảnh không bị chặn

Ví dụ thực tế

Một trang danh mục sản phẩm có 42 ảnh. Trước khi áp dụng lazy loading:

• Tổng kích thước ảnh tải ban đầu: 8,2 MB
• Thời gian tải trang (mobile, 3G): 9,4 giây
• LCP: 5,1s — xếp loại “kém” theo PageSpeed Insights

Sau khi triển khai đúng:

• Chỉ tải 3 ảnh đầu (above the fold) ngay lập tức
• Các ảnh còn lại tải khi người dùng cuộn — tổng băng thông ban đầu giảm còn 1,3 MB
• Thời gian tải trang giảm còn 3,2 giây
• LCP cải thiện về 1,6s — đạt mức “tốt”

Kết quả: Tăng 17% thời gian tương tác trung bình và cải thiện vị trí xếp hạng từ #12 lên #6 với từ khóa chính “điện thoại giá rẻ” trong vòng 6 tuần.

Câu hỏi thường gặp

Lazy Loading có làm ảnh mất SEO không?

Không — miễn là ảnh có thẻ <img> hợp lệ, thuộc tính alt đầy đủ, và nguồn ảnh (src) tồn tại, dễ truy cập. Googlebot đọc và lập chỉ mục ảnh lazy load bình thường từ năm 2020.

Có nên dùng Lazy Loading cho tất cả ảnh trên trang?

Không. Ảnh ở vùng đầu trang (hero banner, logo, biểu mẫu liên hệ) nên tải ngay để đảm bảo LCP tốt. Chỉ áp dụng lazy load cho ảnh xuất hiện sau khi cuộn — thường từ ảnh thứ 2 trở đi. Việc áp dụng thiếu chọn lọc có thể phản tác dụng.

Lazy Loading có tương thích với AMP không?

Có, nhưng AMP tự quản lý lazy load rồi — không cần thêm loading="lazy". Thẻ <amp-img> luôn hoạt động theo cơ chế tải chậm. Nếu dùng AMP, bạn không cần can thiệp thêm, trừ khi tùy chỉnh hành vi qua thuộc tính data-hero hoặc decoding="async".