Hướng dẫn từ Webzone
Core Web Vitals là gì? Cách đo và cải thiện tốc độ website
Nội dung chính
Core Web Vitals là bộ chỉ số Google dùng để đánh giá trải nghiệm tải trang thực tế của người dùng. Chúng là một phần trong các tín hiệu xếp hạng về trải nghiệm trang, nhưng quan trọng hơn, chúng phản ánh việc khách có phải chờ, bấm hụt hay bị nhảy nội dung khi dùng website của bạn.
Ba chỉ số chính
| Chỉ số | Đo điều gì | Tốt | Cần cải thiện | Kém |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Thời gian hiển thị phần nội dung lớn nhất trong màn hình đầu | ≤ 2,5 giây | 2,5–4 giây | > 4 giây |
| INP (Interaction to Next Paint) | Độ trễ từ lúc thao tác (bấm, gõ) đến khi trang phản hồi | ≤ 200 ms | 200–500 ms | > 500 ms |
| CLS (Cumulative Layout Shift) | Mức độ bố cục bị xê dịch bất ngờ | ≤ 0,1 | 0,1–0,25 | > 0,25 |
INP thay thế chỉ số FID từ tháng 3/2024. Google đánh giá theo phân vị thứ 75 của lượt truy cập thực, nghĩa là 75% lượt xem phải đạt ngưỡng "tốt" thì trang mới được coi là đạt.
Dữ liệu thực tế và dữ liệu thử nghiệm
- Dữ liệu thực tế (field data) lấy từ người dùng Chrome thật, hiển thị trong Search Console (báo cáo Chỉ số thiết yếu về trang web) và phần trên của PageSpeed Insights. Đây là dữ liệu Google dùng để đánh giá. Website ít truy cập có thể chưa đủ dữ liệu.
- Dữ liệu thử nghiệm (lab data) từ Lighthouse, chạy trên một thiết bị giả lập. Dùng để tìm nguyên nhân và so sánh trước – sau khi sửa, không nên chạy theo điểm số 100.
Cải thiện LCP
- Phần tử LCP thường là ảnh lớn đầu trang (banner, ảnh sản phẩm). Không lazy-load ảnh này; có thể thêm
fetchpriority="high". - Nén ảnh và dùng định dạng hiện đại như WebP hoặc AVIF, phục vụ đúng kích thước cho từng màn hình bằng
srcset. - Giảm thời gian phản hồi máy chủ: bật bộ nhớ đệm trang (page cache), dùng hosting đủ mạnh, CDN nếu khách ở nhiều khu vực.
- Hạn chế CSS và JavaScript chặn hiển thị; tải trước (preload) font chính.
Cải thiện INP
- Giảm JavaScript chạy khi tải trang, đặc biệt là script bên thứ ba: chat, quảng cáo, bản đồ, nhiều mã theo dõi cùng lúc.
- Chia nhỏ các tác vụ dài; trì hoãn phần không cần ngay.
- Tránh xử lý nặng trong sự kiện bấm (ví dụ lọc hàng nghìn sản phẩm trên trình duyệt).
Cải thiện CLS
- Luôn khai báo
widthvàheight(hoặcaspect-ratio) cho ảnh, video, khung nhúng. - Dành sẵn chỗ cho banner, thông báo cookie, quảng cáo thay vì chèn đẩy nội dung xuống.
- Dùng
font-displayphù hợp và font dự phòng có kích thước gần giống để chữ không nhảy khi font tải xong.
Quy trình đề xuất
- Mở Search Console, xem nhóm URL nào "kém" hoặc "cần cải thiện" trên di động.
- Chọn một URL đại diện, chạy PageSpeed Insights, ghi lại chỉ số và phần tử LCP.
- Sửa nguyên nhân lớn nhất trước (thường là ảnh và script bên thứ ba).
- Triển khai, rồi theo dõi dữ liệu thực tế trong khoảng 28 ngày — Search Console cập nhật theo cửa sổ trượt.
Tốc độ là một phần của trải nghiệm, không phải mục tiêu duy nhất. Một trang nhanh nhưng thiếu thông tin vẫn không giữ được khách. Bạn có thể hỏi về trường hợp cụ thể trong chuyên mục này, kèm ảnh chụp báo cáo PageSpeed Insights.