サイト表示速度改善の「正解」ロードマップ：PSIに踊らされず利益を最大化する15の手順

サイトの表示速度は、SEO評価やCVRに大きな影響を与える非常に重要な指標です。

見落とされがちですが、せっかく流入してくれたユーザーがコンバージョンに至らない最大の要因のひとつで、最優先の経営課題とも言えるでしょう。

まあ、PageSpeed Insights（PSI）で100点を取ること自体が目的になってはいないでしょうか。

真に重要なのはスコアそのものではなく、ユーザーがストレスなくコンバージョンに至るまでの「スムーズさ」です。

本記事では、机上の空論ではない、プロが現場で行う「実利」のための15のサイト表示速度改善策を、優先順位別に解説いたします。

表示速度改善サービスについて詳しく知る 

サイト表示速度の改善が重要な理由：なぜ「0.1秒」の短縮に命をかけるのか

ユーザーの忍耐力は、私たちが想像する以上に脆いものです。

実際、あなたもWebサイトを見ているとき、ページの読み込みが遅くてそのサイトを離脱した経験があるのではないでしょうか。

Webサイトの表示速度改善に取り組むべき理由は以下の通りです。

サイトの表示速度を調べてみよう

サイトの表示速度の重要性が理解できたところで、現在の速度について調べてみましょう。

表示速度は、PageSpeed Insightsで誰でも簡単に調べられます。

無数の指標が出てきますが重要なのは一部です。
次のセクションでは追うべき重要指標について解説していきます。

サイトの表示速度改善で追うべき指標は3つだけ（Core Web Vitals）

PSIの無数の指標に惑わされる必要はありません。

サイトの表示速度改善で追うべき指標は基本的に以下の3つだけです。

指標名	意味	改善のポイント
LCP (Largest Contentful Paint)	メインコンテンツが表示されるまでの時間	サーバー応答、画像の軽量化
INP (Interaction to Next Paint)	クリックやタップに対する反応速度※2024年3月からFIDに代わり導入	JSの実行時間削減
CLS (Cumulative Layout Shift)	レイアウトが崩れたりガタつかないか	画像サイズ（width/height）の指定

以上の3つは、Googleが検索順位の決定要因としても公式に採用しており、まとめてCore Web Vitals（コアウェブバイタル）と呼ばれます。

まずは、この3つの指標で合格ラインを目指すことが大切です。

サイト表示速度が遅くなる原因も3つ

PSIにはたくさん表示されますが、サイト表示速度が原因は、大きく分けると以下の3つに集約されます。

難解なエラーメッセージも、実際のところこの3つのどれかを直してほしいと言っているに過ぎません。

自身のサイトがどの原因に当てはまるか、本記事の具体的な改善策を見ながら確認していきましょう。

次のセクションからは優先度順に具体的な改善策を紹介していきます。

【優先順位：高】即効性のある「画像・動画」の最適化

まずは、最も低コストで、かつ大きな効果が期待できる画像・動画の対策から始めましょう。

ここを後回しにしてコードの修正に手をつけるのは効率的ではありません。

1. 画像を適切なサイズにリサイズ・トリミングする

Webサイトに画像をアップロードする際は、実際に表示されるサイズに合わせてリサイズしましょう。

例えば、スマホでの表示幅は、大きくても横幅400px程度です。

にもかかわらず、横幅3000pxを超えるような高画質の写真をそのまま貼り付けてしまうと、必要以上に大きなデータまで読み込むことになり、ページの表示速度を大きく下げる原因になります。

具体的なサイズ目安

• ブログ記事のアイキャッチや本文画像であれば、横幅800px〜1200px程度で十分
• スマホ専用の画像なら横幅750px程度で十分

やり方

Windowsの「フォト」やMacの「プレビュー」、あるいはオンラインツールの「Canva」などで、アップロード前にあらかじめ適切なサイズに縮小しましょう。

ポイント

