PageSpeed Insights

1. PageSpeed InsightsはSEOとUX両方に直結する診断ツール

Webサイトの表示速度はユーザー体験に直接影響するだけでなく、Google検索のランキング要因にも組み込まれています。PageSpeed InsightsはURLを入力するだけでGoogleが評価するパフォーマンス指標（Core Web Vitals）を計測し、具体的な改善提案まで提示してくれる無料ツールです。

この記事では、スコアの読み方から実際の改善作業まで、デザイナー・実装者が押さえておくべき内容を解説します。

2. Core Web Vitalsの3指標を正しく理解する

① LCP（Largest Contentful Paint）：最大コンテンツの表示時間

ページ読み込み開始から、画面内で最も大きなコンテンツ（ヒーロー画像・大きな見出しテキストなど）が表示されるまでの時間です。Good: 2.5秒以内 要改善: 4.0秒以内 Poor: 4.0秒超

改善の主な方法は、ヒーロー画像の最適化（WebP変換・適切なサイズ）・fetchpriority="high"属性の付与・サーバーのレスポンス時間短縮です。

② INP（Interaction to Next Paint）：インタラクションの応答性

ユーザーのクリック・タップ・キー入力に対してページが視覚的に反応するまでの時間です。Good: 200ms以内 要改善: 500ms以内 Poor: 500ms超

JavaScriptの実行時間が長い・メインスレッドがブロックされている場合に悪化します。

③ CLS（Cumulative Layout Shift）：レイアウトシフトの累計

ページ読み込み中に要素が突然ずれてしまう現象（広告読み込み・フォント切り替えなど）の累積スコアです。Good: 0.1以下 要改善: 0.25以下 Poor: 0.25超

画像に width と height を明示的に指定する・フォントのfont-display:swapを設定するだけで大幅に改善するケースが多いです。

3. スコアの読み方と優先度の付け方

重要な注意点：PageSpeed Insightsのスコアは計測のたびにわずかに変動します。一回の計測で一喜一憂せず、複数回計測した平均値や傾向で判断するのが適切です。また「改善の機会」セクションの節約できる時間（ms）が大きい項目から優先的に対応することが効率的です。

4. 【実践】デザイン・実装で取り組めるスコア改善策

1. ヒーロー画像をWebPに変換してサイズを最適化する。 LCP改善の最も効果的な手段です。Squooshで画像をWebPに変換し、横幅を表示サイズに合わせて最小化します。1,000KB超の画像を100KB以下に削減するだけでスコアが大幅に改善するケースが多いです。
2. 画像にwidth・height属性を明示的に指定する。 CLS（レイアウトシフト）改善の基本です。<img>タグにwidth="1200" height="630"のように寸法を記載することで、ブラウザが画像読み込み前にレイアウトスペースを確保できます。
3. Google Fontsにpreconnectとdisplay=swapを設定する。 <link rel="preconnect">でフォントの事前接続、&display=swapでフォント読み込み前のテキスト表示を設定します。フォントが原因のCLSとLCP悪化を防げます。
4. 不要なJavaScriptを削減・遅延読み込みに変更する。 「使用していないJavaScriptを削除する」という指摘がPageSpeed Insightsに表示されたら、async・defer属性の付与や不要なライブラリの削除を検討します。
5. 改善前後のスコアを記録して効果を可視化する。 施策実施前にスクリーンショットで現状スコアを保存。改善後に再計測して数値の変化を確認します。クライアントへの報告・社内での成果共有の資料として活用できます。