Image performance metrics

Image performance metrics là gì?

Image performance metrics (chỉ số hiệu suất ảnh) là tập hợp các thông số kỹ thuật đo lường cách ảnh tải, hiển thị và tương tác trên trang web — bao gồm thời gian tải, kích thước tệp, độ trễ giải mã, ảnh hưởng đến Largest Contentful Paint (LCP), Interaction to Next Paint (INP), và tổng thời gian chiếm dụng CPU khi xử lý ảnh. Đây không phải chỉ số riêng của ảnh, mà là phần tử ảnh trong bối cảnh trải nghiệm người dùng tổng thể.

Tại sao quan trọng trong SEO?

Các chỉ số này trực tiếp góp phần vào Core Web Vitals — nhóm tiêu chí đánh giá trải nghiệm người dùng do Google công bố từ năm 2021. Trong đó:

• LCP (Largest Contentful Paint): Ảnh thường là phần tử lớn nhất trong viewport đầu tiên. Nếu ảnh tải chậm hoặc chưa tối ưu, LCP bị kéo dài → làm giảm điểm xếp hạng trên kết quả tìm kiếm.
• INP (Interaction to Next Paint): Khi ảnh được tải không đúng cách (ví dụ: thiếu loading="lazy", kích hoạt layout shift khi load xong), nó gây giật/gián đoạn phản ứng người dùng → làm tăng INP.
• Tổng thời gian tải trang: Ảnh chiếm trung bình 40–60% dung lượng trang (theo HTTP Archive, dữ liệu tháng 6/2024). Mỗi KB thừa đều làm chậm thời gian render và tăng khả năng thoát trang.

Google xác nhận rõ ràng rằng Core Web Vitals là tín hiệu xếp hạng cho cả trang web và trang di động. Không tối ưu ảnh = bỏ qua một trong những yếu tố kiểm soát được dễ nhất nhưng có tác động mạnh nhất đến thứ hạng.

Cách hoạt động

Các chỉ số hiệu suất ảnh không tồn tại độc lập — chúng hình thành qua chuỗi sự kiện trình duyệt:

1. Trình duyệt phân tích HTML → phát hiện thẻ <img> hoặc CSS background-image.
2. Nếu ảnh không có srcset hoặc sizes, trình duyệt tải ảnh gốc (thường quá lớn cho thiết bị).
3. Ảnh được tải về → giải mã (decode) bằng CPU/GPU → đưa vào bộ nhớ → render lên màn hình.
4. Nếu ảnh không có width/height hoặc thiếu decoding="async", trình duyệt phải chờ giải mã xong mới vẽ → làm chậm LCP và gây layout shift.

Quá trình này xảy ra song song với các tài nguyên khác. Nhưng vì ảnh thường nặng nhất, nên sai sót ở khâu này ảnh hưởng lan tỏa đến toàn bộ chuỗi render.

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

Dưới đây là 7 bước cụ thể, dựa trên hướng dẫn chính thức từ Google Web Fundamentals và Lighthouse v11+:

1. Chọn định dạng phù hợp: Dùng WebP cho ảnh chụp, AVIF nếu hỗ trợ (Chrome 110+, Edge 110+); JPEG vẫn chấp nhận được nếu nén dưới 85% chất lượng. Không dùng PNG trừ khi cần trong suốt.
2. Nén ảnh trước khi đăng tải: Dùng công cụ như Squoosh.app, ImageOptim (macOS) hoặc sharp (Node.js). Mục tiêu: giảm 30–70% kích thước so với ảnh gốc — tùy độ phức tạp.
3. Áp dụng responsive images: Luôn dùng srcset + sizes cho ảnh có thể thay đổi kích thước theo viewport. Ví dụ:

   <img src="cat-400.jpg" srcset="cat-400.jpg 400w, cat-800.jpg 800w, cat-1200.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 900px) 50vw, 33vw" alt="Mèo con">

