Webサイトの表示速度を改善する方法｜Core Web Vitals対策

表示速度はなぜ重要なのか――SEOとCVRへの影響

Webサイトの表示速度は、単なる「快適さ」の問題ではありません。ビジネスの成果に直結する最重要指標のひとつです。Googleは公式に表示速度を検索ランキング要因として採用しており、遅いサイトは検索順位の面で不利になります。

数字で見ると、その影響は明確です。Googleのデータによると、ページの読み込みが1秒から3秒に遅くなると直帰率が32%増加し、5秒になると90%増加します。また、Amazonの調査では表示速度が1秒遅延するごとにCVR（コンバージョン率）が約7%低下するとされています。これは、月間売上が100万円のECサイトであれば、1秒の遅延で月7万円の機会損失が生まれている計算です。

中小企業や個人事業主のサイトでも同じことが言えます。問い合わせフォームにたどり着く前にユーザーが離脱してしまえば、どれだけ優れたサービスを提供していても成果にはつながりません。特にスマートフォンからのアクセスでは通信環境が不安定な場合も多く、表示速度の最適化がより重要になります。

Googleは2021年からCore Web Vitals（コアウェブバイタル）という3つの指標をランキング要因に組み込んでおり、これを改善することがSEO対策の一環として不可欠です。表示速度が遅いままのサイトをリニューアルしたい場合は、VOLTのサイトリニューアルサービスもご検討ください。

Core Web Vitalsとは――3つの指標を理解する

Core Web Vitalsは、Googleがユーザー体験を数値で評価するために定めた3つの主要指標です。それぞれの意味と合格基準を正確に理解しましょう。

LCP（Largest Contentful Paint）― 読込み速度

LCPは、ページ内で最も大きなコンテンツ要素が表示されるまでの時間を測定します。「最も大きなコンテンツ要素」とは、メインビジュアル画像、動画のサムネイル、大きなテキストブロックなどが該当します。

• 良好：2.5秒以内
• 改善が必要：2.5秒〜4.0秒
• 不良：4.0秒超

LCPが遅い主な原因は、画像ファイルサイズの肥大化、サーバーレスポンスの遅延、レンダリングをブロックするCSSやJavaScriptなどです。

CLS（Cumulative Layout Shift）― 視覚的安定性

CLSは、ページ読み込み中に要素が予期せずズレる量を数値化した指標です。たとえば、記事を読んでいる途中で広告が突然表示されて文章がずれたり、画像の読み込みが遅れてボタンの位置が変わったりする現象がこれにあたります。

• 良好：0.1以下
• 改善が必要：0.1〜0.25
• 不良：0.25超

CLSが高いサイトでは「読みたいリンクをタップしようとしたら別のリンクを押してしまった」という誤タップが発生し、ユーザーのストレスと離脱の原因になります。

INP（Interaction to Next Paint）― 応答性

INPは、2024年3月にFID（First Input Delay）に代わって導入された新指標です。ユーザーがボタンをクリックしたり、フォームに入力したりした際に、画面が応答するまでの時間を測定します。FIDが「最初の操作」のみを測定していたのに対し、INPはページ滞在中のすべての操作を対象としている点が大きな違いです。

• 良好：200ミリ秒以内
• 改善が必要：200〜500ミリ秒
• 不良：500ミリ秒超

INPが遅いサイトは、ボタンを押しても反応がない・フォーム入力がカクつくといった問題が発生し、ユーザーが「壊れている」と感じて離脱する原因になります。

PageSpeed Insightsの使い方

自分のサイトの表示速度を確認するには、Googleが無料で提供しているPageSpeed Insights（ページスピードインサイツ）を使います。URLを入力するだけで、Core Web Vitalsのスコアと具体的な改善提案が表示されます。

基本的な使い方

• 手順1：PageSpeed Insights（https://pagespeed.web.dev/）にアクセスする
• 手順2：分析したいページのURLを入力して「分析」をクリック
• 手順3：モバイル・デスクトップそれぞれのスコアと改善提案を確認する

スコアは0〜100で表示され、90以上が「良好（緑）」、50〜89が「改善が必要（オレンジ）」、49以下が「不良（赤）」です。モバイルとデスクトップで別々に評価されますが、Googleのランキング評価はモバイル基準であるため、モバイルスコアを優先して改善しましょう。

結果の読み方

レポートには「フィールドデータ」と「ラボデータ」の2種類が表示されます。フィールドデータは実際のユーザーのアクセスデータに基づく値で、ラボデータはGoogleのテスト環境で計測した値です。SEO上重要なのはフィールドデータですが、アクセスが少ないサイトではフィールドデータが表示されない場合があります。その場合はラボデータを参考にしましょう。

「改善できる項目」セクションには、具体的な修正ポイントが優先度順にリストされます。各項目をクリックすると詳細と対象ファイルが表示されるので、一つずつ対応していきます。

表示速度を改善する具体的な方法

ここからは、PageSpeed Insightsで指摘される代表的な問題とその解決方法を解説します。上から順に効果が大きい施策です。

1. 画像をWebP形式に変換する

