Google Chrome 77のDevToolsからLighthouse v5.2.0が使えるようになりました

Google Chrome 77がリリースされましたが、このバージョンのDevToolsでLighthouseがv5.2.0にアップデートされています。

Lighthouse v5.2.0の主要な変更点として、「Third-Party Usage」と「Total Blocking Time」がAuditsに追加されました。

「Third-Party Usage」はDiagnosticsに追加された項目で、ページ内で読み込まれているサードパーティスクリプトのファイル容量とメインスレッドでの実行時間が一覧化されます。これにより、外部から読み込まれるスクリプトがどれくらいWebサイトパフォーマンスに影響を及ぼしているのかがわかりやすくなりました。

ちなみにサードパーティスクリプトとは、外部のドメインから読み込むJavaScriptのことです。たとえば、Google Analytics用のスクリプトやSNSシェアボタン用のスクリプトがサードパーティスクリプトに該当します。

「Total Blocking Time」は試験的なメトリクスで、First Contentful Paint（FCP）からTime To Interactive（TTI）までの間で発生する50msを超えるメインスレッドのタスクのうち、Blocking Time（ユーザーの入力応答を阻害する時間）の合計時間をさします。

現段階ではまだ試験的なメトリクスのため、HTML形式のレポートではなくJSON形式のレポートで確認が可能です。JSON形式のレポートはCLIからレポート形式を選択して入手できるほか、Audits上でも右上のメニューから「Save as JSON」を選択して入手できます。