Nội dung đầu tiên hiển thị (FCP) là một trong sáu chỉ số theo dõi trong mục Hiệu suất của báo cáo Lighthouse. Mỗi chỉ số thể hiện một số khía cạnh liên quan đến tốc độ tải trang.
Lighthouse hiển thị FCP trong giây:
FCP đo lường những gì
FCP đo lường thời gian trình duyệt cần để hiển thị phần nội dung DOM đầu tiên sau khi người dùng truy cập vào trang của bạn.
Hình ảnh, các phần tử <canvas> không phải màu trắng và SVG trên trang của bạn được xem là nội dung DOM; mọi nội dung bên trong iframe đều không được bao gồm.
Cách Lighthouse xác định điểm FCP của bạn
Điểm FCP của bạn là so sánh thời gian FCP của trang và thời gian FCP cho các trang web thực, dựa trên dữ liệu từ Kho lưu trữ HTTP. Ví dụ: các trang web hoạt động ở phân vị thứ 99 sẽ hiển thị FCP trong khoảng 1, 2 giây. Nếu FCP của trang web là 1,2 giây, thì điểm FCP của bạn là 99. Hãy xem bài viết Cách xác định điểm chỉ số để tìm hiểu cách thiết lập ngưỡng điểm của Lighthouse.
Bảng này cho thấy cách diễn giải điểm FCP:
| Thời gian FCP (tính bằng giây) |
Mã hoá màu |
|---|---|
| 0 – 1,8 | Xanh lục (nhanh) |
| 1,8 – 3 | Da cam (trung bình) |
| Trên 3 | Đỏ (chậm) |
Cách cải thiện điểm FCP
Một vấn đề đặc biệt quan trọng đối với FCP là thời gian tải phông chữ. Hãy xem bài đăng Đảm bảo văn bản vẫn hiển thị trong quá trình tải phông chữ web để biết các cách tăng tốc độ tải phông chữ.
Theo dõi FCP trên thiết bị của người dùng thực
Để tìm hiểu cách đo lường thời điểm FCP thực sự xảy ra trên thiết bị của người dùng, hãy xem trang Các chỉ số hiệu suất tập trung vào người dùng của Google. Phần Theo dõi FP/FCP mô tả cách truy cập dữ liệu FCP theo phương thức lập trình và gửi dữ liệu đó đến Google Analytics.
Xem bài viết Đánh giá hiệu suất tải trong thực tế với thời gian điều hướng và tài nguyên của Google để biết thêm thông tin về việc thu thập chỉ số người dùng thực.
Cách cải thiện Điểm hiệu suất tổng thể
Trừ phi có lý do cụ thể để tập trung vào một chỉ số cụ thể, bạn nên tập trung vào việc cải thiện Điểm hiệu suất tổng thể.
Sử dụng mục Cơ hội trong báo cáo Lighthouse để xác định những điểm cải thiện sẽ có giá trị nhất cho trang của bạn. Cơ hội càng quan trọng thì tác động càng lớn đến Điểm hiệu suất của bạn. Ví dụ: ảnh chụp màn hình Lighthouse dưới đây cho thấy việc loại bỏ các tài nguyên chặn hiển thị sẽ mang lại điểm cải tiến lớn nhất:
Xem trang đích Kiểm tra hiệu suất để tìm hiểu cách giải quyết các cơ hội xác định được trong báo cáo Lighthouse.