Core Web Vitals là gì: LCP, INP, CLS giải thích dễ hiểu

Bạn mở Search Console và thấy báo cáo Core Web Vitals đầy chữ viết tắt: LCP, INP, CLS, kèm nhãn “Kém” màu đỏ, trong khi website mở trên máy mình vẫn thấy nhanh. Đây là ba chỉ số Google dùng để đo trải nghiệm của người xem thật, trên điện thoại và máy tính thật của họ. Bài này giải thích từng chỉ số bằng ví dụ đời thường, ngưỡng thế nào là đạt, vì sao điểm PageSpeed và báo cáo Search Console có lúc vênh nhau, và nên xử lý theo thứ tự nào.

Core Web Vitals là gì, có ảnh hưởng tới Google không

Core Web Vitals (tạm dịch: các chỉ số trải nghiệm cốt lõi) là ba con số trả lời ba câu hỏi của người xem: trang hiện ra nhanh không, bấm vào có phản hồi ngay không, và nội dung có bị nhảy lung tung khi đang đọc không. Google nói rõ các chỉ số này được hệ thống xếp hạng sử dụng và khuyên chủ website đạt mức tốt. Nhưng Google cũng nói luôn ưu tiên trang có nội dung phù hợp nhất, kể cả khi trải nghiệm chưa tốt; trải nghiệm tốt giúp bạn hơn đối thủ khi nội dung hai bên tương đương.

Nói gọn: đạt Core Web Vitals không tự đưa trang lên đầu, nhưng một trang chậm, giật sẽ làm mất khách ngay cả khi họ đã bấm vào.

Ba chỉ số giải thích bằng ví dụ

• LCP (Largest Contentful Paint): thời gian hiện phần nội dung lớn nhất. Khách mở trang chủ, phần to nhất trên màn hình đầu thường là ảnh bìa hoặc dòng tiêu đề lớn. LCP đo từ lúc bấm tới lúc phần đó hiện xong. Ảnh bìa nặng, máy chủ trả lời chậm là hai lý do hay gặp nhất.
• INP (Interaction to Next Paint): độ nhạy khi bấm. Khách bấm nút “Đặt lịch”, mở menu, chọn màu sản phẩm; INP đo khoảng chờ từ lúc bấm tới lúc màn hình thay đổi, tính trên các lần bấm trong suốt lượt xem. Từ ngày 12/3/2024, INP chính thức thay chỉ số FID cũ. Nguyên nhân hay gặp: quá nhiều mã JavaScript chạy cùng lúc, nhất là mã chat, theo dõi quảng cáo, hiệu ứng nặng.
• CLS (Cumulative Layout Shift): độ xô lệch bố cục. Khách định bấm “Gọi ngay” thì một ảnh hoặc băng quảng cáo tải xong đẩy nút xuống, họ bấm nhầm. CLS cộng dồn những lần nhảy như vậy. Nguyên nhân: ảnh, khung nhúng không khai báo kích thước, phông chữ tải muộn làm chữ đổi cỡ, thông báo chèn lên đầu trang.

Ngưỡng đạt của từng chỉ số

Theo tài liệu web.dev của Google, mỗi chỉ số có ba mức. Một trang được tính là đạt khi ít nhất 75% lượt xem thật (gọi là phân vị thứ 75) nằm trong mức Tốt, xét riêng cho điện thoại và máy tính.

Chỉ số	Đo cái gì	Tốt	Cần cải thiện	Kém
LCP	Phần nội dung lớn nhất hiện ra	≤ 2,5 giây	2,5–4 giây	> 4 giây
INP	Phản hồi sau khi bấm	≤ 200 mili giây	200–500 mili giây	> 500 mili giây
CLS	Mức xô lệch bố cục	≤ 0,1	0,1–0,25	> 0,25

CLS không có đơn vị: đó là điểm tính từ diện tích phần bị đẩy và quãng đường nó bị đẩy. Bạn chỉ cần nhớ càng gần 0 càng tốt.

Vì sao PageSpeed và Search Console vênh nhau

Có hai loại số đo. Dữ liệu thực tế lấy từ người dùng Chrome thật đã vào website trong khoảng thời gian gần đây (bộ dữ liệu Chrome User Experience Report, gọi tắt CrUX). Dữ liệu thử nghiệm là một lần chạy giả lập trên máy của Google, như điểm số 0–100 trong PageSpeed Insights. Core Web Vitals trong Search Console là dữ liệu thực tế. Điểm 0–100 là phép thử, và phép thử không đo được INP thật vì không có ai bấm, nên nó dùng một chỉ số thay thế.

Vì thế có thể xảy ra: điểm thử 95 nhưng Search Console báo Kém, vì khách thật dùng điện thoại yếu, mạng 4G chập chờn. Hoặc ngược lại. Khi hai nguồn vênh nhau, tin dữ liệu thực tế. Website mới hoặc ít người xem thường thấy dòng “Không có dữ liệu”, vì chưa đủ lượt xem để thống kê; khi đó dùng phép thử trong PageSpeed Insights để theo dõi tạm.

Đọc báo cáo trong Search Console và sửa theo thứ tự nào

1. Xem điện thoại trước. Báo cáo Core Web Vitals tách riêng điện thoại và máy tính; điện thoại thường là nơi điểm thấp hơn vì máy yếu hơn, mạng chập chờn hơn.
2. Bấm vào từng vấn đề, xem nhóm đường dẫn. Báo cáo gom các trang giống nhau thành nhóm (ví dụ mọi trang sản phẩm). Sửa giao diện của nhóm đó một lần là cả nhóm cùng lên.
3. Sửa theo chỉ số đỏ: LCP đỏ thì xem ảnh đầu trang và tốc độ máy chủ; INP đỏ thì xem mã bên thứ ba và hiệu ứng; CLS đỏ thì xem ảnh, khung nhúng thiếu kích thước. Bảy cách cụ thể có trong bài 7 việc nâng điểm PageSpeed mà không đổi thiết kế; còn nếu chưa rõ chậm vì đâu, xem bài Website chậm vì đâu: 6 nguyên nhân hay gặp.
4. Bấm “Bắt đầu theo dõi” rồi chờ. Báo cáo tính trên lượt xem của 28 ngày gần nhất và Google theo dõi bản sửa trong 28 ngày, nên báo cáo không đổi màu ngay hôm sau. Đừng sửa thêm thứ khác giữa chừng để còn biết bản sửa nào có tác dụng.

Core Web Vitals thay đổi mỗi khi website thêm plugin, đổi ảnh bìa hay gắn thêm mã quảng cáo, nên cần theo dõi định kỳ chứ không phải sửa một lần. Nếu bạn muốn có người theo dõi và xử lý phần này hằng tháng, xem trang Lưu trữ và bảo trì website.