1枚の画像が「何MB（メガバイト）」もある場合は要注意です。「数百KB（キロバイト）」以下に抑えることを目標にしてください。

2. 画像圧縮ツールでファイル容量を軽量化する

画像をリサイズした後は、さらに圧縮ツールを使ってファイル容量を小さくしましょう。

画像には、人間の目では判別できないレベルの細かな色情報が含まれているので、必要以上にファイル容量が大きくなっています。

そんなとき、圧縮ツールを使えば画質をほとんど劣化させずに不要なデータを削ぎ落とし、容量を半分以下に軽量化してくれます。

画像圧縮におすすめのツール

具体的なツールとしては、ブラウザ上でドラッグ＆ドロップするだけで画像圧縮できる無料ツールTinyPNGがおすすめです。

また、WordPressを使用している場合は、EWWW Image Optimizerなどのプラグインを導入すれば、画像をアップロードするたびに自動で圧縮処理を行ってくれるため、手間がかかりません。

アクション

最初に紹介したリサイズ → 圧縮の流れをルーチン化してください。これだけでPSIのスコアが数点から十数点上がることがよくあります。

3. 次世代フォーマット「AVIF / WebP」への変換

従JPEGやPNGはもう「古い」形式になりつつあります。

Googleが推奨するWebP（ウェッピー）や、さらに高性能なAVIF（アビフ）の使用がおすすめです。

なお、JPEGかPNGだったら、JPEGの方が軽量なのでそちらを選びましょう。

メリット

画質を保ちながら、JPEGに比べて20〜30%ほど容量を軽量化できる優れた画像形式です。

平均 WebP ファイルサイズは、同等の SSIM インデックスでの JPEG ファイルサイズと比べて 25%～ 34% 小さくなっていました。引用元：WebP 圧縮の研究

やり方

WordPressでは、「EWWW Image Optimizer」や「Converter for Media」などのプラグインを使うことで、既存のJPEG画像を自動的にWebPへ変換して配信できます。

単発の変換なら、Googleが提供している「Squoosh」という無料ツールが非常に高性能でおすすめです。

4. 動画の外部化（YouTube / Vimeoの活用）

動画ファイル（MP4など）を自分のサーバーに直接アップロードするのは、最もサイトを重くする原因の一つです。

動画は画像よりも圧倒的に重く、多くのユーザーが同時に再生しようとすると、サーバーがパンクしてサイト全体が止まってしまいます。

一度YouTubeやVimeoにアップロードし、そこから発行される「埋め込みコード」をコピーしてサイトに貼り付けましょう。

動画配信の重い処理をYouTubeやVimeo側の強力なサーバーに肩代わりさせることができます。

5. srcset属性を設定する【難易度やや高い】

srcset（ソースセット）属性とは、閲覧者の画面サイズ（PCかスマホか）に合わせて、読み込む画像を自動で出し分けるための設定です。

スマホで閲覧しているのにPC用の重い画像を読み込ませるのは非効率です。

srcset属性を設定すれば、PCユーザーには高解像度の大きな画像を、スマホユーザーには容量の軽い小さな画像を配信できるようになり、モバイルでの表示速度が向上します。

WordPressの近年のバージョン（4.4以降）であれば、画像をアップロードすると自動的にsrcset属性が付与されるようになっています。

もし、独自のCMSやHTMLでサイトを構築している場合は、imgタグにsrcset属性を記述し、デバイスごとに最適な画像を指定するようにしてください。

ただし、HTMLの知識が求められるが高いので難しい場合はエンジニアや表示速度改善サービスに依頼しましょう。

具体的には、以下のようにスマホ用とPC用の2枚の画像を用意し、画面幅に応じて出し分ける記述を行います。

HTML
<img src="sample-pc.jpg"     
srcset="sample-sp.jpg 500w,             
sample-pc.jpg 1000w"     
sizes="(max-width: 600px) 100vw,            
1000px"     
alt="レスポンシブ画像の解説図">

