Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

サイトの独自スクリプトで console.time() を使用しない

監査が重要である理由

console.time() を使用してページのパフォーマンスを計測している場合は、代わりに User Timing API を使用することを検討してください。以下のようなメリットがあります。

  • 高精度のタイムスタンプ。
  • タイミング データをエクスポート可能。
  • Chrome DevTools の Timeline への統合。Timeline の記録中に User Timing の performance.measure() 関数が呼び出されると、計測結果が DevTools によって自動で Timeline に追加されます。以下のスクリーンショットの my custom measurement ラベルが、これに相当します。

Chrome DevTools の Timeline に表示される User Timing の計測結果

監査に合格する方法

Lighthouse のレポートでは、検出された console.time() のインスタンスが URLs の下に一覧表示されます。 これらの呼び出しを、それぞれ performance.mark() で置き換えます。 2 つのマーク間の経過時間を計測するには、performance.measure() を使用します。

この API を使用方法については、User Timing API: あなたの Web アプリをもっと理解するためにをご覧ください。

監査方法

このセクションでは Lighthouse による監査方法と監査スコアの算出方法を説明します。

Lighthouse では、指定したページと同じホスト上にあるスクリプトで検出された console.time() のインスタンスがすべて報告されます。 その他のホスト上のスクリプトは制御不可能とみなされるため、報告対象から除外されます。 したがって、ページで console.time() を使用するスクリプトが他にあったとしても、Lighthouse のレポートには含まれない場合があります。