LargestContentfulPaint: renderTime プロパティ

値

renderTime プロパティは、以下の値を取り得ます。

• 要素が画面に描画された時点（ミリ秒単位）を表す timestamp。
• リソースが異なるオリジンへのリクエストであり、かつ HTTP の Timing-Allow-Origin レスポンスヘッダーが使用されていない場合、0 または丸め処理された timestamp が返されます。

異なるオリジンの画像レンダリング時刻

セキュリティ上の理由から、リソースがオリジンをまたぐリクエストである場合、renderTime プロパティの値は当初 0 となっていました。

このような状況では、ブラウザーはレンダリング時刻を少し制度を落として公開する場合があります。ブラウザーの互換性を調べてください。

より正確なオリジンをまたいだ場合のレンダリング時のタイミング情報を公開するには、HTTP の Timing-Allow-Origin レスポンスヘッダーを設定する必要があります。

例えば、https://developer.mozilla.org が正確な renderTime を取得することができるようにするには、別なオリジンのリソースは以下を送信する必要があります。

Timing-Allow-Origin: https://developer.mozilla.org

renderTime の代わりに startTime を使用する

renderTime の正確性にかかわらず、開発者は LCP 時刻として renderTime ではなく startTime を使用しましょう。これにより、項目の renderTime が 0 でない場合はその値が返され、そうでない場合はこの項目の loadTime の値が返されるため、非対応のブラウザーで 0 かどうかを調べる必要が除去されます。

例

LCP 要素の renderTime をログ出力

この例では、ブラウザーのパフォーマンスタイムラインに新しい largest-contentful-paint パフォーマンス項目が記録されるたびに通知を行う PerformanceObserver を使用しています。buffered オプションは、オブザーバーの作成以前に記録された項目にアクセスするために使用されます。

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1]; // 最新の LCP 候補を使用
  console.log(lastEntry.renderTime);
});
observer.observe({ type: "largest-contentful-paint", buffered: true });

仕様書

ブラウザーの互換性