この記述の意味は以下の通りです。

コード	意味
srcset（画像の候補）	ブラウザに対しスマホ用（500w）とPC用（1000w）」の2つの選択肢を提示します。
sizes（表示サイズ）	画面幅が600px以下のときは画面いっぱいに表示し、それ以外は1000px幅で表示してください、という指示です。

初心者向け画像・動画の最適化アクションプランまとめ

1. 自分のサイトで、ファイルサイズが1MBを超えている画像がないかチェックする。
2. その画像を「TinyPNG」などのツールで圧縮し、WebP形式でアップロードし直す。
3. YouTube以外の動画をサーバーに入れている場合は、YouTubeへの移行を検討する。

【優先順位：中】フロントエンドの「無駄」を削ぎ落とす

画像の次は、サイトの裏側にあるコードや通信の仕組みを整える作業に入ります。

少し専門的な内容に聞こえるかもしれませんが、WordPressのプラグインなどを活用すれば、エンジニアではないWeb担当者でも十分に実践可能な領域です。

ここでは、手間に対して改善効果が大きい4つの施策を紹介します。

6. 画面外の画像には遅延読み込み（Lazy Load）を設定

画面外の画像は、遅延読み込み（Lazy Load）を設定してください。

遅延読み込みとは、ユーザーがスクロールしてその場所に到達するまで読み込みを待つ設定のことです。

遅延読み込みを設定しない場合、アクセスした瞬間にページ内の全画像を読み込もうとします。

しかし画面外の画像を最初からすべて読み込むのは通信の無駄であり、結果的に最初の表示速度（LCP）を遅らせる原因になります。

そのため、遅延読み込みを設定し、必要なときに必要な分だけ画像を読み込むようにすることで、初期表示にかかる負荷を軽減する必要があるのです。

やり方

WordPressのバージョン5.5以降では、標準機能として画像の遅延読み込みが実装されました。

もし古い環境を使用している場合や、より細かく制御したい場合は、「a3 Lazy Load」などのプラグインを導入することで簡単に設定できます。

注意点（最重要）

ファーストビュー（開いた瞬間に見える範囲）にある画像には、遅延読み込みを設定しないでください。 むしろ表示が遅くなってしまいます。

7. CSS / JavaScript の最小化（Minify）

Webページを構成するCSS、JavaScriptなどのソースコードから、余分なスペースや改行、コメントを削除してファイルを軽量化してください。

この処理を専門用語でMinify（ミニファイ）と呼びます。

プログラマーが書くコードには、人間が読みやすくするための改行やメモ（コメント）が含まれていますが、ブラウザがページを表示する上でこれらは不要です。

これらを削除するだけでファイルサイズを数％〜数十％削減できる場合があります。

やり方

手動で削除する必要はありません。

WordPressであれば、「Autoptimize」や「WP Rocket」などのプラグインを使って、「CSS/JSを縮小する」にチェックを入れるだけで自動的にコードを圧縮・連結してくれます。

特にCSSやJavaScriptファイルの読み込み時間を短縮するのに有効です。

8. 不要な外部ファイル・タグ・プラグインの削除

家と同じで、Webサイトも放っておくと「不要なもの」が溜まります。

使用していない外部ツールやプラグインを見直し、サイトの読み込みを阻害している不要なプログラムを削除してください。

チェックリスト

• Googleタグマネージャー： 過去に使っていたヒートマップツールや、既に契約が終わった広告の計測タグが残っていませんか？
• プラグイン： 「いつか使うかも」と無効化したまま放置しているプラグインはありませんか？
• 外部フォント： 使っていないフォントの読み込み設定が残っていませんか？

外部ツール（タグ）は1つ増えるだけで読み込みを数十ミリ秒遅らせます。「今、本当に使っているか」を定期的に見直してください。

9. ブラウザキャッシュの最適化