画像ファイルは、ほとんどのWebサイトでページ容量の50〜70%を占めています。JPEG・PNGで掲載している画像をWebP形式に変換するだけで、画質を維持しながらファイルサイズを25〜35%削減できます。

• 変換方法：Squoosh（https://squoosh.app/）やTinyPNG（https://tinypng.com/）で無料変換可能
• 推奨サイズ：1ファイルあたり100KB以下を目標に
• 注意点：メインビジュアルなど大きな画像は幅1920pxまでにリサイズしてから変換する

2. 画像の遅延読み込み（Lazy Loading）を導入する

ページ内のすべての画像を一度に読み込むと、初期表示に時間がかかります。画面に表示されるタイミングで画像を読み込む「遅延読み込み」を導入することで、初期読み込み時間を大幅に短縮できます。

HTMLのimg要素にloading="lazy"属性を追加するだけで、ブラウザが自動的に遅延読み込みを行います。ただし、ファーストビュー（最初に画面に表示される領域）の画像にはlazy属性を付けないでください。LCPの対象要素が遅延読み込みされると、かえってスコアが悪化します。

3. CSS・JavaScriptを最小化（Minify）する

CSSやJavaScriptファイルに含まれる改行・スペース・コメントを削除する「最小化（Minification）」により、ファイルサイズを10〜30%削減できます。さらに、使われていないCSSやJSを削除する「ツリーシェイキング」も有効です。

• CSS：不要なスタイルシートを特定して削除し、残りをMinifyする
• JavaScript：使用していないライブラリやプラグインのスクリプトを削除し、必要なものはdefer属性やasync属性で非同期に読み込む
• レンダリングブロック解消：クリティカルCSS（ファーストビューの表示に必要なCSS）をインライン化し、残りを非同期で読み込む

4. CDN（Content Delivery Network）を導入する

CDNは、世界中に分散配置されたサーバーからコンテンツを配信する仕組みです。ユーザーに最も近いサーバーからデータが配信されるため、サーバーレスポンス時間（TTFB）が大幅に短縮されます。

代表的なCDNサービスとしては、Cloudflare（無料プランあり）、AWS CloudFront、Vercelなどがあります。小規模サイトであればCloudflareの無料プランで十分な効果が得られます。CDN導入により、TTFB（Time to First Byte）が50〜70%改善するケースも珍しくありません。

5. 不要なプラグインを削除する（WordPress向け）

WordPressを利用している場合、プラグインの数が多いほど読み込むCSS・JSファイルが増加し、表示速度が低下します。以下の手順で整理しましょう。

• 使っていないプラグインは「無効化」ではなく「削除」する（無効化状態でもデータベースに負荷がかかる場合がある）
• 機能が重複しているプラグインを統合する（例：SEOプラグインが複数入っている場合はひとつに絞る）
• プラグインの代替としてテーマ標準機能やコード実装に置き換える
• プラグインの目安は15個以内を推奨。20個を超えると速度低下が顕著になります

WordPress特有の速度改善テクニック

WordPressサイトは適切に設定しないと表示速度が遅くなりがちです。以下のWordPress特有の対策を実施しましょう。

キャッシュプラグインの導入

WordPressは動的にページを生成するため、アクセスのたびにデータベースに問い合わせが発生します。キャッシュプラグインを導入することで、生成済みの静的HTMLを保存・配信し、サーバー負荷を大幅に軽減できます。おすすめのプラグインはWP Super Cache（無料・設定が簡単）やW3 Total Cache（詳細設定が可能）です。

データベースの最適化

長期間運用しているWordPressサイトでは、リビジョン（記事の編集履歴）、スパムコメント、一時的なオプションデータなどがデータベースに蓄積し、クエリの応答速度が低下します。定期的にデータベースを最適化しましょう。WP-Optimizeプラグインを使えば、ワンクリックで不要データを削除できます。

PHPバージョンの更新

サーバーのPHPバージョンが古いままだと、処理速度が遅くなります。PHP 7系からPHP 8系に更新するだけで、処理速度が2〜3倍向上するとされています。レンタルサーバーの管理画面からPHPバージョンを確認し、可能であれば最新の安定版に更新しましょう。

表示速度改善のチェックリスト

最後に、表示速度改善で実施すべき施策をまとめます。上から順に取り組んでください。

• PageSpeed Insightsでモバイルスコアを確認する
• 画像をWebP形式に変換し、100KB以下に圧縮する
• ファーストビュー以外の画像にlazy loading属性を追加する
• 使用していないCSS・JavaScriptを削除する
• 残ったCSS・JSファイルをMinify（最小化）する
• クリティカルCSSをインライン化する
• CDNを導入する（Cloudflare無料プランが手軽）
• WordPressの場合はキャッシュプラグインを導入する
• 不要なプラグインを削除する
• PHPバージョンを最新に更新する
• サーバーのスペック・プランを見直す

表示速度の改善は一度やって終わりではなく、コンテンツ追加やプラグイン更新のたびにスコアが変動します。月に一度はPageSpeed Insightsでスコアを確認し、継続的に最適化していくことが重要です。Core Web Vitalsの詳しい解説は、Core Web Vitals完全ガイドもあわせてご覧ください。