First Contentful Paint là gì?

bởi Nguyễn Đức Anh
FIRST CONTENTFUL PAINT - nụ hôn đầu đời

First Contentful Paint (FCP / Hình ảnh có nội dung đầu tiên) là một trong sáu chỉ số được theo dõi, nằm trong khu vực Performance / 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 về tốc độ tải trang.

Lighthouse trình bày FCP dưới dạng giây:

First contentful paint

Cách đo FCP

FCP đo khoảng thời gian trình duyệt cần bỏ ra để render phần đầu tiên thuộc nội dung DOM sau khi người dùng điều hướng đến trang của bạn. Các ảnh, các phần tử <canvas> non-white, và SVG trên trang của bạn được xem là nội dung DOM; bất cứ cái gì nằm bên trong iframe sẽ không được tính.

Cách Lighthouse xác định chỉ số FCP của bạn

Chỉ số FCP của bạn là so sánh giữa thời gian FCP trang của bạn và thời gian FCP cho website thực, dựa trên dữ liệu từ HTTP Archive. Lấy ví dụ, các trang có hiệu suất render FCP trong phân vị thứ chín mươi chín trong khoảng 1,5 giây. Nếu FCP website của bạn là 1,5 giây, điểm số FCP của bạn là 99.

Bảng này cho thấy cách giải thích chỉ số FCP của bạn:

Thời gian FCP (tính theo giây)Mã màuĐiểm số FCP (phân vị HTTP Archive)
0 -- 2Xanh (nhanh)75-100
2-4Cam (trung bình)50-74
Trên 4Đỏ (chậm)0-49

Làm thế nào cải thiện được chỉ số FCP của bạn

Một vấn đề đặc biệt quan trọng trong FCP là thời gian tải font. Bạn cần xem các chủ đề liên quan đến “đảm bảo văn bản vẫn hiển thị trong khi webfont tải” để biết các cách tăng tốc độ tải font của bạn.

Theo dõi FCP trên các thiết bị của người dùng thực

Để biết cách đo khi FCP thực sự xuất hiện trên các thiết bị của người dùng của bạn, hãy ghé thăm trang các chỉ số hiệu suất, tốc độ tập trung vào người dùng. Phần theo dõi FP/FCP mô tả cách truy cập dữ liệu FCP theo chương trình và gửi nó lên Google Analytics.

Xem đánh giá hiệu suất tải của Google trong thế giới thực với navigation và resource timming để biết thêm về việc thu thập số liệu người dùng thực.

Làm thế nào cải thiện được tổng thể điểm số hiệu suất của bạn

Trừ khi bạn có lý do rõ ràng để tập trung vào một chỉ số cụ thể, còn không thì thường sẽ tốt hơn nếu bạn tập trung vào cải thiện tổng thể điểm số hiệu suất (overall performance score).

Sử dụng khu vực Opportunities/Cơ hội trong báo cáo Lighthouse để xác định sự cải tiến nào sẽ có giá trị nhất trên trang của bạn. Cơ hội càng quan trọng, hiệu ứng sẽ càng lớn đối với điểm hiệu suất của bạn. Lấy ví dụ, hì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 sự cải thiện lớn nhất:

Tab cơ hội của Lighthouse

Bạn có thể ghé thăm trang thư mục chứa các nội dung về kiểm tra hiệu suất (tiếng Anh) để học cách giải quyết các cơ hội được xác định trong báo cáo Lighthouse.

(Dịch từ bài viết First Contentful Paint, trang web[.]dev)

0 bình luận

Khu vực bình luận

avatar