💡

DevToolのPerformanceの計測はLighthouseの実行状況に合わせて行おう。

2021/06/05に公開

GoogleのCore Web Vitals対策としてWebのパフォーマンス計測と分析を普段行っています。
DevToolsのPerformanceとLighthouseは、パフォーマンス計測をするうえでとても有用なツールです。

今回は、Performanceの計測環境をLighthouseの実行環境に合わせる方法を書きます。

前提条件

調査時期：2021/06/05
Chromeバージョン： 90.0.4430.212（Official Build）（x86_64）

パファーマンスはネットワークや利用者のデバイスにも影響を受けます。

Lighthouseは「Fast 3G」「4x slowdown」を実行環境としています。
そのため、デフォルト設定のPerformanceで実行した内容とLighthouseの計測結果に違いが発生することがあります。

Lighthouseの実行結果に合わせるためには、Performanceの設定を変えましょう。

Lighthouseを実行し、レポートの内容と同じに設定しましょう。

Lighthouseを実行すると、1番下に「Runtime Settings」を表示してくれます。

Lighthouseの設定を参考にPerformanceの設定をしていきます。

今回設定するのは、「CPU」と「Network」の項目です。
Performanceで上記2つの設定を変更するには、下記画像の赤枠から設定を変えることができます。

設定は下記のように設定をします。

CPU：4x slowdown
Network：Fast 3G

「Throttling」の設定を変えることによって、低速なネットワーク回線やCPUが非力な端末を前提として計測を行うことが出来ます。

パフォーマンスを計測するにあたって実行環境の整備は重要です。
また、Core Web VitalsでもFast 3Gがデフォルトのネットワーク環境として計測で使われています。

エンジニアが利用しているCPUやNetworkは、一般的に使われているものに比べて高性能な場合が多いので、チューニングしていくことをおすすめします。