LargestContentfulPaint: renderTime 屬性

值

renderTime 屬性可以具有以下值：

• 一個 timestamp，表示元素渲染到螢幕的毫秒數。
• 如果資源是跨域請求且未使用 Timing-Allow-Origin HTTP 響應頭，則為 0 或一個粗略化的 timestamp。

跨域圖片渲染時間

出於安全原因，如果資源是跨域請求，renderTime 屬性的值最初為 0。

現在，瀏覽器 可能會在這些情況下暴露稍微粗略化的渲染時間。請檢視 瀏覽器支援。

要公開更準確的跨域渲染時間資訊，需要設定 Timing-Allow-Origin HTTP 響應頭。

例如，要允許 https://mdn.club.tw 查看準確的 renderTime，跨域資源應傳送：

Timing-Allow-Origin: https://mdn.club.tw

使用 startTime 而不是 renderTime

無論 renderTime 的準確性如何，開發者都應使用 startTime 而不是 renderTime 作為 LCP 時間。它會返回條目的 renderTime 值（如果它不為 0），否則返回此條目的 loadTime 值，從而無需為不支援的瀏覽器檢查 0 值。

示例

記錄最大內容繪製的渲染時間

此示例使用 PerformanceObserver，在瀏覽器效能時間線上記錄新的 largest-contentful-paint 效能條目時進行通知。buffered 選項用於訪問觀察者建立之前的條目。

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1]; // Use the latest LCP candidate
  console.log(lastEntry.renderTime);
});
observer.observe({ type: "largest-contentful-paint", buffered: true });

規範

瀏覽器相容性