LargestContentfulPaint: thuộc tính renderTime

Baseline 2025

Newly available

Since December 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Thuộc tính chỉ đọc renderTime của giao diện LargestContentfulPaint đại diện cho thời điểm phần tử được hiển thị trên màn hình.

Giá trị

Thuộc tính renderTime có thể có các giá trị sau:

Một dấu thời gian đại diện cho thời gian tính bằng mili giây khi phần tử được hiển thị trên màn hình.
0 hoặc một dấu thời gian được làm thô nếu tài nguyên là yêu cầu nguồn gốc chéo và không sử dụng tiêu đề phản hồi HTTP Timing-Allow-Origin.

Thời gian hiển thị hình ảnh nguồn gốc chéo

Vì lý do bảo mật, giá trị của thuộc tính renderTime ban đầu là 0 nếu tài nguyên là yêu cầu nguồn gốc chéo.

Các trình duyệt hiện có thể hiển thị thời gian hiển thị được làm thô một chút trong các tình huống này. Kiểm tra hỗ trợ trình duyệt.

Để hiển thị thông tin thời gian hiển thị nguồn gốc chéo chính xác hơn, cần đặt tiêu đề phản hồi HTTP Timing-Allow-Origin.

Ví dụ: để cho phép https://mdn.go-mizu.dev xem renderTime chính xác, tài nguyên nguồn gốc chéo nên gửi:

http

Timing-Allow-Origin: https://mdn.go-mizu.dev

Dùng `startTime` thay vì `renderTime`

Bất kể độ chính xác của renderTime, các nhà phát triển nên dùng startTime thay vì renderTime làm thời gian LCP. Điều này trả về giá trị của renderTime của mục nếu nó không phải 0, và ngược lại trả về giá trị loadTime của mục này, do đó loại bỏ nhu cầu kiểm tra giá trị 0 cho các trình duyệt không hỗ trợ.

Ví dụ

Ghi nhật ký renderTime của lần vẽ nội dung lớn nhất

Ví dụ này sử dụng PerformanceObserver thông báo về các mục hiệu suất largest-contentful-paint mới khi chúng được ghi vào dòng thời gian hiệu suất của trình duyệt. Tùy chọn buffered được dùng để truy cập các mục trước khi tạo observer.

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1]; // Dùng ứng viên LCP mới nhất
  console.log(lastEntry.renderTime);
});
observer.observe({ type: "largest-contentful-paint", buffered: true });