4. Đặt kích thước tĩnh: Gắn thuộc tính width và height (hoặc dùng CSS aspect-ratio) để tránh layout shift. Giá trị nên khớp với tỷ lệ thực tế của ảnh.
5. Tải ảnh theo nhu cầu: Thêm loading="lazy" cho mọi ảnh ngoài viewport đầu tiên. Ngoại lệ: ảnh trong LCP (ảnh hero) — nên tải ngay với fetchpriority="high".
6. Tối ưu giải mã: Thêm decoding="async" để trình duyệt không chặn render khi giải mã ảnh.
7. Giám sát định kỳ: Kiểm tra qua Lighthouse (trong DevTools), PageSpeed Insights hoặc WebPageTest. Tập trung vào báo cáo “Opportunities” và “Diagnostics”.

Lỗi thường gặp

Lỗi	Hệ quả	Cách khắc phục
Ảnh không có width/height	Gây layout shift → tăng CLS, làm chậm LCP	Thêm thuộc tính width/height hoặc dùng CSS aspect-ratio: 4/3
Dùng ảnh PNG cho ảnh chụp	Kích thước tệp tăng 2–5 lần so với WebP	Chuyển sang WebP/AVIF; giữ PNG chỉ cho ảnh vector hoặc cần trong suốt phức tạp
Thiếu srcset cho ảnh responsive	Trình duyệt tải ảnh 2000px trên điện thoại → chậm LCP, tốn băng thông	Áp dụng srcset + sizes; kiểm tra bằng DevTools > Network > Filter “img”
Ảnh hero không có fetchpriority	Trình duyệt xếp ảnh vào hàng đợi thấp → LCP bị trì hoãn 300–800ms	Thêm fetchpriority="high" cho ảnh đầu tiên trong viewport

Ví dụ thực tế

Một trang tin tức Việt Nam (domain .vn) đã cải thiện LCP từ 4.2s xuống còn 1.3s sau 3 tuần tối ưu ảnh:

• Chuyển 100% ảnh bài viết từ JPEG sang WebP (giảm trung bình 58% dung lượng).
• Áp dụng srcset cho tất cả ảnh trong bài, kèm sizes linh hoạt theo breakpoint.
• Thêm width/height và decoding="async" cho toàn bộ thẻ <img>.
• Ảnh hero được gắn fetchpriority="high" và preload qua <link rel="preload" as="image" href="...">.

Kết quả: Điểm LCP đạt “Tốt” (≤2.5s) trên 98% lượt truy cập di động; tỷ lệ thoát giảm 22%; thời gian trung bình trên trang tăng 37%.

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

Image performance metrics có ảnh hưởng đến SEO hình ảnh không?

Có, nhưng gián tiếp. Google Images không dùng LCP hay INP để xếp hạng ảnh riêng lẻ. Tuy nhiên, nếu trang chứa ảnh có hiệu suất kém, trang đó sẽ xếp hạng thấp hơn → ít lưu lượng hơn → ít cơ hội xuất hiện trong Google Images. Ngoài ra, ảnh tải chậm làm giảm tỷ lệ click vào kết quả hình ảnh do preview chậm.

Có nên nén ảnh đến mức nhỏ nhất có thể?

Không. Nén quá mức gây mất chi tiết, nhiễu, viền mờ — làm giảm độ tin cậy nội dung và trải nghiệm người dùng. Mức an toàn: WebP chất lượng 75–85%, AVIF chất lượng 60–75%. Kiểm tra bằng mắt trên thiết bị thật trước khi triển khai đại trà.

Core Web Vitals có thay đổi theo thời gian không?

Có thể thay đổi. Google đã cập nhật INP thay thế FID từ tháng 3/2024. Các ngưỡng “Tốt / Cần cải thiện / Kém” cũng được điều chỉnh định kỳ (lần gần nhất: tháng 12/2023). Theo dõi chính thức tại web.dev/vitals để cập nhật mới nhất.