PerformanceBa chỉ số Core Web Vitals đo ba trải nghiệm khác nhau:
- LCP (Largest Contentful Paint) — thời điểm phần tử nội dung lớn nhất trong viewport hiển thị. Tốt: ≤ 2.5s. Thường là ảnh banner hoặc khối heading. Cải thiện: giảm TTFB,
preloadảnh LCP và chofetchpriority="high", không lazy-load ảnh trên màn hình đầu, cắt bớt CSS/JS chặn render. - INP (Interaction to Next Paint) — độ trễ từ lúc người dùng tương tác tới khung hình kế tiếp, lấy theo tương tác chậm nhất trong phiên. Tốt: ≤ 200ms. Đã thay FID từ 2024. Cải thiện: chia nhỏ long task, giảm khối lượng render lại của React, tránh xử lý nặng đồng bộ trong handler.
- CLS (Cumulative Layout Shift) — tổng mức dịch chuyển layout ngoài ý muốn. Tốt: ≤ 0.1. Cải thiện: khai
width/height(hoặcaspect-ratio) cho ảnh và iframe, chừa sẵn chỗ cho banner/quảng cáo, dùngfont-display: optionalhoặc preload font để tránh nhảy chữ.
Cách đo: Lighthouse/DevTools là lab data (máy mình, mạng giả lập); con số Google dùng xếp hạng là field data từ CrUX. Trong app tự đo bằng thư viện web-vitals rồi bắn về analytics. Chênh lệch lab và field là câu hỏi nối tiếp rất hay gặp — lab không có mạng thật, thiết bị yếu, và không có tương tác người dùng nên INP thường không đo được trong lab.