PSI
PageSpeed Insights
ページスピードインサイトとは？
Googleが提供する無料のツール・ページスピードインサイト（PageSpeed Insights）はウェブページの表示速度を測定し、改善点を提案します。
株式会社Webの間ではこの改善点に対して実際に何をすべきか改善のご提案から実際の対策まで行います。
Reason
なぜ表示速度が重要なのか？
「ユーザー体験の向上」と「SEOへの影響」の観点から表示速度への対策は行うべきと考えます。
ユーザー体験（UX）の向上
- 表示が遅いと離脱される
- 調査によれば、ページの読み込みに3秒以上かかると、53％のユーザーが離脱すると言われています。特にモバイルユーザーは回線状況にも左右されるため、表示スピードが大きなストレス要因になります。
- 使いにくいと信頼されない
- ボタンをタップしても反応がない、読み込み中にレイアウトがズレるといった体験は、ユーザーの信頼を損ねる原因になります。FCPやTBT、CLSなどの指標は、こうした「イライラする瞬間」を見える化したものです。
- 最初の印象が大事
- 最初に画像やタイトルが表示されるスピード（FCPやLCP）は、「このサイトはちゃんとしている」と感じてもらえるかを左右します。表示が遅ければ「重い・使いづらい・古い」と思われる可能性すらあります。
ページスピードの改善は、単なる技術的な問題ではなく、
ユーザーが「また使いたい」と思えるかどうかを決める最重要ポイントと言えます。
SEOへの影響
- Core Web Vitals
（コアウェブバイタル）
への対応 - Googleは2021年以降、UXを重視する「Core Web Vitals」を正式なランキング要因としています。FCP・LCP・CLSの3つもこれに含まれており、実際のユーザー体験を重視する流れが強まっています。
- モバイルファースト
インデックス（MFI）
との関連 - スマホでの表示速度が検索順位を左右する「モバイルファーストインデックス」では、モバイル環境での読み込み速度がとくに重視されます。モバイルで重いページはSEO上も不利になります。
Googleは公式に「ページスピードは多くの指標の一つに過ぎない」としながらも、
「速度が遅ければ不利になる」とも明言しています。
表示速度が遅いと不利になる可能性がある以上、
信頼性と成果を高めるためにも、快適な表示スピードを保つことが求められます。
Result
スコアの見方と評価指標
ページスピードインサイト（PageSpeed Insights）のスコアは0～100点で評価されます。
スコアは各指標に対して点数を付け、その合計値で決まります。
| 指標 | 概要 | 理想値（目安） |
|---|---|---|
| FCP（First Contentful Paint） | ページで最初にテキストや画像など、何らかの視覚的要素が表示されるまでの時間。ユーザーが「読み込みが始まった」と認識できる重要な瞬間です。 | 1.8秒未満 |
| LCP（Largest Contentful Paint） | メインコンテンツ（通常は画像や見出しなど）が表示されるまでの時間。表示の“完了感”を示します。 | 2.5秒未満 |
| CLS（Cumulative Layout Shift） | ページ読み込み中の視覚的なズレの累積量。レイアウトの安定性を測ります。 | 0.1未満 |
| INP（Interaction to Next Paint） | ページ内の操作全体に対する応答の滑らかさを測定する新しい指標（FIDの後継）。 | 200ms未満 |
| TTFB（Time To First Byte） | 最初のバイトが返ってくるまでの時間。サーバーの応答速度を示します。 | 800ms未満が理想 |
| TBT（Total Blocking Time） | FCPとTime to Interactiveの間に、JavaScriptの処理などでメインスレッドがブロックされていた合計時間。応答性に強く影響します。 | 200ms未満 |
上記主要指標の改善をすることでスコア獲得ができます。
Method
よくある改善提案と対策
- 画像の最適化
- 画像はWebページの読み込み速度に最も大きく影響する要素の一つです。画像の最適化には、WebP形式などの次世代フォーマットの採用、画像サイズの適正化、遅延読み込み（Lazy Load）の導入などがあります。これにより、無駄な転送データ量を減らし、表示速度を大幅に向上させることができます。
- JavaScriptの最適化
- JavaScriptは機能性を高める一方で、読み込みや実行が遅いとページ表示の遅延要因になります。対策としては、不要なJavaScriptの削除、非同期読み込み（asyncやdeferの活用）、コードの縮小化（minify）やバンドル（まとめて読み込む）などが効果的です。必要な処理だけを効率的に実行することで、ユーザー体験を損なわずにパフォーマンスを向上させます。
- CSSの最適化
- CSSはデザインに不可欠な要素ですが、量が多いとレンダリング（表示）を妨げます。未使用CSSの削除、インラインCSSの活用、縮小化（minify）などにより、読み込みの負荷を軽減できます。また、必要なCSSのみをページごとに分割して読み込む設計（CSS分割）も有効です。
- HTML軽量化
- HTML自体も軽量化することで表示速度が改善されます。不要なタグやコメントの削除、構造の整理、インデントの簡素化、コードの圧縮により、HTMLの読み込みと解析を高速化できます。特に初回表示（First Contentful Paint）に影響する要素なので、基本構造の最適化は効果的です。
- サーバー設定の見直し
- サーバー側の設定によっても表示速度は大きく変わります。圧縮（gzipやBrotli）、キャッシュ制御（HTTPヘッダー）、Keep-Alive接続の有効化、HTTP/2やHTTP/3の対応など、最適な設定を行うことで、クライアントとの通信が効率化されます。これにより、リソースの読み込み速度と全体の体感速度が向上します。
- サーバー応答時間の短縮
- サーバー応答時間（TTFB: Time To First Byte）は、ブラウザが最初のデータを受け取るまでの時間を指します。これが遅いと、表示全体が遅れます。対策としては、CMSの処理高速化（例：WordPressのキャッシュ導入）、データベースの最適化、アプリケーションコードの見直し、CDNの活用、より高性能なサーバーへの移行などがあります。
PageSpeed Insightsについてはこちらもご覧ください。