ブラウザキャッシュとは、一度サイトを訪れたユーザーのブラウザ（ChromeやSafariなど）にサイトのデータを一時保存させ、2回目以降の表示を高速化する仕組みのことです。

PageSpeed Insightsで「静的なアセットと効率的なキャッシュポリシーの配信」という警告が出た場合、この設定ができていない可能性があります。

そのようなときは、ブラウザキャッシュを使い、画像やCSSなどのデータを1年間といった長期間ブラウザに保存するよう設定してください。

やり方

設定にはサーバー内の.htaccessというファイルを編集する方法がありますが、記述を間違えるとサイトが表示されなくなるリスクがあります。

初心者の方は、「WP Rocket」や「W3 Total Cache」といったキャッシュ系プラグインを使用するのが安全かつ確実です。

ブラウザキャッシュを設定するとリピーターにとっての快適性が大幅に向上するため、必ずチェックしておきたい項目です。

フロントエンド整理のアクションプランまとめ

1. 「a3 Lazy Load」などで画面外の画像の遅延読み込みをしてみる
2. WordPressを使っているなら、「Autoptimize」を導入してコードを圧縮してみる。
3. Googleタグマネージャーを開き、1年以上使っていない計測タグを削除する。
4. 不要なプラグインは「無効化」ではなく「削除」する。
5. 、「WP Rocket」や「W3 Total Cache」でブラウザキャッシュを有効にする

なお、フロントエンドの整理になると多少難易度が上がってきます。

自身で対応するのが難しい/面倒だと感じた方は、弊社の表示速度改善サービスをぜひご活用ください。

【優先順位：低】サーバー・インフラの根本改善

最後は、サーバー環境や通信設定に関する改善策です。

これまでの施策を行ってもスコアが改善しない場合、根本的なサーバーのパワー不足や設定漏れが原因かもしれません。

エンジニアの協力が必要な項目も多いですが、サーバーパネルからボタン一つで設定できる項目もあるため、まずは現状の設定を確認してみてください。

10. サーバーサイド圧縮（Gzip / Brotli）を有効にする

サーバーからブラウザへデータを送る際、ファイルを圧縮して転送サイズを小さくするgzip（ジー・ジップ）圧縮などの設定を有効にしましょう。

これはファイルの受け渡し時に、一時的にデータを圧縮フォルダ（zip）のような状態にして軽くする仕組みです。

テキストファイルなどは、圧縮することで容量を70〜90%近く削減できることもあります。

多くのレンタルサーバーでは管理画面でコンテンツ圧縮等の項目をオンにするだけで設定できます。

手動で行う場合は.htaccessファイルへの記述が必要になるため、サーバーのマニュアルを参照しながら慎重に作業してください。

11. JavaScriptの非同期化（レンダリングブロックの解消）

PageSpeed Insightsで頻出するレンダリングを妨げるリソースの除外という警告に対処しましょう。

これは、JavaScriptの読み込みが終わるまで、画面の描画（レンダリング）がストップしてしまっている状態を指します。

通常、ブラウザは上から順にコードを読み込みますが、途中で重いJavaScriptファイルがあると、そこで処理が詰まってしまいます。

これを防ぐために、deferやasyncという属性をタグに追加し、JavaScriptを裏側で非同期に読み込ませる設定が必要です。

この処理を行うことで、メインの描画を邪魔せずに済み、Core Web Vitalsの最新指標であるINP（応答性）の改善にも大きく貢献します。

WordPressではAsync JavaScriptなどのプラグインを使うことで、専門知識がなくても設定可能です。

12. サーバースペック・PHPバージョンの見直し

小手先のテクニックで改善しない場合、利用しているサーバー自体のスペック不足を疑う必要があります。

特に、格安レンタルサーバーや古いプランを長年使い続けている場合は注意が必要です。

プランのアップグレードのほか、「エックスサーバー」や「ConoHa WING」といった高速表示に定評のあるサーバーへの移行も検討すべきタイミングです。

まずは、PHPのバージョンを確認し、最新のもの（例：PHP 8.xなど）に更新してください。

