Frontend hay gặpCore Web Vitals là ba chỉ số Google dùng đánh giá trải nghiệm trang (và là tín hiệu xếp hạng tìm kiếm), tính trên người dùng thật tại percentile 75:
- LCP (Largest Contentful Paint) — tốc độ tải: thời điểm phần tử nội dung lớn nhất trong viewport hiển thị xong. Tốt ≤ 2.5s.
- INP (Interaction to Next Paint) — độ phản hồi: độ trễ từ tương tác đến frame kế tiếp, xét trên toàn phiên (thay thế FID từ 3/2024). Tốt ≤ 200ms.
- CLS (Cumulative Layout Shift) — ổn định thị giác: tổng mức layout bị xê dịch bất ngờ. Tốt ≤ 0.1.
Đo: field data (người dùng thật) qua CrUX / PageSpeed Insights / thư viện web-vitals; lab data (môi trường tái hiện) qua Lighthouse, DevTools. Google xếp hạng dựa trên field data.
Cải thiện:
- LCP: giảm TTFB (cache, CDN), preload ảnh hero + font, không lazy-load ảnh LCP, cắt giảm CSS/JS chặn render.
- INP: chia nhỏ long task trên main thread, giảm lượng JS chạy lúc tương tác, tránh handler nặng, virtualization cho DOM lớn.
- CLS: đặt width/height (hoặc aspect-ratio) cho ảnh/video/ads, chừa sẵn chỗ cho nội dung động, font-display: swap để hạn chế nhảy font, animate bằng transform thay vì thuộc tính layout.