「自社サイトが遅いと言われているが、何から手をつければいいかわからない」― 中小企業のWeb担当者からよく聞く悩みです。GoogleはCore Web Vitalsという3つの指標でサイトのユーザー体験を数値化しており、2026年3月のコアアップデート以降、これらのスコアが検索順位に与える影響はさらに強まっています。
この記事では、Core Web Vitalsの基本から測定方法、そして中小企業のサイトでも実践できる改善手順までを一通り整理します。
Core Web Vitalsとは何か
Core Web Vitalsは、Googleがユーザー体験の質を測るために定めた3つの指標です。ラボデータ（シミュレーション）ではなく、**実際にサイトを訪れたChromeユーザーの行動データ（CrUX）**をもとに評価されます。Googleは各指標の75パーセンタイル値（全訪問の75%がクリアしている水準）を評価基準として用います。
LCP（Largest Contentful Paint）― 読み込み速度
ページ内で最も大きな要素（ヒーロー画像や見出しテキストなど）が画面に描画されるまでの時間です。
| 評価 | 閾値 |
|---|---|
| 良い（Good） | 2.5秒以内 |
| 改善が必要（Needs Improvement） | 2.5〜4.0秒 |
| 遅い（Poor） | 4.0秒超 |
LCPが遅い最大の原因は最適化されていない画像です。次いでサーバー応答の遅延、レンダリングをブロックするCSSやJavaScriptが続きます。
INP（Interaction to Next Paint）― 応答性
クリック・タップ・キー入力などのインタラクションに対し、ブラウザが次の画面更新（ペイント）を行うまでの時間です。2024年3月にFID（First Input Delay）から置き換わりました。全インタラクションの98パーセンタイル値が評価されるため、「たまに重い処理が走る」だけでスコアが悪化します。
| 評価 | 閾値 |
|---|---|
| 良い（Good） | 200ms以内 |
| 改善が必要（Needs Improvement） | 200〜500ms |
| 遅い（Poor） | 500ms超 |
2026年現在、43%のWebサイトがINPの閾値を超えており、Core Web Vitalsの中でもっとも不合格率の高い指標です。
CLS（Cumulative Layout Shift）― 視覚的安定性
ページ読み込み中に要素が予期せず動く量（ガタつき）を測る指標です。画像サイズ未指定・広告の遅延挿入・Webフォントの遅延読み込みなどが主な原因です。
| 評価 | 閾値 |
|---|---|
| 良い（Good） | 0.1以下 |
| 改善が必要（Needs Improvement） | 0.1〜0.25 |
| 遅い（Poor） | 0.25超 |
まずは現状を測定する
改善の前に、自社サイトの現状スコアを把握することが先決です。
PageSpeed Insights
PageSpeed Insights にURLを入力するだけで、LCP・INP・CLSの実測値（フィールドデータ）とラボ計測値の両方を無料で確認できます。「フィールドデータ」セクションがCrUXをもとにした実際のユーザー体験、「診断」セクションが具体的な改善項目です。
Google Search Console
Search Console の「コアウェブバイタル」レポートでは、サイト全体のURL単位で不合格ページを一覧できます。ページグループごとに問題を絞り込めるため、どのテンプレートに問題があるかを特定しやすくなっています。
Chrome DevTools / Lighthouse
ローカル開発環境でのテストには Chrome DevTools の「Lighthouse」タブが有効です。ネットワーク速度や端末スペックをシミュレートしながら計測できるため、モバイル環境での問題を事前に発見できます。
LCP改善の具体的な手順
1. ヒーロー画像の最適化
LCPの対象になりやすいのはファーストビューのヒーロー画像です。以下の順で対策します。
フォーマットをWebP / AVIFに変換する
JPEGと比べてWebPは25〜35%、AVIFはさらに20%程度ファイルサイズを削減できます。WordPressサイトなら「EWWW Image Optimizer」などのプラグインで自動変換が可能です。
fetchpriority="high" を付与する
<img src="hero.webp" fetchpriority="high" alt="..." width="1200" height="630">LCP対象の画像に fetchpriority="high" を追加すると、ブラウザが優先的にダウンロードするため読み込みが早まります。
loading="lazy" をファーストビュー画像に使わない
ファーストビュー外の画像には loading="lazy" を使いますが、LCP対象の画像に誤って付けると逆効果になります。
2. サーバー応答時間（TTFB）の短縮
LCPが遅い場合、サーバーのTime to First Byte（TTFB）が原因のこともあります。
- キャッシュを有効化する: WordPressなら「W3 Total Cache」「WP Super Cache」などを使い、生成済みHTMLをキャッシュする
- CDNを導入する: Cloudflare（無料プランあり）をDNSに挟むだけで、静的アセットが世界中のエッジサーバーから配信されTTFBが大幅に短縮される
- サーバーのリージョンを確認する: ターゲットユーザーと物理的に離れたサーバーを使っていると応答が遅くなる
3. レンダリングブロックリソースの排除
CSSやJavaScriptがHTMLの解析をブロックしている場合、LCPが遅延します。PageSpeed Insightsの「レンダーブロックリソースの除去」という指摘が出ていれば対処が必要です。
- スクロールしなければ見えない（Above the fold 外の）CSSを非同期化する
- 不要なJavaScriptを
deferまたはasync属性で遅延読み込みする
INP改善の具体的な手順
INPはJavaScriptの実行負荷に起因することがほとんどです。
1. 長いタスクを分割する
ブラウザのメインスレッドを50ms以上専有するタスクを「ロングタスク」といいます。ロングタスクが実行中はユーザーの入力に応答できないため、INPが悪化します。
Chrome DevToolsの「パフォーマンス」タブで記録を取り、赤くマークされた長いタスクを特定しましょう。setTimeout や scheduler.yield() を使ってタスクを細かく分割することで、メインスレッドをインタラクションに解放できます。
2. サードパーティスクリプトを見直す
チャットウィジェット・広告タグ・マーケティングツールのトラッキングスクリプトはINPを悪化させる主要因です。導入しているスクリプトをリストアップし、使用頻度の低いものは削除するか、読み込みタイミングを遅延させます。
3. JavaScriptバンドルサイズを削減する
使っていないライブラリや関数が多いと、パース・コンパイル・実行のコストが積み上がります。Webpack・Vite などのバンドラーに備わっている Tree Shaking 機能を活用し、使われていないコードをビルドから除去しましょう。
CLS改善の具体的な手順
1. 画像・動画に幅と高さを指定する
<!-- NG: サイズ未指定 -->
<img src="photo.jpg" alt="...">
<!-- OK: widthとheightを明示 -->
<img src="photo.jpg" alt="..." width="800" height="450">サイズを指定しない画像は読み込み完了時に突然レイアウトを押し広げます。width/height属性を追加するだけでブラウザがあらかじめスペースを確保します。
2. Webフォントのレイアウトシフトを抑える
Webフォントの読み込み前後でフォントサイズが変わることでCLSが発生します。CSSの font-display: swap と、フォールバックフォントのサイズを近似させる size-adjust プロパティを組み合わせることでシフト量を最小化できます。
3. 動的コンテンツのスペースを事前確保する
バナー広告・SNSウィジェット・非同期で読み込むコンテンツは、表示前からCSSで高さを固定（min-height を設定するなど）しておくと、コンテンツ挿入時のガタつきを防げます。
SEO・コンバージョンへの影響
Core Web Vitalsの改善はSEOだけでなく、直接的なビジネス成果にも直結します。
- Googleのデータによると、ページの読み込みが1秒遅れるとコンバージョン率が7%低下する
- 2026年3月のコアアップデート以降、Core Web VitalsをクリアしているサイトはGoogle検索の1位付近に集中しており、不合格サイトとの順位差が広がっている
- Amazon・Walmartなどの調査では、100ms（0.1秒）の高速化が売上に1%以上の改善をもたらすことが示されている
SEO観点からのコンテンツ戦略については AI OverviewとSEO戦略 ― 検索の変化にどう対応すべきか もあわせてご覧ください。また、パフォーマンスを重視したWebサイト構築の技術的な選択肢については Next.js vs Astro ― 静的サイト構築はどちらを選ぶべきか【2026年版】 で詳しく解説しています。
まとめ ― 優先順位をつけて取り組む
Core Web Vitalsの改善は一度に全部やろうとすると迷子になります。以下の優先順位で取り組むと効率的です。
- PageSpeed InsightsでLCP・INP・CLSを確認する ― 現状把握なしに改善はできない
- LCP対象の画像をWebP化し、
fetchpriority="high"を付ける ― 工数対効果が最も高い - CDNとキャッシュを導入する ― 専門知識がなくてもCloudflareで対応可能
- 不要なサードパーティスクリプトを削除する ― INP改善に直結
- 画像にwidth/heightを指定する ― CLS対策として即効性が高い
Webサイトのパフォーマンス改善は、技術的な知識がないと「何が原因なのかわからない」という状況になりがちです。PageSpeed Insightsのスコアが改善しない、どこから手をつければいいかわからない、そういった場合はお気軽にグリームハブへご相談ください。現状診断から改善施策の立案・実装まで、貴社のサイト状況に合わせてサポートします。