13. 通信プロトコルの最新化（HTTP/3）

通信方式が古いHTTP/1.1のままであれば、複数のファイルを同時に転送できるHTTP/3（またはHTTP/2）対応へ切り替えることで、劇的に速くなることがあります。

14. CDN（コンテンツデリバリーネットワーク）を導入する

CDN（コンテンツデリバリーネットワーク）の導入も効果的です。

これは、世界中に配置されたキャッシュサーバーが、あなたの代わりにコンテンツをユーザーへ配信してくれる仕組みです。

世界各地のキャッシュサーバーから配信することで、物理的な距離による遅延を解消します。

また、通常は1台のサーバーですべてのアクセスを処理しますが、CDNを使えば負荷を分散させることができます。

そのため、アクセス集中時のダウンも防止可能です。

特に、画像や動画が多いサイトや、多数の地域から多くのアクセスがあるサイトでは大きな効果を発揮します。

無料で利用できるCloudflare（クラウドフレア）などが有名で、個人運営のメディアでも導入事例が増えています。

15. リダイレクトの使用を最小限に抑える

ページを転送するリダイレクトの設定は、必要最小限に留めてください。

リダイレクト（301転送など）が発生すると、ブラウザは新しいURLへ移動するための通信を余計に行うことになり、その分だけ待ち時間が発生します。

例えば、スマホでPC用ページにアクセスした際のリダイレクトや、httpからhttpsへの転送などが幾重にも重なると、表示は遅くなります。

サイトに内部リンクを設置する際は、転送が必要ない最終的なURLを直接記述するように修正してください。

サイト表示速度の改善に関するよくある質問

最後に、速度改善に取り組む中でよく寄せられる質問に回答します。

目標設定や作業の優先順位を決める際の参考にしてください。

PageSpeed Insightsのメッセージ別の解決策

以下の表に、PageSpeed Insightsでよく表示されるメッセージと、それに対する具体的な解決策をまとめました。

ご自身の診断結果に出てきたエラー項目と照らし合わせ、該当する改善策をチェックしてください。

PageSpeed Insightsのメッセージ	具体的な改善策
画像配信を改善する過大なネットワークペイロードの回避	・画像を適切なサイズにリサイズ ・トリミングする ・画像圧縮ツールでファイル容量を軽量化する ・次世代フォーマットWebPへ変換する ・srcset属性を設定する
オフスクリーン画像の遅延読み込み	・画像の遅延読み込み（Lazy Load）を設定する ・動画はYouTubeの埋め込みコードを活用する
CSS / JavaScript の最小化使用していない CSS / JavaScript の削減	・HTML/CSS/JavaScriptを圧縮（Minify）する ・不要な外部ファイル・タグ・プラグインを削除する
レンダリングを妨げるリソースの除外	・レンダリングを妨げるJavaScriptを除外 ・非同期化する
効率的なキャッシュポリシーの配信	・ブラウザキャッシュの有効期限を長く設定する
テキスト圧縮の有効化	・サーバーサイド圧縮（gzipなど）を有効にする
サーバーの初期応答時間を短縮	・サーバーのスペック見直し・HTTP/2対応をする ・CDNを導入する
複数のページリダイレクトを避ける	・リダイレクトの使用を最小限に抑える

次章からは、これらの改善策について、画像・動画、コード・キャッシュ、サーバー・インフラの3つのカテゴリに分けて、具体的な手順を解説していきます。

まとめ

サイト表示速度の改善は、単にPageSpeed Insightsの点数を上げるゲームではありません。

その先には、あなたのサイトを訪れてくれたユーザーに、少しでも快適に過ごしてもらうという本質的な目的があります。

まずは、今回紹介した画像の圧縮や不要なプラグインの削除といった、すぐに改善できることから始めてみてください。

小さな改善の積み重ねが、やがて検索順位の上昇や売上アップという大きな成果となって返ってきます。