Khi một trang web có 30-50 ảnh, việc tải tất cả ngay khi mở trang là lãng phí nghiêm trọng: người dùng phải chờ tải hàng chục ảnh mà họ chưa cần xem. Lazy loading giải quyết vấn đề này bằng cách chỉ tải ảnh khi chúng sắp xuất hiện trong viewport của người dùng. Kỹ thuật này là một trong những cải tiến có tác động lớn nhất đến Core Web Vitals.
Theo Google, lazy loading giúp giảm trung bình 30-60% tổng lượng data tải ban đầu cho các trang có nhiều ảnh, cải thiện điểm LCP (Largest Contentful Paint) — chỉ số SEO quan trọng nhất trong Core Web Vitals.
Native Lazy Loading: Cách Đơn Giản Nhất
Từ năm 2019, tất cả trình duyệt hiện đại đã hỗ trợ native lazy loading chỉ với một thuộc tính HTML đơn giản. Đây là cách triển khai nhanh nhất mà không cần JavaScript:
- ▸<img loading="lazy" src="..." alt="..."> — browser tự xử lý, không cần JS
- ▸Hỗ trợ: Chrome 77+, Firefox 75+, Safari 15.4+, Edge 79+ (>95% người dùng toàn cầu)
- ▸Kết hợp với width và height attributes để tránh layout shift (CLS)
- ▸Không áp dụng cho ảnh hero/above-the-fold — những ảnh này cần tải ngay
QUAN TRỌNG: Không dùng loading="lazy" cho ảnh hero (banner đầu trang) và 1-2 ảnh đầu tiên trong nội dung. Những ảnh này nằm above-the-fold và cần tải ngay để không làm giảm điểm LCP.
Ảnh Nào Nên Lazy Load, Ảnh Nào Không?
- ▸NÊN lazy load: Ảnh trong bài viết, ảnh sản phẩm bên dưới fold, gallery, ảnh trong footer
- ▸KHÔNG lazy load: Hero banner, logo, ảnh OG (Open Graph), ảnh nằm trong 600px đầu trang
- ▸TÙY CHỌN: Ảnh thumbnail trong danh sách sản phẩm — lazy load nếu danh sách dài, load ngay nếu chỉ 6-8 sản phẩm
Lazy Loading Nâng Cao: Intersection Observer API
Với các framework như React, Vue, hoặc Next.js, bạn có thể triển khai lazy loading tùy chỉnh bằng Intersection Observer API — cho phép kiểm soát chi tiết hơn: preload threshold (bắt đầu tải trước khi ảnh vào viewport bao nhiêu px), loading animation (hiệu ứng fade/blur-to-sharp), và progressive loading (tải ảnh placeholder trước, rồi đổi sang ảnh chất lượng cao).
Placeholder Technique: Tránh Layout Shift (CLS)
CLS (Cumulative Layout Shift) xảy ra khi ảnh tải xong đẩy nội dung bên dưới xuống — gây khó chịu cho người dùng và làm giảm điểm Core Web Vitals. Giải pháp: luôn khai báo width và height cho thẻ img, hoặc dùng CSS aspect-ratio để giữ chỗ cho ảnh trước khi tải. Kỹ thuật LQIP (Low Quality Image Placeholder) hiển thị phiên bản mờ/blur của ảnh trong khi ảnh chất lượng cao đang tải.
- ▸Luôn set width và height trên thẻ <img> — browser tính aspect ratio tự động
- ▸CSS: aspect-ratio: 16/9 cho ảnh landscape, 4/3 cho ảnh sản phẩm vuông
- ▸LQIP: Generate ảnh placeholder 20x20px (dung lượng vài byte), blur với CSS
- ▸Skeleton placeholder: Hiển thị khung xám động trong khi ảnh đang tải
Lazy Loading Trong WordPress, Next.js và Shopify
WordPress / WooCommerce
WordPress 5.5+ tự động thêm loading="lazy" cho tất cả ảnh trong content. Kiểm tra bằng cách inspect HTML và tìm loading attribute. Nếu theme của bạn override behavior này, thêm filter: add_filter("wp_lazy_loading_enabled", "__return_true").
Next.js
Component <Image> của Next.js mặc định lazy load tất cả ảnh và tự động tối ưu kích thước, format. Dùng priority={true} cho ảnh hero để disable lazy loading và ưu tiên tải sớm.
Shopify
Shopify themes hiện đại (Dawn và các theme 2.0) đã có native lazy loading mặc định. Kiểm tra bằng Google PageSpeed Insights — nếu còn cảnh báo "defer offscreen images", add loading="lazy" thủ công trong theme.liquid.