Webサイト高速化の決定版！PageSpeed Insightsで90点以上を目指す最適化テクニック集

たけほ — Sat, 05 Apr 2025 07:07:16 +0000

あなたのWebサイトは、PageSpeed Insightsで何点ですか？近年、Webサイトの表示速度はユーザーエクスペリエンスだけでなく、SEOにも大きな影響を与える重要な要素です。

「せっかく作った魅力的なコンテンツなのに、表示が遅くて離脱されてしまう…」「PageSpeed Insightsのスコアがなかなか上がらない…」

もしあなたがそう感じているなら、この記事はまさに決定版となるでしょう。

本記事では、PageSpeed Insightsで90点以上を目指すための具体的かつ実践的な最適化テクニックを、初心者の方にも分かりやすく解説します。便利な無料ツールも合わせてご紹介しますので、今日からあなたのサイトで試せるノウハウが満載です！

なぜWebサイトの高速化が重要なのか？

Webサイトの高速化は、単に「速い方が良い」というだけでなく、様々な重要なメリットをもたらします。

ユーザーエクスペリエンスの向上: ページの読み込みが速いほど、ユーザーはストレスなく快適にサイトを閲覧できます。スムーズな操作性は、サイトへの満足度を高め、再訪を促します。
離脱率の低下: 表示に時間がかかると、ユーザーは待ちきれずに他のサイトへ移動してしまいます。調査によると、3秒以上の読み込み時間で多くのユーザーが離脱すると言われています。高速化は離脱率の低下に直結し、貴重なトラフィックを無駄にしません。
SEOへの好影響: Googleはページの表示速度をランキング要因の一つとして明確に示しています。高速なサイトは検索結果で上位表示されやすくなり、より多くのオーガニックトラフィックを獲得するチャンスが増えます。モバイルファーストインデックスにおいても、表示速度は重要な評価ポイントです。
コンバージョン率の向上: ECサイトや資料請求など、コンバージョンを目的としたサイトでは、表示速度の改善がコンバージョン率の向上に繋がることが多くの事例で示されています。わずかな表示速度の改善でも、売上や成果に大きな影響を与える可能性があります。

PageSpeed Insightsとは？スコアの見方

PageSpeed Insightsは、Googleが提供する無料のWebサイト速度測定ツールです。URLを入力するだけで、PCとモバイル両方のページのパフォーマンスを分析し、改善点を具体的な提案とともに提示してくれます。

スコア: 0〜100点の範囲で評価され、90点以上が「速い」とされます。70〜89点は「平均的」、0〜69点は「遅い」と評価されます。
First Contentful Paint (FCP): 最初のテキストや画像などのコンテンツが画面に表示されるまでの時間。ユーザーが「何か表示された」と感じるまでの時間です。
Largest Contentful Paint (LCP): ビューポート内で最も大きなコンテンツ要素（画像やテキストブロックなど）が表示されるまでの時間。ページの主要なコンテンツが読み込まれたと感じるまでの時間です。
Cumulative Layout Shift (CLS): ページの読み込み中に発生する予期しないレイアウトのずれの量。数値が低いほど、視覚的な安定性が高いと言えます。
Interaction to Next Paint (INP): ユーザーがページ上の要素（ボタン、リンクなど）を操作してから、ブラウザがそのインタラクションに応答し、次の画面描画を行うまでの時間。応答性が高いほど、ユーザーは快適に操作できます。（2024年3月より導入）
Time to First Byte (TTFB): ユーザーのブラウザがWebサーバーにリクエストを送信してから、サーバーが最初の1バイトのデータを受信するまでの時間。サーバーの応答速度やネットワークの遅延に影響されます。

PageSpeed Insightsのレポートでは、これらの指標の数値と、改善の余地がある項目が具体的に示されます。提案された改善点を理解し、優先順位をつけて対策を進めることが、90点以上のスコア獲得への重要なステップです。

【実践編】PageSpeed Insightsで90点以上を目指す最適化テクニック

それでは、具体的な最適化テクニックと、役立つ無料ツールを見ていきましょう。

1. 画像の最適化

Webサイトの表示速度を遅くする最も一般的な原因の一つが、最適化されていない画像です。ファイルサイズが大きい画像は、ページの読み込み時間を大幅に増加させます。

適切な画像形式の選択:
- JPEG: 写真など、多くの色を含む画像に適しています。圧縮率が高く、ファイルサイズを小さくできます。画質が劣化しすぎない範囲で、適切な圧縮率を設定しましょう。
- PNG: 透明性が必要な画像や、ロゴなどのシンプルなイラストに適しています。JPEGよりもファイルサイズが大きくなる傾向があるため、色の少ない画像や透過処理が必要な場合に限定しましょう。
- WebP: Googleが開発した最新の画像形式で、JPEGやPNGよりも高い圧縮率と画質を実現できます。モダンブラウザでの対応が進んでいるため、積極的に採用を検討しましょう。
- SVG: ベクター形式で、拡大・縮小しても画質が劣化しません。ロゴやアイコンなど、比較的小さく、色数の少ないグラフィックに適しています。ファイルサイズも小さく保てます。
画像の圧縮: 画質を維持しつつファイルサイズを圧縮できる無料ツールを活用しましょう。
- TinyPNG: ( https://tinypng.com/ ) JPEGとPNG形式に対応したオンラインの画像圧縮ツールです。ドラッグ＆ドロップで簡単に圧縮でき、圧縮率も高いのが特徴です。APIも提供しており、一定の利用までは無料です。
- ImageOptim: ( https://imageoptim.com/ ) macOS用の無料アプリです。複数の画像最適化ツールを統合しており、JPEG、PNG、SVGなど様々な形式に対応しています。ローカル環境でまとめて画像を最適化したい場合に便利です。
- Squoosh: ( https://squoosh.app/ ) Googleが提供するオンラインの画像圧縮ツールです。WebP、JPEG、PNGなど様々な形式に対応しており、圧縮率や画質をプレビューしながら調整できます。
レスポンシブ画像の導入: デバイスの画面サイズに合わせて最適なサイズの画像を表示することで、不要なデータ転送を減らし、読み込み時間を短縮できます。要素やsrcset属性を使って、複数のサイズの画像を用意し、ブラウザに最適なものを選択させるようにしましょう。
遅延読み込み (Lazy Loading): 画面外の画像は、ユーザーがスクロールして表示されるまで読み込まないように設定しましょう。これにより、初期表示に必要なリソースの読み込みを早くすることができます。タグにloading="lazy"属性を追加するだけで簡単に実装できます。

2. CSSとJavaScriptの最適化

肥大化したCSSやJavaScriptは、ブラウザのレンダリングをブロックし、Webページの表示速度を遅らせる大きな原因になります。不要なコードを削除したり、ファイルサイズを圧縮したりすることで、パフォーマンスを向上させることができます。