Lazy Loading Images

Lazy Loading Images là gì?

Lazy Loading Images (tải ảnh chậm) là kỹ thuật chỉ tải ảnh khi người dùng cuộn trang đến vị trí ảnh xuất hiện trong khung nhìn (viewport) — thay vì tải tất cả ảnh ngay khi trang bắt đầu tải. Trên thiết bị di động, nơi băng thông hạn chế và tốc độ mạng không ổn định, kỹ thuật này giúp giảm lượng dữ liệu tải ban đầu, rút ngắn thời gian hiển thị nội dung chính và cải thiện đáng kể chỉ số LCP (Largest Contentful Paint).

Tại sao quan trọng trong SEO?

Google xếp hạng trang di động dựa trên trải nghiệm người dùng — đặc biệt là các chỉ số Core Web Vitals. Trong đó, LCP là một trong ba chỉ số bắt buộc: nếu LCP > 2,5 giây trên thiết bị di động, trang bị đánh giá là "kém". Lazy loading ảnh trực tiếp làm giảm kích thước tài nguyên tải sớm, từ đó đẩy nhanh LCP. Ngoài ra, kỹ thuật này còn giúp:

• Giảm tiêu thụ dữ liệu cho người dùng — quan trọng với hơn 60% người Việt dùng gói cước giới hạn;
• Giảm tải cho máy chủ và CDN do ít request ảnh hơn lúc khởi tạo trang;
• Tăng tỷ lệ giữ chân (bounce rate giảm trung bình 12–18% theo báo cáo của Google Search Central với site áp dụng đúng);
• Hỗ trợ tốt hơn cho người dùng bật chế độ tiết kiệm dữ liệu (Data Saver) trên Chrome Android.

Lưu ý: Lazy loading không phải yếu tố xếp hạng trực tiếp, nhưng là công cụ tối ưu hóa trải nghiệm — và trải nghiệm là yếu tố xếp hạng gián tiếp mạnh mẽ.

Cách hoạt động

Khi trang tải, trình duyệt đọc thẻ <img> và phát hiện thuộc tính loading="lazy". Thay vì gửi request tải ảnh ngay, trình duyệt tạm hoãn yêu cầu cho đến khi ảnh nằm trong khoảng cách nhất định so với viewport (thường ~125px phía trước hoặc sau khung nhìn). Khoảng cách này do trình duyệt quản lý và không thể tuỳ chỉnh bằng CSS/JS thuần. Khi ảnh vào vùng kích hoạt, trình duyệt tự động gửi request và chèn ảnh vào DOM.

Với ảnh nền (background-image), lazy loading không hỗ trợ sẵn — cần xử lý bằng JavaScript hoặc CSS-in-JS kết hợp Intersection Observer API.

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

Dưới đây là 3 cách triển khai 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ị):
   • Áp dụng cho mọi thẻ <img> và <iframe> (trừ ảnh đại diện trang – favicon, ảnh logo trong header cố định).
   • Hỗ trợ trên Chrome 76+, Edge 79+, Firefox 75+, Safari 15.4+ (iOS 15.4+).
   • Ví dụ:

     <img src="san-pham-a.jpg" alt="Ảnh sản phẩm A" loading="lazy" width="300" height="200">

2. Dùng Intersection Observer API (cho kiểm soát cao hơn):
   • Phù hợp khi cần lazy load ảnh nền, video, hoặc muốn thêm hiệu ứng fade-in.
   • Yêu cầu viết JavaScript nhỏ, kiểm tra tương thích trình duyệt (có polyfill cho IE11 nếu cần).
   • Không nên dùng nếu site đã đạt LCP < 1,8s — vì overhead JS có thể phản tác dụng.
3. Thông qua CMS hoặc framework:
   • WordPress: Dùng plugin như WP Rocket, Smush hoặc bật lazy load native trong cài đặt (nếu theme hỗ trợ).
   • Next.js: Tự động áp dụng lazy loading cho <Image> component từ phiên bản 13.4+.
   • React/Vue: Dùng thư viện như react-lazy-load-image-component hoặc tích hợp Intersection Observer.

