LCP là gì?
LCP (Largest Contentful Paint) là chỉ số thuộc Core Web Vitals, đo thời gian hiển thị phần tử nội dung lớn nhất trên màn hình. Ngưỡng "Tốt" theo Google là từ 2,5 giây trở xuống, đo tại phân vị 75 của người dùng thực tế.
LCP là gì?
LCP (Largest Contentful Paint) là một trong 3 chỉ số thuộc Core Web Vitals, đo thời gian từ khi người dùng bắt đầu tải trang đến khi phần tử nội dung lớn nhất hiển thị trên màn hình (thường là hình ảnh banner, tiêu đề lớn, hoặc khối văn bản chính).
Ngưỡng đánh giá LCP
| Mức đánh giá | Thời gian LCP |
|---|---|
| Tốt (Good) | ≤ 2,5 giây |
| Cần cải thiện (Needs Improvement) | 2,5 – 4 giây |
| Kém (Poor) | > 4 giây |
Các ngưỡng này do Google công bố trên web.dev và áp dụng cho dữ liệu đo tại phân vị thứ 75 (75th percentile) của người dùng thực tế, không phải giá trị trung bình đơn thuần.
Nguyên nhân phổ biến khiến LCP chậm
- Server phản hồi chậm (thời gian TTFB – Time to First Byte cao)
- Hình ảnh/video chưa được tối ưu dung lượng, không đúng định dạng hiện đại (WebP, AVIF)
- CSS/JavaScript chặn luồng render (render-blocking resources)
- Không sử dụng CDN cho website có người dùng ở nhiều khu vực địa lý
Cách cải thiện LCP
- Nén và chuyển đổi hình ảnh sang định dạng hiện đại, dùng kích thước phù hợp với thiết bị hiển thị
- Preload tài nguyên quan trọng nhất (như hình ảnh hero banner) bằng
<link rel="preload"> - Giảm CSS/JS chặn render, đưa mã không cần thiết ngay lập tức xuống cuối trang hoặc load bất đồng bộ (async/defer)
- Dùng CDN và cải thiện cấu hình server/hosting để giảm thời gian phản hồi
LCP so với INP và CLS
Xem tổng quan 3 chỉ số tại bài Core Web Vitals là gì?. LCP đo tốc độ tải nội dung chính, còn INP đo khả năng phản hồi tương tác, và CLS đo độ ổn định hình ảnh – ba chỉ số độc lập nhưng đều ảnh hưởng đến trải nghiệm tải trang tổng thể.
Ví dụ debug LCP thực tế
Một trang sản phẩm có LCP 5,2 giây (mức Kém). Dùng Chrome DevTools kiểm tra, phát hiện phần tử LCP là hình ảnh sản phẩm chính, dung lượng 3,8MB, chưa nén, tải từ server gốc không qua CDN. Sau khi nén ảnh xuống dưới 200KB, chuyển sang định dạng WebP, và thêm preload cho ảnh này, LCP giảm xuống còn 1,9 giây (mức Tốt) – minh họa cách một thay đổi tập trung đúng vào phần tử LCP thực tế mang lại cải thiện rõ rệt hơn nhiều so với tối ưu dàn trải toàn trang.
Những sai lầm thường gặp
- Chỉ đo LCP bằng công cụ mô phỏng (lab data) mà không xem dữ liệu thực tế (field data) trong Google Search Console – hai nguồn dữ liệu có thể chênh lệch đáng kể
- Tối ưu LCP trên desktop nhưng bỏ qua mobile – phần lớn traffic thường đến từ di động với điều kiện mạng/thiết bị kém hơn
- Nhầm phần tử LCP – không xác định đúng phần tử nào đang được tính là “largest contentful” trên trang, dẫn đến tối ưu sai chỗ
LCP trên Mobile so với Desktop
LCP trên di động thường chậm hơn desktop đáng kể do CPU/mạng yếu hơn – Google đánh giá Core Web Vitals tách riêng theo loại thiết bị, nên một trang đạt LCP tốt trên desktop vẫn có thể bị đánh giá Kém trên mobile. Vì phần lớn traffic tìm kiếm hiện nay đến từ di động, nên ưu tiên tối ưu và đo lường LCP trên mobile trước.
Câu hỏi thường gặp
Làm sao biết phần tử nào đang được tính là LCP trên trang của tôi?
Công cụ PageSpeed Insights hoặc Chrome DevTools (tab Performance) đều hiển thị rõ phần tử cụ thể được xác định là Largest Contentful Paint cho mỗi lần đo.
LCP có áp dụng khác nhau cho từng trang không?
Có, LCP nên được đo riêng cho từng nhóm trang (trang chủ, trang sản phẩm, trang bài viết…) vì cấu trúc nội dung khác nhau dẫn đến phần tử LCP và nguyên nhân chậm khác nhau.
Nguồn tham khảo
Nguồn tham khảo
Bạn muốn tra cứu thuật ngữ khác?