自社サイトを開いたとき、表示までにワンテンポ待たされる感覚はないでしょうか。作った本人は毎日見ていて慣れてしまいますが、初めて訪れたユーザーにとって、その数秒の待ち時間は「離脱するかどうか」を決める分かれ目になります。
「サイトが重い」「ページの読み込みが遅い」といった問題は、ユーザー体験だけでなくSEOやコンバージョン率にも直接影響します。多くのWeb担当者が「何から手をつけていいかわからない」「改善方法が専門的すぎる」と感じますが、表示速度改善は5つのステップに分けて体系的に取り組めます。現状計測、原因特定、画像最適化、サーバー・インフラ最適化、フロントエンド最適化という流れと、今日から実践できる改善策を順に見ていきましょう。
表示速度が重要な理由
表示速度が遅いと離脱率が上がります。Googleの調査では、表示に3秒以上かかるページで訪問者の53%が離脱します。モバイルではその傾向がさらに顕著で、集客したユーザーを入口で失うことになり、広告費やSEOへの投資効果を直接下げます。せっかく費用をかけて集めた訪問者の半分を、中身を見てもらう前に取りこぼしているとすれば、これほどもったいない話はありません。Googleは2010年から表示速度をランキング要因の一つとしており、2021年にはCore Web VitalsをPage Experienceの指標として正式採用しています。つまり速度は、ユーザー体験とSEOの両面から評価される要素なのです。
- LCP（Largest Contentful Paint）
- 主要コンテンツが表示されるまでの時間。2.5秒以内が良好な目安
- INP（Interaction to Next Paint）
- ユーザーの操作に対するページの応答速度。200ミリ秒以内が良好な目安。2024年3月にFIDに替わりCore Web Vitalsの指標として採用された
- CLS（Cumulative Layout Shift）
- 読み込み中のレイアウトのずれ。0.1以下が良好な目安
ECサイトでは表示速度が遅くなるほどコンバージョン率が下がる傾向にあります。商品ページや決済フローが遅れれば、購入直前のユーザーが離脱するためです。企業サイトでも問い合わせフォームの表示が遅いと潜在顧客を失いやすく、表示速度の改善はコンテンツや広告を増やさずCVRを上げられる数少ない施策の一つです。訪問者が3秒で離脱する原因の筆頭が、この表示速度なのです。
ステップ1：現状の速度を計測
改善はまず現状把握から始まります。感覚ではなく、客観的なデータで今の速度を測りましょう。Google PageSpeed Insights（モバイル・デスクトップのスコアと改善提案）、GTmetrix（Waterfallチャートで読み込みの流れを確認）、WebPageTest（複数拠点からテスト可能）、Google Search Console（Core Web Vitalsの実ユーザーデータ）を組み合わせて使うとよいです。SEO全体のチェック項目はSEOチェックリストにまとめています。
- Google PageSpeed Insights
- Google提供の無料ツール。モバイル・デスクトップのスコアと具体的な改善提案を表示
- GTmetrix
- 詳細なパフォーマンス分析とWaterfallチャートで読み込みの流れを視覚的に確認
- WebPageTest
- 複数拠点からテスト可能。実ユーザー環境に近い条件で計測
- Google Search Console
- Core Web Vitalsの実ユーザーデータを確認し、現実的な指標を把握
計測する指標は、完全読み込み時間（Load Time）、FCP、LCP、Time to Interactive、総ページサイズ、リクエスト数です。複数デバイス・時間帯で計測し、キャッシュクリア後の状態も含めて記録し、改善前後の比較ができるようにします。
計測で意識したいのは、スコアの点数そのものに一喜一憂しすぎないことです。PageSpeed Insightsは100点満点でスコアを出しますが、100点を目指すことが目的ではありません。大事なのは、実際のユーザーが体感する速さと、それに紐づくCore Web Vitalsの各指標が「良好」の範囲に入っているかどうかです。まずは最も改善インパクトの大きい項目を特定し、そこから手をつけましょう。
ステップ2：原因を特定（画像、サーバー等）
ボトルネックになりやすいのは、画像の最適化不足（ファイルサイズが大きい、WebP/AVIF未使用、レスポンシブ未対応、遅延読み込み未実装）、サーバー関連（応答時間が長い、CDN未使用、HTTP/2未対応、Gzip未設定）、JavaScript・CSS（不要なライブラリ、クリティカルCSS未実装、非同期読み込み未実装）、CMS・DB（クエリ最適化不足、不要なプラグイン、キャッシュ未設定、DB断片化）です。
原因の特定で大切なのは、あれもこれもと手を広げる前に、最も重い要素を一つ見つけることです。ステップ1で使ったGTmetrixのWaterfallチャートを見ると、どのファイルの読み込みに時間がかかっているかが一目で分かります。多くの場合、犯人は数個の巨大な画像か、重い外部スクリプトです。全体の8割の遅さが2割の要素から生まれている、というのはよくある話で、その2割を見つけることが改善の近道になります。
- サーバーの応答時間
- リクエストに応答するまでの時間。200ミリ秒以内が理想的
- CDNの未使用
- 地理的に離れたユーザーの読み込みが長くなりやすい
- HTTP/2の未対応
- 複数リソースの並行読み込みで表示速度が向上しやすい
- Gzip圧縮の未設定
- テキストの圧縮で転送データ量を削減できる
ステップ3：画像の最適化
5つのステップの中でも、最初に取り組むべきなのが画像の最適化です。画像はページサイズの大部分を占めることが多く、最適化の効果が出やすいからです。WebPはJPEG比で25〜35%程度のファイルサイズ削減が期待でき、AVIFはさらに小さくできますが対応ブラウザは限定的です。適切な圧縮率（目安として80〜90%）、表示サイズに合わせたリサイズ、メタデータの削除、遅延読み込み（loading="lazy"）の実装で、初期表示時間を短縮できます。WordPressではSmushやShortPixelなどのプラグイン、ビルドツールやCDNの画像最適化機能で自動化すると継続しやすくなります。
とくに見落とされがちなのが、表示サイズに合わせたリサイズです。カメラやスマートフォンで撮影した写真は、幅が4000ピクセルを超えることも珍しくありません。これをサイト上では幅800ピクセルで表示していても、ブラウザは元の巨大な画像をすべて読み込んでいます。アップロード前に適切なサイズに縮小するだけで、ファイルサイズは劇的に小さくなります。撮ったままの写真をそのまま載せるのが、速度低下の最も多い原因だといえます。
- WebP
- JPEG比で25〜35%程度のファイルサイズ削減が可能。モダンブラウザで広くサポート
- AVIF
- WebPよりさらに小さい。対応ブラウザは限定的
- 遅延読み込み
- 表示範囲に入った時点で読み込むことで初期表示を軽くする
ステップ4：サーバーとインフラの最適化
CDNを導入すると、ユーザーに近い拠点から静的ファイルを配信でき、読み込み時間を短縮しやすいです。Cloudflare（無料プランあり）、Amazon CloudFront、KeyCDNなどが選択肢です。サーバー側ではCPU・メモリ・SSDの見直し、データベースのクエリ最適化・インデックス・クエリキャッシュの活用で応答時間を改善できます。HTTP/2とHTTPSの実装で、複数リソースの並行読み込みとヘッダー圧縮による効率化が期待できます。キャッシュは、ブラウザキャッシュ（静的ファイル）、サーバーサイドキャッシュ（DB結果・ページ全体）、CDNキャッシュを組み合わせると効果的です。WordPressではW3 Total CacheやWP Rocketなどのキャッシュプラグインの導入が有効です。
そもそも契約しているサーバーのスペックが不足していると、他をどれだけ最適化しても頭打ちになります。月額数百円の格安プランで大量のアクセスをさばこうとすれば、応答が遅れるのは当然です。速度改善に取り組む前に、自社サイトに合ったサーバーを選べているかを見直すことが、遠回りのようでいて確実な一手になることもあります。
- ブラウザキャッシュ
- CSS・JS・画像をブラウザにキャッシュし、再訪問時の読み込みを短縮
- サーバーサイドキャッシュ
- DBクエリ結果やページ全体をサーバーにキャッシュ
- CDNキャッシュ
- CDN拠点にコンテンツをキャッシュし、配信速度を向上
ステップ5：フロントエンドの最適化
不要なCSSの削除、クリティカルCSSの実装、CSSの最小化、メディアクエリの見直しでレンダリングを軽くできます。JavaScriptは不要なライブラリの削除、最小化、非同期・遅延読み込みで初期表示を改善できます。preload（重要なリソースの事前読み込み）、prefetch（次のページで使うリソースの事前読み込み）、preconnect（外部ドメインへの接続の事前確立）でブラウザの読み込み効率を上げられます。モバイルでは、タッチフレンドリーなデザイン、適切なビューポート設定、モバイル向け画像の配信、タップターゲットの最適化が有効です。
WordPressサイトの場合、フロントエンド最適化の多くはプラグインで対応できます。ただし、プラグインを増やしすぎると今度はそれ自体が速度低下の原因になるため、本末転倒にならないよう注意が必要です。プラグインの入れすぎを防ぐ管理と、速度改善は表裏一体だと考えてください。効果の大きいキャッシュ系プラグインを一つ丁寧に設定する方が、機能の重複した複数のプラグインを詰め込むより結果が出ます。
- preload
- 重要なリソースを事前に読み込む
- prefetch
- 次のページで使う可能性の高いリソースを事前に読み込む
- preconnect
- 外部ドメインへの接続を事前に確立する
まとめ
表示速度改善は、現状計測から原因特定、画像最適化、サーバー・インフラ最適化、フロントエンド最適化へと進む5ステップで体系的に取り組めます。一度で完了するものではなく、定期的な計測と改善の繰り返しが成果につながります。
すべてを一度にやる必要はありません。まずPageSpeed Insightsで自社サイトを計測し、指摘された項目のうち「画像の最適化」から着手するのが、効果を実感しやすい始め方です。多くのサイトで、重い画像が速度低下の最大の原因になっているからです。数字が改善されていく過程は、続けるモチベーションにもなります。
表示速度の計測と改善のご相談
Webサイトの表示速度改善やパフォーマンス最適化でお困りでしたら、合同会社ギャラクタスにご相談ください。現状の計測と原因分析から、画像・サーバー・フロントエンドの最適化まで対応しています。「計測してみたが、どこから直せばいいか分からない」という段階からのご相談も歓迎です。無料相談でご要望をお聞かせいただければ、貴社サイトに合った改善プランをご提案します。
