Core Web Vitals 2024: Giải mã LCP, INP và CLS

Nếu làm web mà không quan tâm đến Core Web Vitals (CWV), bạn đang tự tay bóp nghẹt thứ hạng SEO của mình. Đây là bộ chỉ số Google dùng để đo lường Trải nghiệm người dùng (UX) thực tế.

Từ tháng 3/2024, Google đã thay thế chỉ số FID bằng INP. Hãy cùng cập nhật kiến thức mới nhất.

1. LCP (Largest Contentful Paint) - Tốc độ tải

LCP đo thời gian để phần tử nội dung lớn nhất (ảnh banner, tiêu đề H1, block text chính) hiển thị xong trên màn hình.

• Tốt: < 2.5 giây.
• Cần cải thiện: 2.5s - 4.0s.
• Kém: > 4.0 giây.

Cách tối ưu:

• Nén ảnh (dùng format WebP/AVIF).
• Sử dụng CDN.
• Preload ảnh LCP (<link rel="preload">).
• Giảm Server Response Time (TTFB).

2. INP (Interaction to Next Paint) - Độ phản hồi

INP thay thế cho FID. Nó đo độ trễ (latency) của tất cả các tương tác (click, tap, gõ phím) trong suốt quá trình user ở trên trang. Nó phản ánh độ “mượt” của web.

• Tốt: < 200 mili giây.
• Kém: > 500 mili giây.

Ví dụ: Bạn bấm nút “Menu” trên Mobile, nhưng mất 1s sau menu mới trượt ra. Đó là Poor INP.

Cách tối ưu:

• Giảm Javascript execution time (tránh JS chặn main thread).
• Sử dụng Web Workers.
• Tránh các tác vụ nặng (long tasks) trong event handler.

3. CLS (Cumulative Layout Shift) - Độ ổn định

CLS đo lường sự “nhảy” lung tung của giao diện khi đang tải. Ví dụ: Bạn định bấm nút “Hủy”, bỗng dưng một cái quảng cáo load xong, đẩy nút “Hủy” xuống dưới và thế chỗ bằng nút “Mua Ngay”. Bùm! Bạn mất tiền.

• Tốt: < 0.1.
• Kém: > 0.25.

Cách tối ưu:

• Luôn set width và height cho thẻ <img> và <video>.
• Dành sẵn chỗ (placeholder/skeleton) cho quảng cáo hoặc dynamic content.
• Tránh chèn content mới lên trên content cũ.

Công cụ đo lường

Đừng đoán mò. Hãy dùng tool:

1. PageSpeed Insights: Đo cả Lab data và Field data (dữ liệu người dùng thật).
2. Chrome DevTools (Tab Performance): Để debug sâu.
3. Lighthouse: Để audit tổng thể.

Tối ưu CWV không chỉ tốt cho SEO, mà quan trọng hơn là giữ chân người dùng ở lại với bạn.

---

Nguồn dữ liệu: Google web.dev.