Core Web Vitals
LCP, INP, CLS: ngưỡng “tốt” ở phân vị 75, cách đo dữ liệu thực tế và các cách sửa ưu tiên cho Landing Page.
- Nêu đúng ba chỉ số và ngưỡng tốt theo web.dev.
- Phân biệt dữ liệu thực tế (field) và dữ liệu phòng thí nghiệm (lab).
- Lập danh sách sửa lỗi ưu tiên cho từng chỉ số.
Core Web Vitals là bộ chỉ số đo trải nghiệm thực tế của người dùng về tốc độ tải, khả năng phản hồi và độ ổn định hình ảnh. Từ tháng 3/2024, INP (Interaction to Next Paint) chính thức thay thế FID trong bộ Core Web Vitals.
| Chỉ số | Đo điều gì | Tốt | Kém |
|---|---|---|---|
| LCP — Largest Contentful Paint | Thời điểm phần tử nội dung lớn nhất trong khung nhìn hiển thị | ≤ 2,5 s | > 4 s |
| INP — Interaction to Next Paint | Độ trễ từ tương tác (chạm, nhấp, gõ) tới khung hình kế tiếp, xét trong suốt phiên | ≤ 200 ms | > 500 ms |
| CLS — Cumulative Layout Shift | Mức xô lệch bố cục bất ngờ | ≤ 0,1 | > 0,25 |
Ngưỡng được đánh giá ở phân vị 75 của lượt tải trang thực tế, tách riêng di động và máy tính. Nghĩa là ít nhất 75% lượt truy cập phải đạt ngưỡng “tốt” thì trang mới được xếp vào nhóm tốt cho chỉ số đó.
Field và lab: đo ở đâu?
| Công cụ | Loại dữ liệu | Dùng để |
|---|---|---|
| Báo cáo Core Web Vitals trong Search Console | Field (CrUX) | Xem nhóm URL tốt / cần cải thiện / kém trên toàn site |
| PageSpeed Insights | Field (nếu đủ dữ liệu) + lab (Lighthouse) | Kiểm tra một URL cụ thể |
| Lighthouse, Chrome DevTools | Lab | Tìm nguyên nhân, thử sửa trước khi deploy |
| Thư viện web-vitals (JavaScript) | Field từ người dùng của bạn | Tự thu thập số liệu thực tế |
Sửa theo chỉ số
- LCP: giảm thời gian phản hồi máy chủ (CDN, trang tĩnh), nén ảnh hero, không lazy-load ảnh LCP, dùng fetchpriority="high", giảm CSS/JS chặn hiển thị, hạn chế font ngoài.
- INP: giảm và chia nhỏ tác vụ JavaScript dài, bớt script bên thứ ba (chat, pixel, widget), xử lý sự kiện nhẹ và cập nhật giao diện ngay, tránh DOM quá lớn.
- CLS: khai báo width/height cho ảnh, video, iframe; giữ chỗ trước cho banner, popup, nhúng; tránh chèn nội dung phía trên nội dung đang xem; dùng font-display hợp lý.
Bài tập thực hành
Chạy PageSpeed Insights cho Landing Page trên chế độ di động. Ghi lại LCP, INP, CLS (field nếu có, lab nếu không), xác định phần tử LCP và chọn một nguyên nhân lớn nhất để sửa.
Gợi ý: Phần chẩn đoán của Lighthouse chỉ ra phần tử LCP và các tác vụ dài. Nếu không có dữ liệu field, ghi rõ chỉ có số lab.
- Ghi đủ 3 chỉ số và nêu rõ field hay lab.
- Xác định được phần tử LCP.
- Chọn một thay đổi cụ thể, có giả thuyết vì sao nó cải thiện chỉ số.
- Đo lại sau khi sửa và ghi kết quả.
Kiểm tra kiến thức
- ≤ 100 ms
- ≤ 200 ms
- ≤ 500 ms
- ≤ 2,5 s
Xem đáp án
B. ≤ 200 ms — Theo web.dev, INP tốt khi ≤ 200 ms ở phân vị 75; trên 500 ms là kém.
- LCP
- INP
- CLS
- CTR
Xem đáp án
C. CLS — CLS (Cumulative Layout Shift) đo mức xô lệch bố cục bất ngờ; ngưỡng tốt ≤ 0,1.
- FID
- LCP
- TTFB
- CLS
Xem đáp án
A. FID — INP chính thức thay FID (First Input Delay) trong Core Web Vitals từ tháng 3/2024.