Chrome Dev Summit 2018 is happening now and streaming live 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 のレポートには含まれない場合があります。