First Contentful Paint (FCP)

Philip Walton

Nội dung đầu tiên hiển thị (FCP) là một chỉ số quan trọng, tập trung vào người dùng để đo lường tốc độ tải nhận thấy. Thuộc tính này đánh dấu điểm đầu tiên trong tiến trình tải trang, tại đó người dùng có thể nhìn thấy mọi nội dung trên màn hình. FCP nhanh giúp người dùng yên tâm rằng điều gì đó đang đang xảy ra.

FCP đo thời gian từ khi người dùng truy cập trang lần đầu tiên cho đến khi phần bất kỳ trong nội dung của trang hiển thị trên màn hình. Đối với chỉ số này, "nội dung" dùng để chỉ văn bản, hình ảnh (bao gồm cả hình nền), phần tử <svg> hoặc các phần tử <canvas> không phải màu trắng.

Không phải mọi nội dung đều hiển thị khi phần tử nội dung đầu tiên hiển thị. Đây là một điểm khác biệt quan trọng cần phân biệt giữa FCP và Thời gian hiển thị nội dung lớn nhất (LCP). Chỉ số này đo lường thời điểm nội dung chính của trang tải xong.

Điểm FCP tốt là gì?

Để cung cấp trải nghiệm tốt cho người dùng, các trang web phải có FCP từ 1,8 giây trở xuống. Để đảm bảo rằng bạn đạt được mục tiêu này cho hầu hết người dùng, một ngưỡng tốt để đo lường là phân vị thứ 75 của lượt tải trang, được phân chia trên thiết bị di động và máy tính để bàn.

Cách đo lường FCP

Bạn có thể đo lường FCP trong phòng thí nghiệm hoặc trong thực tế và tính năng này có sẵn trong các công cụ sau:

Công cụ thực địa

• PageSpeed Insights
• Báo cáo trải nghiệm người dùng trên Chrome
• Search Console (Báo cáo tốc độ)
• Thư viện JavaScript web-vitals

Công cụ cho phòng thí nghiệm

• Lighthouse
• Công cụ của Chrome cho nhà phát triển
• PageSpeed Insights

Đo lường FCP trong JavaScript

Để đo lường FCP trong JavaScript, hãy sử dụng Paint Timing API. Ví dụ sau cho biết cách tạo PerformanceObserver để theo dõi mục nhập paint có tên first-contentful-paint và ghi nhật ký mục đó vào bảng điều khiển.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'paint', buffered: true});

Trong ví dụ này, mục nhập first-contentful-paint được ghi lại cho bạn biết thời điểm hiển thị phần tử nội dung đầu tiên. Tuy nhiên, trong một số trường hợp, mục nhập này không hợp lệ để đo lường FCP.

Phần sau đây liệt kê sự khác biệt giữa nội dung API báo cáo và cách tính chỉ số.

Sự khác biệt giữa chỉ số và API

• API sẽ gửi một mục first-contentful-paint cho các trang được tải trong thẻ nền, nhưng bạn nên bỏ qua các trang đó khi tính FCP. Thời gian hiển thị đầu tiên chỉ được xem xét nếu trang đã ở nền trước trong toàn bộ thời gian.
• API không báo cáo các mục first-contentful-paint khi trang được khôi phục từ bộ nhớ đệm cho thao tác tiến/lùi, nhưng bạn nên đo lường FCP trong những trường hợp này vì người dùng trải nghiệm chúng dưới dạng lượt truy cập trang khác biệt.
• API có thể không báo cáo thời gian hiển thị từ các iframe trên nhiều nguồn gốc, nhưng để đo lường FCP đúng cách, bạn phải xem xét tất cả khung hình. Các khung hình phụ có thể sử dụng API để báo cáo thời gian hiển thị của khung hình đó cho khung gốc để tổng hợp.
• API đo lường FCP từ lần bắt đầu điều hướng, nhưng đối với các trang được kết xuất trước, bạn phải đo lường FCP từ activationStart vì thời gian đó tương ứng với thời gian FCP mà người dùng trải nghiệm.

Thay vì ghi nhớ tất cả những khác biệt nhỏ này, nhà phát triển có thể sử dụng thư viện JavaScript web-vitals để đo lường FCP, giúp xử lý những khác biệt này cho bạn nếu có thể (ngoại trừ trong iframe):

import {onFCP} from 'web-vitals';

// Measure and log FCP as soon as it's available.
onFCP(console.log);

Tham khảo mã nguồn của onFCP() để biết ví dụ hoàn chỉnh về cách đo lường FCP trong JavaScript.

Cách cải thiện FCP

Để tìm hiểu cách cải thiện FCP cho một trang web cụ thể, bạn có thể chạy bài kiểm tra hiệu suất của Lighthouse và chú ý đến mọi cơ hội hoặc thông tin chẩn đoán cụ thể mà cuộc kiểm tra đề xuất.

Để tìm hiểu cách cải thiện FCP nói chung (cho mọi trang web), hãy tham khảo các hướng dẫn sau đây về hiệu suất:

• Loại bỏ các tài nguyên chặn hiển thị
• Rút gọn CSS
• Xoá CSS không dùng đến
• Xoá JavaScript không dùng đến
• Kết nối trước với các nguồn gốc bắt buộc
• Giảm thời gian phản hồi của máy chủ (TTFB)
• Tránh chuyển hướng nhiều trang
• Tải trước các yêu cầu chính
• Tránh tải trọng mạng lớn
• Phân phát các thành phần tĩnh bằng chính sách bộ nhớ đệm hiệu quả
• Tránh kích thước DOM quá lớn
• Giảm thiểu mức độ quan trọng của yêu cầu
• Đảm bảo văn bản vẫn hiển thị trong quá trình tải phông chữ web
• Duy trì số lượng yêu cầu ở mức thấp và chuyển kích thước nhỏ

Nhật ký thay đổi

Đôi khi, lỗi được phát hiện trong các API dùng để đo lường chỉ số và đôi khi trong phần định nghĩa của chính các chỉ số. Do đó, đôi khi bạn phải thực hiện các thay đổi và những thay đổi này có thể hiển thị dưới dạng mức độ cải thiện hoặc mức độ hồi quy trong báo cáo nội bộ và trang tổng quan của bạn.

Để giúp bạn quản lý việc này, tất cả các thay đổi đối với cách triển khai hoặc định nghĩa các chỉ số này sẽ xuất hiện trong Nhật ký thay đổi này.

Nếu bạn muốn gửi ý kiến phản hồi về các chỉ số này, hãy gửi ý kiến phản hồi trong nhóm Google có chỉ số quan trọng trên web.