Thời gian hiển thị nội dung lớn nhất (LCP) là một trong những chỉ số được theo dõi trong mục Hiệu suất của báo cáo Lighthouse. Mỗi chỉ số nắm bắt một số khía cạnh của tốc độ tải trang.
Lighthouse hiển thị LCP trong vài giây:
![Ảnh chụp màn hình kiểm tra Thời gian hiển thị nội dung lớn nhất của Lighthouse](https://developer.chrome.google.cn/static/docs/lighthouse/performance/lighthouse-largest-contentful-paint/image/a-screenshot-the-lightho-d3c8bf09dcb23.png?authuser=9&hl=vi)
LCP đo lường những gì
LCP đo lường thời điểm phần tử nội dung lớn nhất trong khung nhìn được kết xuất lên màn hình. Giá trị này xấp xỉ khi nội dung chính của trang hiển thị cho người dùng. Xem phần Thời gian hiển thị nội dung lớn nhất được xác định để biết thêm thông tin chi tiết về cách xác định LCP.
Cách Lighthouse xác định điểm LCP của bạn
Lighthouse trích xuất dữ liệu LCP từ công cụ theo dõi của Chrome.
Bảng dưới đây trình bày cách diễn giải điểm LCP của bạn:
Thời gian LCP (tính bằng giây) |
Mã hoá màu |
---|---|
0-2.5 | Xanh lục (nhanh) |
2.5-4 | Da cam (trung bình) |
Trên 4 người | Đỏ (chậm) |
Cách cải thiện điểm LCP
Nếu LCP là một hình ảnh, thời gian có thể được chia thành 4 giai đoạn. Việc biết được giai đoạn nào mất nhiều thời gian nhất có thể giúp bạn tối ưu hoá LCP. Lighthouse sẽ hiển thị phần tử LCP cùng với thông tin chi tiết về giai đoạn trong thông tin chẩn đoán "phần tử Thời gian hiển thị nội dung lớn nhất".
Giai đoạn LCP | Nội dung mô tả |
---|---|
Thời gian đến byte đầu tiên (TTFB) | Thời gian từ khi người dùng bắt đầu tải trang cho đến khi trình duyệt nhận được byte đầu tiên của phản hồi tài liệu HTML. Tìm hiểu thêm về TTFB. |
Độ trễ khi tải | delta giữa TTFB và thời điểm trình duyệt bắt đầu tải tài nguyên LCP. |
Thời gian tải | Thời gian cần để tải chính tài nguyên LCP. |
Độ trễ khi hiển thị | delta giữa thời điểm tài nguyên LCP tải xong cho đến khi phần tử LCP hiển thị hoàn toàn. |