Từ tháng 5/2021, Google chính thức đưa Core Web Vitals vào tiêu chí xếp hạng. Đây là bộ 3 chỉ số đo trải nghiệm người dùng: LCP (tốc độ tải), FID/INP (tương tác), và CLS (ổn định bố cục). Ảnh ảnh hưởng trực tiếp đến 2 trong 3 chỉ số này.
LCP (Largest Contentful Paint) — Ảnh Là Nguyên Nhân Số 1
LCP đo thời gian để phần tử lớn nhất trong viewport hiển thị. Trong 75% trường hợp, phần tử đó là ảnh (hero image, ảnh sản phẩm, banner). Google yêu cầu LCP dưới 2.5 giây để đạt điểm "Good".
Theo Web Almanac 2025, ảnh là LCP element trên 72% các trang web. Định dạng ảnh là yếu tố đơn lẻ có ảnh hưởng lớn nhất đến điểm LCP — chuyển từ JPG sang WebP thường cải thiện LCP từ 0.3–0.8 giây.
Tối Ưu LCP Bằng Ảnh
- ▸Dùng WebP: Giảm 25–35% dung lượng, tải nhanh hơn đáng kể
- ▸Preload hero image: Thêm `<link rel="preload" as="image">` cho ảnh LCP
- ▸Không lazy load ảnh hero: Hero image phải load ngay, không dùng `loading="lazy"`
- ▸Responsive images: Dùng `srcset` để serve đúng kích thước cho từng màn hình
- ▸Nén ảnh đúng cách: Chất lượng WebP 80–85% là tối ưu nhất
- ▸CDN: Phân phối ảnh từ server gần người dùng
CLS (Cumulative Layout Shift) — Ảnh Không Có Kích Thước
CLS đo độ dịch chuyển bố cục không mong muốn. Ảnh không có `width` và `height` trong HTML là nguyên nhân phổ biến nhất gây CLS cao — trình duyệt không biết trước kích thước ảnh nên không thể giữ không gian trước.
- ▸Luôn thêm `width` và `height` attributes cho thẻ `<img>`
- ▸Dùng `aspect-ratio` CSS để giữ tỷ lệ
- ▸Tránh chèn ảnh động (ads, banners) vào giữa nội dung
- ▸Skeleton loading giữ không gian khi ảnh chưa load
Kiểm Tra Core Web Vitals Liên Quan Đến Ảnh
- ▸PageSpeed Insights: Xem "Opportunities" — thường có "Properly size images", "Serve images in next-gen formats"
- ▸Chrome DevTools > Performance: Xem LCP element được highlight màu đỏ
- ▸Google Search Console > Core Web Vitals report: Xem trang nào "Poor" và "Needs Improvement"
- ▸WebPageTest: Filmstrip view cho thấy ảnh nào tải chậm nhất
Workflow Tối Ưu Ảnh Cho Core Web Vitals
- 1Chạy PageSpeed Insights — note các cảnh báo liên quan đến ảnh
- 2Dùng SEO Image Pro chuyển toàn bộ ảnh sang WebP (quality 82%)
- 3Upload lại ảnh, cập nhật URL nếu cần
- 4Thêm width/height attributes vào tất cả thẻ img
- 5Preload hero image bằng resource hint
- 6Chạy lại PageSpeed — so sánh điểm trước/sau