Lazy Loading & Tối ưu Hình ảnh
Tóm tắt
Trì hoãn tải ảnh ngoài viewport + dùng WebP/AVIF giảm 25-50% kích thước — cải thiện LCP và giảm bandwidth đáng kể.
Giải thích đơn giản
Trang web có 50 ảnh nhưng bạn chỉ thấy 3 ảnh đầu. Lazy loading nói "chỉ tải 3 ảnh đang thấy, 47 ảnh còn lại tải sau khi cuộn xuống". Tiết kiệm như chỉ nấu cơm cho người đang ăn, không nấu trước cho cả ngày.
Lazy loading trì hoãn việc tải hình ảnh cho đến khi chúng gần viewport, cải thiện tốc độ tải ban đầu. HTML native: loading="lazy" (không cần JavaScript). Quan trọng: KHÔNG lazy load LCP element (ảnh hero) — chỉ ảnh dưới fold.
Tối ưu hình ảnh bao gồm: WebP format (giảm 25-35% so với JPEG), AVIF (giảm 50%), srcset cho responsive images (thiết bị khác nhau tải kích thước khác nhau), width/height attributes (tránh CLS), và alt text cho accessibility + SEO.
Fetchpriority="high" cho LCP image đảm bảo ảnh quan trọng nhất được tải ưu tiên.
⚡Tại sao quan trọng
Hình ảnh thường chiếm 50%+ trọng lượng trang. Lazy loading cải thiện LCP cho trang có nhiều ảnh. WebP giảm kích thước 25-35% so với JPEG, AVIF giảm 50%. Trang ecommerce trung bình tiết kiệm 2-3MB bandwidth nhờ lazy loading + WebP.
🔍AiSEO kiểm tra thế nào
AiSEO kiểm tra loading="lazy" trên hình ảnh dưới fold, LCP image không bị lazy load, srcset cho responsive, format (ưu tiên WebP/AVIF), width/height để tránh CLS, alt text cho SEO, và fetchpriority trên LCP image.
Điểm AiSEO
Đóng góp vào nhóm Performance (15đ tối đa). Images: tối đa 3đ — lazy loading: 1đ, modern format: 1đ, width/height + alt: 1đ.
Độ khó sửa
Biên tập viên: Dễ | Lập trình viên: Trung bình | AI Agent: Dễ