Core Web Vitals là gì? LCP, INP, CLS giải thích

Core Web Vitals là bộ ba chỉ số hiệu năng do Google xác định để đo trải nghiệm tải trang thực tế của người dùng: LCP (Largest Contentful Paint), INP (Interaction to Next Paint) và CLS (Cumulative Layout Shift). Kể từ năm 2021, đây là tín hiệu xếp hạng chính thức trong thuật toán Google.

Định nghĩa ngắn gọn

Core Web Vitals là ba con số đo ba khía cạnh khác nhau của trải nghiệm tải trang: tốc độ xuất hiện nội dung chính, khả năng phản hồi với tương tác và mức độ ổn định của layout trong khi tải. Google đo chúng bằng dữ liệu thực tế từ Chrome UX Report (CrUX), không phải từ môi trường lab.

Tại sao quan trọng

• Google sử dụng Core Web Vitals như tín hiệu xếp hạng chính thức — trang đạt ngưỡng tốt có lợi thế so với trang tương tự nhưng hiệu năng kém
• Trang tải chậm làm tăng tỉ lệ thoát, giảm thời gian ở lại và giảm tỉ lệ chuyển đổi
• Mobile là nơi CWV thể hiện rõ nhất sự khác biệt — cùng trang nhưng trên 3G hoặc thiết bị cũ có thể fail mọi chỉ số

Thành phần chính

LCP — Largest Contentful Paint

LCP đo thời gian từ khi người dùng bắt đầu tải trang đến khi phần tử lớn nhất có thể nhìn thấy (thường là ảnh hero hoặc H1 lớn) hoàn tất render. Ngưỡng tốt: dưới 2.5 giây. Nguyên nhân LCP kém thường là ảnh hero quá nặng, font tải chậm hoặc server response time cao.

INP — Interaction to Next Paint

INP thay thế FID (First Input Delay) từ tháng 3/2024. INP đo độ trễ phản hồi của trang khi người dùng tương tác — click, tap, nhập bàn phím. Ngưỡng tốt: dưới 200ms. INP kém thường do JavaScript nặng chạy trên main thread, làm trình duyệt không kịp phản hồi tương tác.

CLS — Cumulative Layout Shift

CLS đo mức độ layout bị dịch chuyển trong khi tải. Điểm 0 nghĩa là không có element nào nhảy vị trí. Ngưỡng tốt: dưới 0.1. Nguyên nhân CLS thường là ảnh không có kích thước cố định, quảng cáo inject vào layout hoặc font swap làm text nhảy vị trí.

Ví dụ thực tế

Một landing page spa có ảnh hero 2.8MB không nén sẽ có LCP khoảng 5-8 giây trên 4G. Sau khi chuyển sang WebP và thêm width/height vào thẻ img, LCP giảm xuống 1.8 giây và CLS giảm về 0.02 vì trình duyệt đã biết trước kích thước ảnh. Không cần thay đổi code, chỉ tối ưu asset.

So sánh với khái niệm liên quan

| Chỉ số | Đo gì | Ngưỡng tốt | Ngưỡng cần cải thiện | |---|---|---|---| | LCP | Tốc độ xuất hiện nội dung lớn nhất | Dưới 2.5s | Trên 4s | | INP | Độ trễ phản hồi tương tác | Dưới 200ms | Trên 500ms | | CLS | Độ dịch chuyển layout | Dưới 0.1 | Trên 0.25 | | TTFB | Thời gian server phản hồi | Dưới 800ms | Thường đo riêng |

Checklist áp dụng

1. Đo CWV trên PageSpeed Insights với URL thật của trang quan trọng nhất
2. Kiểm tra LCP trên mobile — thường kém hơn desktop 2-3 lần
3. Nén ảnh hero và chuyển sang WebP hoặc AVIF
4. Thêm width và height cho tất cả thẻ img để tránh CLS
5. Tránh inject quảng cáo hoặc banner vào phần đầu nội dung
6. Kiểm tra JavaScript bundle size — giảm code không cần thiết trên route chính
7. Dùng font-display: swap và preload font để tránh font shift
8. Theo dõi CWV trong Google Search Console — tab Core Web Vitals

Sai lầm thường gặp

• Chỉ đo CWV trên desktop, bỏ qua mobile — nơi hầu hết traffic thực tế đến từ
• Tối ưu LCP lab score nhưng không cải thiện được field data (CrUX)
• Bỏ width/height của ảnh khi chỉnh CSS responsive, gây ra CLS
• Load font từ Google Fonts không dùng preconnect hoặc preload
• Nhầm FID với INP — FID đã không còn là Core Web Vital từ tháng 3/2024

Kết luận

Core Web Vitals là chỉ số kỹ thuật nhưng tác động trực tiếp đến kinh doanh qua tỉ lệ chuyển đổi và xếp hạng tìm kiếm. Tối ưu CWV không phải làm một lần — cần kiểm tra lại sau mỗi thay đổi thiết kế lớn hoặc khi thêm tính năng mới. Xem dịch vụ SEO technical foundation để biết cách Skylabs tích hợp tối ưu CWV ngay trong quy trình thiết kế.