【速度計測】Web サイトやメディアのパフォーマンスを分析する方法

• Web ページの表示速度を改善するために、パフォーマンスを確認したい…
• Web パフォーマンスの計測方法がわからない…

このような悩みを解決するため、Web ページの表示速度の計測方法・Web パフォーマンスの分析方法を紹介します。Web パフォーマンスを改善するために、現状把握したい方は必見です！

【無料】Web パフォーマンスの分析ツール

Web パフォーマンスを分析する方法は多数ありますが、主によく使われる無料ツールは Google が提供する PageSpeed Insights です。

分析方法は非常に簡単！

PageSpeed Insights にアクセスし、下図のように計測したい URL をコピー → 貼り付けし、分析ボタンをクリックだけです。

数秒後には下図のように、デスクトップ（PC）と携帯電話（モバイル）ごとの分析結果が表示されます（各指標の解説は後述）。

パフォーマンスの総合点に応じた評価は以下の通りです。

• 90 ~ 100 点：高速（緑）
• 50 ~ 89 点：平均（オレンジ）
• 0 ~ 49 点：遅い（赤）

参考：How scores are color-coded | Lighthouse performance scoring

最低でも 50 点以上、できれば 90 点以上を叩き出せると、最高です。

このように、パフォーマンス結果が 0 ~ 100 点で数値化されるため、誰でも直感的にパフォーマンスの良し悪しが判断できます。また、改善の Before / After の比較にも使えるため、使い勝手が非常に良いです。

また、下図のようにパフォーマンスが悪い原因と改善すべき項目を提示してくれる点も、PageSpeed Insights の魅力になっています！

PageSpeed Insights のパフォーマンス指標

PageSpeed Insights のパフォーマンス指標で重要な項目を噛み砕いて説明したテーブルです。

判断軸	指標	解説	公式 URL
表示速度	First Contentful Paint (FCP)	テキスト or 画像の初期表示の時間	FCP
表示速度	Speed Index (SI)	ページを読み込み、コンテンツが表示されるまでの時間	SI
表示速度	Largest Contentful Paint (LCP)	最も大きなテキストまたは画像の表示時間	LCP
応答性	Time to Interactive (TTI)	ページが完全に操作できるまでの時間	TTI
応答性	Total Blocking Time (TBT)	初期表示の時間 (FCP) と操作できるまでの時間 (TTI) のラグ	TBT
安定性	Cumulative Layout Shift (CLS)	予期しないレイアウトの変更や崩れ	CLS

判断軸	NG な現象
表示速度	Web ページの表示時間が長すぎる…
応答性	表示されたボタンをクリックしても、反応するまで時間がかかる…
安定性	サイドバーの枠をはみ出すほどの、巨大なバナー広告

FCP（初期表示）と LCP（最も大きいコンテンツの表示）の違いは、下図をご覧いだければ、イメージしやすいでしょう。

出典：Largest Contentful Paint (LCP)

表示速度はもちろん、表示された後に適切な操作ができるかどうか（応答性）についても、Google は重要視しています。

パフォーマンス結果における各指標の重みについては、以下の記事をご覧ください。 参考：Lighthouse performance scoring

Web パフォーマンスだけが全てではない

今まで Web パフォーマンスは命と言わんばかり、重要であることを強調しました。しかし、Web パフォーマンスだけを追い求めるだけではいけません。

例えば、Web パフォーマンスだけを重要視したため、重い画像を取っ払い、文章だけの無機質な Web サイトが完成したとします。果たして、この Web サイトはユーザーにとって魅力的と言えるのでしょうか。

大切なことは、Web パフォーマンスとユーザー体験のバランスを保つことです。Web パフォーマンスとユーザー体験、両者を犠牲にせず、どちらも満たせるポイントを探し続けましょう。

さいごに

以下、まとめです。

• Web パフォーマンスの分析は PageSpeed Insights がオススメ
• パフォーマンスの総合点は、最低でも 50 点以上、できれば 90 点以上を目指す
• Web パフォーマンスとユーザー体験のバランスが大事

Web パフォーマンスの分析の参考になれば幸いです！