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

あなたの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など様々な形式に対応しており、圧縮率や画質をプレビューしながら調整できます。
レスポンシブ画像の導入: デバイスの画面サイズに合わせて最適なサイズの画像を表示することで、不要なデータ転送を減らし、読み込み時間を短縮できます。<picture>要素やsrcset属性を使って、複数のサイズの画像を用意し、ブラウザに最適なものを選択させるようにしましょう。
遅延読み込み (Lazy Loading): 画面外の画像は、ユーザーがスクロールして表示されるまで読み込まないように設定しましょう。これにより、初期表示に必要なリソースの読み込みを早くすることができます。<img>タグにloading="lazy"属性を追加するだけで簡単に実装できます。

2. CSSとJavaScriptの最適化

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

CSSの圧縮とminify: CSSファイルを圧縮してファイルサイズを小さくする無料ツールです。minifyとは、不要な空白文字や改行、コメントなどを削除し、コードの可読性を下げる代わりにファイルサイズを小さくする処理です。
- CSS Minifier: ( https://cssminifier.com/ ) オンラインで簡単にCSSコードを貼り付けてminifyできます。複数のCSSファイルをまとめてminifyすることも可能です。
- MinifyCSS.com: ( https://www.minifymedia.com/minifycss/ ) こちらもオンラインで利用可能なCSS圧縮ツールです。URLを入力してminifyすることもできます。
CSSのインライン化 (クリティカルCSS): ページの初期表示に必要なCSS（クリティカルCSS）を<head>内に<style>タグで直接記述し、残りのCSSは非同期で読み込むことで、初期表示を高速化できます。
- Critical CSS Generator: ( https://jonassebastianohlsson.com/criticalcss/ ) サイトのURLを入力するだけで、初期表示に必要なクリティカルCSSを自動生成してくれるオンラインツールです（生成されるCSSの精度は確認が必要です）。
JavaScriptの圧縮とminify: JavaScriptファイルも圧縮してファイルサイズを小さくしましょう。minifyと同様に、不要な空白やコメントを削除します。
- UglifyJS: ( https://skalman.github.io/UglifyJS-online/ ) オンラインでJavaScriptコードを貼り付けてminifyできます。様々なオプション設定も可能です。
- JavaScript Minifier: ( https://javascript-minifier.com/ ) こちらもオンラインで利用可能なJavaScript圧縮ツールです。複数のファイルをまとめてminifyすることもできます。
JavaScriptの遅延読み込みと非同期読み込み:
- defer属性: <script>タグにdefer属性を追加すると、HTMLのパースをブロックせずにJavaScriptファイルをバックグラウンドでダウンロードし、HTMLのパースが完了した後に、スクリプトが記述された順に実行されます。DOMContentLoadedイベントの発火を遅らせません。
- async属性: <script>タグにasync属性を追加すると、HTMLのパースをブロックせずにJavaScriptファイルをバックグラウンドでダウンロードし、ダウンロードが完了次第、HTMLのパースを中断してスクリプトを実行します。スクリプトの実行順序は保証されません。初期表示に不要なスクリプトや、他のスクリプトに依存しないスクリプトに適しています。
不要なCSSやJavaScriptの削除: 開発中に記述したままになっている不要なCSSルールやJavaScriptコードは、ファイルサイズを無駄に大きくするだけでなく、ブラウザの処理負荷を高める原因になります。定期的にコードを見直し、不要な部分を削除しましょう。
ツリーシェイキング: ES Modulesのimportとexport構文を利用している場合、WebpackやParcelなどのモダンなビルドツールは、実際に使用されていないコードを自動的に削除する「ツリーシェイキング」という最適化を行います。これらのツールを活用することで、バンドルサイズを削減できます。

3. レンダリングブロックの解消

ブラウザがWebページを読み込み、画面に表示するまでの間に、CSSやJavaScriptの読み込みや実行がレンダリングを妨げる（ブロックする）ことがあります。レンダリングブロックを解消することで、初期表示速度を大幅に向上させることができます。

CSS配信の最適化
前述のクリティカルCSSのインライン化と、残りのCSSの非同期読み込みを徹底しましょう。<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'; this.onload=null;"> のように記述することで、初期レンダリングをブロックせずにCSSを読み込むことができます。noscript要素でフォールバックも用意しておくと良いでしょう。
JavaScript配信の最適化
defer属性やasync属性を適切に使用し、初期レンダリングに必要なJavaScriptのみを同期的に読み込むようにしましょう。初期表示に関わらないJavaScriptは、DOMContentLoadedイベントの後や、ユーザーの操作後に読み込むようにするなど、工夫が必要です。

サーバー側の最適化

Webサイトのパフォーマンスは、フロントエンドだけでなく、サーバーの応答速度にも大きく左右されます。サーバー側の最適化も重要な要素です。

高速なホスティングサービスの利用
共用サーバーは他のサイトの影響を受けやすく、パフォーマンスが不安定になることがあります。VPS（仮想専用サーバー）や専用サーバー、クラウドホスティングなど、より高性能で安定したホスティングサービスを検討しましょう。
HTTP/2の有効化
HTTP/2は、HTTP/1.1よりも効率的にリソースを転送できるプロトコルです。ヘッダー圧縮や多重化などの機能により、並列ダウンロードが可能になり、ページの読み込み時間を短縮できます。多くのホスティングサービスで標準で利用可能になっているため、有効になっているか確認しましょう。
コンテンツ配信ネットワーク (CDN) の導入
CDN（Content Delivery Network）は、世界各地に配置されたサーバーネットワークを利用して、ユーザーに最も近いサーバーからコンテンツを配信する仕組みです。これにより、物理的な距離による遅延を減らし、応答速度を向上させます。
- Cloudflare: ( https://www.cloudflare.com/ja-jp/ )
  無料プランから利用できる高性能なCDNです。セキュリティ機能（DDoS対策、WAFなど）も充実しています。
サーバーキャッシュの活用
静的なコンテンツ（HTML、CSS、JavaScript、画像など）をサーバー側でキャッシュし、再利用することで、リクエストごとに毎回生成する手間を省き、サーバーの負荷を軽減し、応答速度を向上させます。WordPressなどのCMSでは、キャッシュプラグインを利用することで簡単に設定できます。

キャッシュの活用

ブラウザキャッシュを適切に設定することで、ユーザーが再度サイトを訪れた際の読み込み時間を大幅に短縮できます。一度ダウンロードしたリソースを再利用することで、サーバーへのリクエスト数を減らし、高速な表示を実現します。

Cache-Controlヘッダーの設定
ブラウザにどのリソースをどのくらいの期間キャッシュさせるかを指示するHTTPヘッダーを設定します。max-age（キャッシュの有効期間）、public（CDNなどの中間キャッシュを許可）、private（特定のユーザーのブラウザのみキャッシュ）、no-cache（毎回サーバーに検証）、no-store（キャッシュを一切禁止）などのディレクティブがあります。
Expiresヘッダーの設定
Cache-Controlヘッダーと同様に、キャッシュの有効期限を具体的な日時で設定します。Cache-Controlの方がより新しい仕様のため、基本的にはCache-Controlの使用が推奨されます。
ETag/Last-Modifiedヘッダーの設定
ブラウザがサーバーにリソースの更新を確認する際に使用するHTTPヘッダーを設定します。ETagはリソースの内容に基づいて生成される識別子、Last-Modifiedはリソースの最終更新日時です。これらのヘッダーが設定されていると、ブラウザはキャッシュされたリソースが更新されていないか効率的に確認できます。

その他の最適化テクニック

上記以外にも、Webサイトの高速化に役立つテクニックは多数存在します。

DNSプリフェッチ
ユーザーがクリックする可能性のあるリンクのドメイン名を事前にDNSルックアップしておくことで、クリック後の応答時間を短縮します。<link rel="dns-prefetch" href="//example.com"> のように<head>内に記述します。
プリコネクト
別のドメインへの接続を事前に確立しておくことで、リソースの取得時間を短縮します。CDNや外部APIなど、頻繁にアクセスするドメインに対して有効です。<link rel="preconnect" href="https://example.com"> のように<head>内に記述します。
テキスト圧縮 (Gzip/Brotli)
HTML、CSS、JavaScriptなどのテキストファイルを圧縮して転送することで、ダウンロード時間を短縮します。Gzipは広くサポートされている圧縮形式、Brotliはより高い圧縮率を実現できる新しい形式です。サーバー側で設定が必要です。
リダイレクトの削減
不要なリダイレクトは、余計なHTTPリクエストを発生させ、表示速度を遅らせます。サイト構造を見直し、リダイレクトをできる限り減らすようにしましょう。特に、複数のリダイレクトが発生している場合は改善が必要です。
DOMサイズの削減
大きすぎるDOMツリーは、ブラウザのレンダリングパフォーマンスに悪影響を与えます。不要な要素を削除したり、DOM構造をシンプルに保つように心がけましょう。複雑な構造は、JavaScriptの動作にも影響を与える可能性があります。

なぜWebサイトの高速化が重要なのか？
PageSpeed Insightsとは？スコアの見方
【実践編】PageSpeed Insightsで90点以上を目指す最適化テクニック
サーバー側の最適化
キャッシュの活用
その他の最適化テクニック

PageSpeed Insightsでの計測と改善サイクルの重要性
まとめ

PageSpeed Insightsでの計測と改善サイクルの重要性

これらの最適化テクニックを一つずつ試し、PageSpeed Insightsで効果を計測することが非常に重要です。改善前後のスコアや各指標の変化を定期的に確認しながら、あなたのWebサイトにとって最適な設定を見つけていくことが、90点以上のスコア達成への近道です。

現状のPageSpeed Insightsスコアを計測する。
まずは、あなたのWebサイトの現状のパフォーマンスをPageSpeed Insightsで測定し、改善が必要な箇所を把握します。PCとモバイル両方のスコアを確認しましょう。
提案された改善点の中から、優先度の高いものから順に試す。
PageSpeed Insightsのレポートには、具体的な改善提案と、その影響度が示されています。影響度の高いものから優先的に対策を試してみましょう。
改善後に再度PageSpeed Insightsでスコアを計測し、効果を確認する。
対策を実施したら、必ず再度PageSpeed Insightsでスコアを計測し、改善効果があったかを確認します。スコアだけでなく、各指標（FCP、LCP、CLSなど）の変化も確認しましょう。
効果が低い場合は別の改善策を試す。
期待した効果が得られなかった場合は、別の改善策を検討し、試してみましょう。Webサイトの構成や利用している技術によって、効果的な対策は異なります。
目標の90点以上を目指して、継続的に改善を行う。
Webサイトのパフォーマンスは常に変化する可能性があります。コンテンツの追加や変更、利用している外部リソースの変化などによって、スコアが低下することもあります。定期的にPageSpeed Insightsで計測し、継続的に改善に取り組むことが重要です。