概要
サイトスピード測定方法は従来様々な方法があったと思うが、測定方法が確立しつつあり、LighthouseとWebpagetestを使ってみた内容を整理する
指標について
Googleが提供しているWeb Vitals(https://web.dev/vitals/) では以下３つの観点だけを挙げている
LCP(Largest Contentful Paint) - 最大視覚コンテンツの表示時間
読み込みのパフォーマンスを測定するための指標。つまりは、読み込み速度といったらこれを指標にすればよい。
FID(First Input Delay) - 初回入力までの遅延時間
ユーザーがページを操作してから、ブラウザが実際に処理を開始するまでの時間。
CLS(Cumulative Layout Shift) - 累積レイアウト シフト数
ページの表示中に発生した予期しないレイアウトシフトの最大時間。
https://web.dev/cls/ の動画が分かりやすいです。
使ってみた結果
以下認証付きのサイトにログインして、同じ画面を測定した結果です
Lighthouse
・実行に１分くらいかかる
・各指標の小数点以下１桁まで表示してくれる
・何度か測定すると若干ばらつきがあるため、５回ほど測定して平均とった方がよさそう
・ログインした状態で、Chrome開発者ツールで測定したが、Lighthouse計測開始するとたまにログアウト状態になってしまい計測失敗する
Webpagetest
・実行に５分くらいかかる
・各指標の小数点以下３桁まで表示してくれる
・速度の設定（Connection）により結果が大きく異なる（実際のインターネット速度に合わせるのがよい）
・テスト試行回数（Number of Tests to Run）が少ないと、失敗して計測できないことがある（５回にするのが良さそう）
同じLCPでも若干結果が異なる
指標整理
LighthouseやWebpagetestでは、Web Vitals以外の指標が表示されるので整理する
Lighthouse
参考：https://developer.chrome.com/docs/lighthouse/
FCP(First Contentful Paint)
ユーザーがページに移動してからブラウザがDOMコンテンツの最初の部分をレンダリングするのにかかる時間
Speed Index
ページがユーザーに表示されるコンテンツをレンダリングした速度を表す計算指標
TTI(Time to Interactive)
ページが完全にインタラクティブになるまでにかかる時間
TBT(Total Blocking Time)
マウスのクリック、画面のタップ、キーボードの押下などのユーザー入力への応答がブロックされている合計時間
WebPageTest
参考：https://docs.webpagetest.org/
WebPageTestにしか表示されていない指標はこちら
First Byte
最初のバイト時間(TTFBと略されることが多い)は、最初のナビゲーションの開始からベースページの最初のバイトがブラウザによって受信されるまでの時間
Start Render
最初のナビゲーションの開始から最初の白以外のコンテンツがブラウザのディスプレイにペイントされるまでの時間
整理すると…
| LCP | FID | CLS | FCP | Speed Index | TBT | TTI | First Byte | Start Render | |
|---|---|---|---|---|---|---|---|---|---|
| Web Vitals | ○ | ○ | ○ | ||||||
| Lighthouse | ○ | ○ | ○ | ○ | ○ | ○ | |||
| WebPageTest | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
Web Vitalsの重要指標のLCP(Largest Contentful Paint)とCLS(Cumulative Layout Shift)は、LighthouseでもWebPageTestでも扱っているので、どちらで計測しても使えますね
First Byteを速度改善の指標として報告している現場を見たことあるが、意味があるのか…