「自社サイトの表示が遅い」「スマホで見ると画面がガタガタする」――こうした問題は、ユーザー離脱だけでなくSEOにも悪影響を及ぼしています。Googleが検索ランキングの要素に加えたCore Web Vitalsの改善が急務です。
この記事では、Core Web Vitalsの3つの指標の意味から、中小企業でも実践できる具体的な改善手順までわかりやすく解説します。
Core Web Vitalsとは？なぜ改善が必要なのか
「Webサイトの表示が遅い」「スマホで見と画面がガタガタする」――こうした体験は、ユーザーの離脱を招くだけでなく、SEOにも悪影響を及ぼします。
Core Web Vitals（コアウェブバイタル）は、Googleが2021年から検索ランキングの要素に加えた指標で、ユーザー体験を数値化し、改善すべき課題を明確にしてくれます。Googleの調査によると、ページの読み込みに3秒以上かかると53%のユーザーが離脱するというデータがあり、特にモバイルユーザーが増加する中、快適な閲覧体験の提供は不可欠です。
Core Web Vitalsは単なる技術指標ではなく、ビジネスの成果に直結する要素です。Webアクセシビリティ対策と併せて取り組むことで、より幅広いユーザーに快適な体験を提供できます。ページ速度が1秒改善されるだけでコンバージョン率が7%向上した事例や、問い合わせ数が15%増加した事例も報告されています。
測定される3つの指標
Core Web Vitalsは、以下の3つの指標で構成されています。
LCP（Largest Contentful Paint）
ページ内で最も大きなコンテンツが表示されるまでの時間を測定します。レンダリング方式の選択もLCPに大きく影響するため、SSR・SSG・ISRの違いを理解しておくことも重要です。目標値は2.5秒以内です。
INP（Interaction to Next Paint）
ユーザーがクリックやタップした際、サイトが反応するまでの時間を測定します。2024年3月からFIDに代わって正式指標となりました。目標値は200ms以内です。
CLS（Cumulative Layout Shift）
ページ読み込み中に要素が予期せず移動する度合いを測定します。目標値は0.1以下です。
中小企業こそ取り組むべき理由
「Core Web Vitals改善は大企業向けでは？」と思われるかもしれませんが、実は中小企業こそ取り組むべき施策です。
大手企業のサイトでもCore Web Vitalsが不良なケースは少なくありません。中小企業が先に改善することで、検索結果で優位に立てる可能性があります。また、サイト規模が小さい分、改善箇所も限定的でコストを抑えて取り組めます。画像の圧縮やプラグインの見直しなど、無料でできる施策も多数あります。
中小企業にとって、一人ひとりの顧客との関係性は特に重要です。快適なWebサイトは、「この会社は細部まで気を配っている」という信頼感を生み出します。
現状を把握する：測定ツールの使い方
改善を始める前に、まずは現状を正確に把握することが重要です。Googleは無料で使える測定ツールを複数提供しています。
Google Search Consoleでサイト全体を確認
Google Search Consoleは、サイト全体のCore Web Vitalsの状況を一覧で確認できる基本ツールです。
- Google Search Consoleにアクセスし、対象サイトを選択
- 左メニューから「エクスペリエンス」→「ウェブに関する主な指標」をクリック
- モバイルとPCそれぞれのレポートを確認
ページは「良好（緑）」「改善が必要（黄色）」「不良（赤）」の3つに分類されます。特に「不良」に分類されているページを優先的に改善しましょう。
実際のユーザーデータに基づいているため、問題のあるページをグループ化して表示してくれる点が優れています。ただし、データが表示されるには一定のアクセス数が必要です。
PageSpeed Insightsで詳細分析
PageSpeed Insightsは、個別のページを詳細に分析し、具体的な改善提案を受け取れるツールです。
- PageSpeed Insightsにアクセス
- 分析したいページのURLを入力して「分析」をクリック
- モバイルとデスクトップの結果を確認
パフォーマンススコア（0〜100点）と各指標の測定値が表示され、「改善できる項目」セクションに具体的な対策が優先度順に表示されます。トップページだけでなく、主要な商品ページや問い合わせページも測定し、改善提案の上位3〜5項目から取り組みましょう。
改善の優先順位の付け方
測定結果から、どこから手を付けるべきかを判断する基準は以下の通りです。
アクセス数の多いページから改善
トップページ、主要な商品・サービスページ、ブログの人気記事など、訪問者が多いページを優先します。
コンバージョンに直結するページを重視
問い合わせフォーム、商品購入ページ、資料請求ページなど、ビジネス成果に直結するページは最優先で改善します。
最も悪い指標から取り組む
3つの指標のうち、最も基準から離れているものから改善します。例えばLCPが5秒、CLSが0.05なら、LCPを優先します。
測定は月に1回程度定期的に実施し、改善の効果を継続的にモニタリングすることをおすすめします。
LCP改善：ページ表示速度を高速化する
LCPは3つの指標の中でも、最も改善効果が体感しやすく、取り組みやすい項目です。ページ内で最も大きなコンテンツ（メインビジュアルの画像、ヒーローエリアの背景画像、大きなテキストブロックなど）が表示されるまでの時間を2.5秒以内にすることが目標です。
画像最適化の具体的手順
LCP改善の最も効果的な方法は画像の最適化です。
ステップ1：画像を圧縮する
TinyPNG、Squoosh、ImageOptimなどの無料ツールを使って、画質を保ちながらファイルサイズを削減します。目安として、メインビジュアルは200KB以下、記事内の画像は100KB以下に収めましょう。
ステップ2：次世代フォーマット（WebP）を使う
WebPは、JPEGやPNGに比べて25〜35%ファイルサイズが小さくなります。Squooshで変換するか、WordPressの場合は「EWWW Image Optimizer」プラグインで自動変換が可能です。
ステップ3：適切なサイズで画像を配信する
デバイスに応じた画像サイズを用意することで、無駄なデータ転送を削減できます。HTMLのsrcset属性を使うか、WordPressではテーマやプラグインが自動的に設定してくれます。
ステップ4：遅延読み込みを実装する
ファーストビュー以外の画像は、スクロールして表示されるタイミングで読み込むようにします。HTMLにloading="lazy"属性を追加するだけで実装できます。
サーバー応答時間の改善
画像を最適化してもLCPが改善しない場合、サーバー側に問題がある可能性があります。
キャッシュプラグインを導入する
ページをキャッシュすることで、サーバーの負荷を減らし表示速度を向上させます。WP Super Cache、W3 Total Cache、LiteSpeed Cacheなどがおすすめです。
CDNを利用する
Cloudflareなどの無料CDNを利用すると、世界中のサーバーにコンテンツをキャッシュし、ユーザーに最も近いサーバーから配信できます。
サーバーのアップグレードを検討する
共有レンタルサーバーの最安プランを使っている場合、エックスサーバー、ConoHa WING、さくらのレンタルサーバなど、より高速なサーバーへの移行を検討しましょう。
INP改善：サイトの反応速度を向上させる
ボタンをクリックしたのに反応しない――こうしたストレスは、ユーザーの離脱に直結します。INPの改善は、サイトの「反応の良さ」を高める施策です。
JavaScriptの削減と最適化
INPが悪化する最大の原因はJavaScriptの実行です。ブラウザはシングルスレッドで動作するため、JavaScriptが実行されている間は他の処理ができません。
不要なスクリプトを見つける
Chrome DevToolsの「Coverage」タブで、使用されていないコードの割合を確認できます。赤色で表示されている部分が「読み込まれているが使われていないコード」です。
削減の具体策
- 使っていないプラグインを無効化・削除する
- スクリプトの読み込みを必要なページのみに限定する
- JavaScriptを非同期・遅延読み込みにする（
asyncまたはdefer属性を追加）
外部ツールの見直し
多くのサイトで、外部ツールがINPを悪化させています。
- Google Analyticsは最新版（GA4）のみにする
- SNSシェアボタンは公式ウィジェットではなく軽量な代替手段を使う
- チャットツールは全ページではなく問い合わせページのみに限定する
- 複数の広告ネットワークを使っている場合は統合を検討する
この見直しだけで、INPが300msから150msに改善した事例もあります。
CLS改善：レイアウトの安定性を確保する
「タップしようとしたら画面がずれて、違うボタンを押してしまった」――この体験は、ユーザーに大きなストレスを与えます。CLSは、ページ読み込み中に視覚的な要素がどれだけ移動したかを数値化した指標で、目標値は0.1以下です。
画像・動画の領域確保
画像が読み込まれるまで、ブラウザはその領域をどれだけ確保すればいいかわかりません。HTMLにwidthとheight属性を指定することで、画像が表示される前から適切なスペースが確保されます。
<img src="image.jpg" width="800" height="600" alt="説明文">
CSSでaspect-ratioプロパティを使う方法も有効です。
動的コンテンツの対策
広告やポップアップがページ読み込み後に表示されると、その分だけレイアウトがずれます。
- 広告枠には事前に固定の高さを設定する
- ポップアップやバナーは画面上部ではなく下部に表示する
- 動的に挿入される要素には、あらかじめスペースを確保する
Webフォントの最適化
システムフォントからWebフォントに切り替わる瞬間、文字サイズや行間が変わりレイアウトがずれることがあります。
CSSのfont-display: swapを使うことで、Webフォントの読み込み中もシステムフォントで表示し、読み込み完了後にスムーズに切り替えられます。
無理なく改善を進めるステップ
Core Web Vitals改善は、一度に完璧を目指すのではなく、段階的に進めることが成功の鍵です。
社内で取り組める改善と専門家が必要な改善
社内で取り組める改善
- 画像の圧縮とWebP変換
- 不要なプラグインの削除
- キャッシュプラグインの導入
- 画像のwidth/height属性の追加
専門家に依頼すべき改善
- サーバーの移行
- テーマやプラグインのカスタマイズ
- JavaScriptの大幅な書き換え
- CDNの本格導入
まずは社内でできることから始め、効果が限定的な場合に専門家への依頼を検討しましょう。
外部に依頼する場合のポイント
制作会社に依頼する際は、以下を明確に伝えましょう。
- 現在のPageSpeed Insightsのスコア
- 特に改善したいページ（トップページ、商品ページなど）
- 予算と期間の目安
「Core Web Vitals改善」だけでなく、「コンバージョン率向上」「離脱率低下」など、ビジネス目標も共有することで、より効果的な提案を受けられます。
Harmonic Societyでは、中小企業の皆様に「ちょうどいいデジタル化」を提供することを大切にしています。無理なく段階的に進められる方法をご提案しますので、ぜひご相談ください。
改善後の効果測定
改善施策を実施したら、必ず効果を測定しましょう。
- PageSpeed Insightsで改善前後のスコアを比較
- Google Search Consoleで「良好」なページ数の推移を確認
- Google Analyticsで直帰率、コンバージョン率の変化を追跡
データに基づいて次の改善策を検討することで、継続的な最適化が実現できます。月に1回程度の定期的なモニタリングをおすすめします。
よくある質問
Q. 改善したのにスコアが上がらない場合は？
測定のタイミングやネットワーク状況で結果が変動することがあります。複数回測定して平均値で判断しましょう。また、一つの施策だけでは効果が限定的な場合もあるため、複数の改善策を組み合わせることが重要です。
Q. モバイルとPCで結果が違う理由は？
モバイルは通信速度やデバイス性能がPCより低いため、スコアが低くなる傾向があります。Googleはモバイルファーストインデックスを採用しているため、モバイルの結果を優先的に改善しましょう。
Q. WordPressでの注意点は？
プラグインの入れすぎが最大の問題です。同じ機能を持つプラグインが複数ある場合や、長期間使っていないプラグインは削除しましょう。また、テーマによってはCore Web Vitals対策が組み込まれているものもあります。
Q. 相談できる相手の選び方は？
Core Web Vitals改善の実績があるか、具体的な改善提案ができるか、改善後の効果測定まで対応してくれるかを確認しましょう。単なる技術対応ではなく、ビジネス成果を重視してくれるパートナーを選ぶことが重要です。
Core Web Vitals改善は、ユーザー体験の向上とビジネス成果の両方を実現する重要な施策です。まずは現状を測定し、できることから一歩ずつ取り組んでみてください。