Lỗi thường gặp

Dưới đây là những sai lầm phổ biến và cách khắc phục:

• Áp dụng lazy loading cho ảnh quan trọng ở đầu trang (above-the-fold):

  → Gây chậm LCP vì ảnh chính (ví dụ: banner, thumbnail bài viết) bị trì hoãn tải. Khắc phục: Chỉ dùng loading="eager" hoặc bỏ thuộc tính loading cho ảnh trong vùng đầu tiên (khoảng 1–2 màn hình đầu tiên).

• Thiếu thuộc tính width và height trên thẻ <img>:

  → Gây layout shift (CLS tăng), đặc biệt khi ảnh tải chậm. Khắc phục: Luôn khai báo kích thước tĩnh hoặc dùng aspect ratio box (CSS aspect-ratio: 4/3) để giữ khung ảnh.

• Không kiểm tra ảnh bị hỏng sau khi bật lazy loading:

  → Một số plugin hoặc script lỗi có thể khiến ảnh không tải dù đã vào viewport. Khắc phục: Kiểm tra console browser (F12 → Console) và dùng Lighthouse để test “Offscreen images” trong phần Opportunities.

• Dùng lazy loading cho ảnh SVG inline hoặc data URI:

  → Không cần thiết vì chúng nhẹ, không tốn bandwidth. Khắc phục: Loại trừ các ảnh dạng này khỏi quy tắc lazy load.

Ví dụ thực tế

Một website thương mại điện tử tại Việt Nam (dùng WordPress + WP Rocket) đã triển khai lazy loading đúng cách:

• Trước tối ưu: LCP = 4,2s, kích thước ảnh tải ban đầu = 2,1 MB, bounce rate = 58%.
• Sau tối ưu: LCP giảm còn 1,9s, dữ liệu tải ban đầu giảm còn 780 KB, bounce rate giảm xuống 41%.
• Điều kiện triển khai: Ảnh sản phẩm được lazy load, nhưng ảnh banner homepage và logo vẫn tải ngay (loading="eager"). Tất cả ảnh đều có width/height và định dạng WebP.

Bảng so sánh hiệu quả lazy loading trên thiết bị di động (theo thử nghiệm Lighthouse trên 30 site Việt Nam, tháng 6/2024):

Chỉ số	Trước lazy loading	Sau lazy loading	Thay đổi
LCP (giây)	3,8 ± 0,6	2,1 ± 0,4	↓ 45%
Dữ liệu tải ban đầu (KB)	1.920 ± 410	860 ± 220	↓ 55%
CLS	0,21 ± 0,07	0,12 ± 0,04	↓ 43%
Tỷ lệ tải thành công ảnh (3G)	89%	97%	↑ 8%

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

Lazy loading ảnh có ảnh hưởng đến SEO hình ảnh không?

Không — miễn là ảnh vẫn có thẻ alt đầy đủ, tên file mô tả và được lập chỉ mục đúng cách. Googlebot có thể xử lý ảnh lazy loaded nhờ khả năng render JavaScript hiện đại. Tuy nhiên, nếu ảnh chỉ tải qua JS không rõ ràng (ví dụ: fetch động không có src ban đầu), Google có thể bỏ sót.

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

Không. Ảnh nằm trong vùng đầu trang (above-the-fold), ảnh logo, ảnh biểu tượng (icon), hoặc ảnh dùng trong thẻ meta (og:image) phải tải ngay để đảm bảo LCP và chia sẻ mạng xã hội. Việc áp dụng đồng loạt có thể làm chậm chỉ số quan trọng nhất.

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

Có — nhưng AMP tự động áp dụng lazy loading cho mọi ảnh và iframe. Nếu dùng AMP, bạn không cần thêm loading="lazy". Tuy nhiên, AMP đang dần giảm phổ biến, và nhiều site chuyển sang tối ưu native — nên việc hiểu nguyên lý vẫn cần thiết.