近年のGoogleは、検索エンジンの評価基準として「ユーザーエクスペリエンス（UX）」を重要視している。
その一環として2021年から、ユーザーエクスペリエンスを定量的に評価する「Core Web Vitals」を導入した。
テクニカルで、なおかつ「コンテンツの質」とは別の領域だけに、
「対策方法がわからない」
「そもそもコンマ数秒の表示速度改善にどの程度意味があるのか」
という意見を持つ企業も少なくない。
だが、Core Web VitalsはGoogleのランキング要因の一つとして影響力を持っている。
また「売上」「契約率」にも影響を与えることから、無視できない指標だ。
本記事では、Core Web Vitalsの基礎知識と、各指標の改善方法を具体的に紹介する。
SEOやWeb集客の担当者として、深く理解しておくことで1つ頭が抜けた成果につながるだろう。
1. Core Web Vitalsとは？基本概念と3つの主要指標
まず、Core Web Vitalの概要と構成要素を確認し、基礎知識をしっかりと固めよう。
1.1.Core Web Vitals=「UXの度合いを定量化した指標」
Core Web Vitalsは、Googleが提唱するWebページのユーザーエクスペリエンス（UX）を評価する指標だ。
もう少し砕けた言い方をすると「ユーザーが快適にWebサイトを利用できる目安を”定量的に”示した基準」だ。
具体的には「ページの表示速度」「応答性（アクションや入力に対する反応の速さ）」「視覚的安定性（見やすさ、視認性）」の3つの要素にフォーカスしている。
- Largest Contentful Paint（LCP）：ページの表示速度
- Interaction to Next Paint（INP）：応答性
- Cumulative Layout Shift（CLS）：視覚的安定性
順に詳しく見ていこう。
要素1.Largest Contentful Paint（LCP）：ページの表示速度
公式の目標値：ページの読み込み開始から表示されるまで「2.5秒以内」
LCPは、ページのメインコンテンツが完全に表示されるまでの時間を測定する指標だ。
Googleは、ユーザーがストレスを感じないための基準として、LCPを2.5秒以内に抑えることを推奨している。
LCPの値が大きくなる要因としては、以下が挙げられる。
- 画像のサイズが大きすぎる
- サーバーの応答が遅い
- レンダリングブロック要素（JavaScriptやCSS）
対策としては、画像の最適化、CDNの活用、不要なJavaScriptの削減などが有効だ（詳しくは後述）。
要素2.Interaction to Next Paint（INP）：応答性
公式の目標値：クリック、スクロール、タップから「200ミリ秒（0.2秒）未満」
INPは、ユーザーの操作（クリックやスクロール）に対する応答時間を測定する指標だ。
ユーザー側からすると「レスポンスの速さ」とも言える。
ちなみに、2024年2月までは、First Input Delay（FID）と呼ばれる指標だった。
しかしFIDでは「最初のページの遅延」のみを表すため、遷移後のサイト全体の反応速度操を評価できていなかった。
INPではこの点が改善され、ページ全体の応答性を評価する指標へと変更されたのだ。
INPの値が悪化する要因には、以下が挙げられる。
- JavaScriptの処理が重い
- 不要なイベントリスナーが多い
- レンダリングブロックが多い
対策としては、JavaScriptの最適化、不要なスクリプトの削除、コードの分割による実行負荷の分散などがある（詳細は後述）。
要素3.Cumulative Layout Shift（CLS）：視覚的安定性
公式の目標値：CLSスコア0.1
CLSは、ページの視覚的な安定性を測る指標だ。
視覚的な安定性とは、端的にいうと「不意にデザインやレイアウトが乱れないこと」である。
CLSでは、ユーザーがページを閲覧中に、レイアウトのズレが発生する頻度と大きさを数値化する。
0から1の数値で表現され、0が最もよい（ズレが小さい）。
CLSは以下のような事象が起こると悪化する（数値が上がる）。
- ページが読み込まれた後に広告バナーが突然挿入される
- ユーザーが意図しない場所をクリックしてしまう
視覚的な不安定性はUXを大きく損ね、ページの信頼性を低下させる要因にもなる。
対策としては、画像や広告のスペースを事前に確保する、フォントの遅延読み込みを防ぐ、アニメーションや動的コンテンツの配置を最適化する、などが挙げられる（詳細は後述）。
2. Core Web Vitalsを改善する3つのメリット
Core Web Vitalsの改善は「テクニカルSEO」に分類される施策だ。
ページのコードやデザイン、レイアウト、サーバーとの通信速度など技術的な要素が多くに含まれる。
一方で「テクニカルSEOはあまり意味がない」という声もあるのが事実だ。
確かに、Core Web Vitalsはコンテンツの質を直接的に上げるものではない。
しかし、検索ランキングにも少なからず影響があることは確かである。
Googleは、検索結果の品質を向上させるため、良質なUXを提供するページを評価するためだ。
そこで、Core Web Vitalsを改善することのメリットを具体的に整理してみよう。
メリット1.SEOへの悪い影響を回避する
Core Web VitalsはGoogleの検索ランキング要因の一つであり、スコアが悪いと検索順位の低下を招くおそれがある。
端的にいえば「やらないこと」によっておこるマイナスが大きいのだ。
ちなみにGoogleは「ページエクスペリエンス」の高低が検索ランキングに影響すると述べている。
出典：ページエクスペリエンスがGoogle検索の検索結果に与える影響について｜Google検索セントラル
ページエクスペリエンスとは、「ユーザーがページを通して受け取る・感じる利便性」を表す。
一般的にはあまり使われない言葉だが「≒ユーザーエクスペリエンス」と考えておけば良いだろう。
メリット2.コンバージョン率（CVR）の向上・低下防止
Web上のコンテンツにおいて「タップ・クリックしてからコンテンツが表示されるまでの時間」は短ければ短いほど良い。
1タップごとにコンマ数秒の遅れがあるだけで、ユーザーは「重い」「イライラする」という感想を抱く。
実際にECサイトやSaaSを提供する企業からは、表示速度が1秒遅れるだけでコンバージョン率が数％低下することが報告されている。
ちなみにEC最大手のAmazonのリサーチでは、「表示速度が0.1秒遅れると、コンバージョン率が1%低下する」との結果が示されている。
このリサーチは2007年に行われ、実際に表示速度を0.1%ずつ低下させていくことで発覚したとのことだ。
また、他のあるリサーチでは、以下のような結果が報告されている。
- コンテンツが表示されるまでに3秒以上を要すると、閲覧者の40%が離脱する
- ページが重いと感じた人の8割近くは、二度とそのサイトで買い物をしなかった
「たかがコンマ数秒の遅れは大したことがない」といった考えは捨てるべきだろう。
Core Web Vitalsへの最適化が「売上」「契約率」にも確実に影響することが、実際のデータから明らかにされている。
メリット3.広告・マーケティング施策の効果最大化
Google広告やSNS広告からの流入が多いサイトでは、上記のような「遅れ」のデメリットが非常に大きくなる。
広告は出稿に対して確実に費用がかかるうえに、SEOよりも短期間で大量の流入を促すためだ。
Core Web Vitalsに最適化されていないと、広告によるリード獲得率やCPA（顧客獲得単価）が悪化し、コストやリソースの無駄が発生してしまう。
裏を返せば、適切に対処する（Core Web Vitalsを改善する）ことでこれらは大きく改善する見込みがあるわけだ。
3. Core Web Vitalsの具体的な改善方法
では、実際にCore Web Vitalsの改善方法を見ていこう。
Core Web Vitalsの改善は、3つの要素（LCP、INP、CLS）それぞれに対して行う。
3.1.LCPの改善方法
Largest Contentful Paint（LCP）は、ページのメインコンテンツが完全に表示されるまでの時間を示す指標だ。
GoogleはLCPを2.5秒以内にすることを推奨している。
LCPを改善するためには、以下のような対策が有効だ。
LCP改善①：画像の最適化（WebPの活用、遅延読み込み）
LCPの遅延は、メインコンテンツに含まれる画像や動画の読み込み速度が大きく影響する。
画像の最適化は、LCPの改善において最も効果的な手段の一つだ。
- WebPの活用
WebPは、Googleが開発した次世代画像フォーマットであり、PNGやJPEGと比較して約30〜50%のファイルサイズ削減が可能だ。
画像サイズが小さくなることで、読み込み速度が向上し、LCPのスコアが改善される。
WordPressなどのCMSを使用している場合は、「WebP Express」や「Smush」といったプラグインを活用すると、自動的に変換される。
- 遅延読み込み（Lazy Loading）
遅延読み込み（Lazy Loading）は、画面に表示されるまで画像を読み込まないようにする手法だ。
ファーストビュー（画面に最初に表示される部分）を優先的に読み込むことで、LCPの短縮効果がある。
実装例（HTML）
実装例（JavaScript）
JavaScriptを使用してより細かく制御することもできる。
let lazyImages = document.querySelectorAll(“img.lazy”);
lazyImages.forEach(img => {
img.setAttribute(“loading”, “lazy”);
});
});
LCP改善②：サーバー応答時間の短縮（CDNの活用、キャッシュの最適化）
LCPは、サーバーの応答時間（Time To First Byte: TTFB）の遅延でも悪化するため、対策しておこう。
- CDN（コンテンツデリバリーネットワーク）の活用
CDNを活用することで、最適な位置のサーバーからコンテンツを配信し、ロード時間を短縮できる。
また、静的ファイル（画像・CSS・JavaScript）の配信が高速化される。
LCP改善③：レンダリングブロックの削減（不要なCSS・JavaScriptの削除）
レンダリングブロックとは、ページの表示を妨げるリソース（特にCSSとJavaScript）のこと。
レンダリングブロックの最適化でもLCPの短縮が可能だ。
- 未使用CSS・JavaScriptの削除
不要なCSSやJavaScriptが含まれていると、ページの描画が遅れる。
Google ChromeのDevToolsを使用し、未使用のCSS・JavaScriptを特定してみよう。
手順（Chrome DevTools）
- F12キーを押してDevToolsを開く
- Coverage タブを選択（Ctrl + Shift + P → “Show Coverage”）
- 使用されていないCSS/JSを確認し、削除または縮小（Minify）する
- CSS・JavaScriptの非同期読み込み
レンダリングブロックを防ぐため、非同期読み込み（async/defer）を活用する方法も有効だ。
<script src=”script.js” defer></script>
async：ページの解析をブロックせずにスクリプトを実行
defer：ページの解析が完了後にスクリプトを実行（推奨）
LCP改善④：ファーストビューのコンテンツを優先的に読み込む
LCPは「画面を開いたとき、最初に表示されるコンテンツの読み込み時間」に影響される。
よって、CSSのインライン化やフォントの遅延読み込みによって、ファーストビューの読み込み時間を改善できる。
- 重要なCSSのインライン化
ファーストビューに必要なCSSのみをHTML内に直接記述し、レンダリングを高速化する。
外部CSSの読み込みを待たずに表示が開始されるため、LCPの改善が期待できる。
実装例（HTML）
body { font-family: Arial, sans-serif; }
.hero { background-color: #f5f5f5; padding: 20px; }
</style>
- フォントの遅延読み込み
フォントの読み込みが遅れると、LCPのスコアが悪化する。
フォントの読み込みタイミングを意図的に遅延させることで、表示速度の改善が期待できる。
実装例（CSS）
3.2.INPの改善方法
INP（Interaction to Next Paint）は、ユーザーの操作（クリック、タップなど）に対する応答速度を測定する指標だ。
従来のFID（First Input Delay）は「最初の入力の遅延」だけを測っていたが、INPはページ全体のインタラクティブ性を評価する。
改善方法は次のとおりだ。
INP改善①：JavaScriptの最適化（不要な処理の削減、非同期処理の導入）
JavaScriptの処理が重いと応答が遅くなり、INPが悪化する。
不要な処理の削減と非同期処理の活用で、レスポンスの向上を目指そう。
- 不要な処理の削減
JavaScriptのコード量が増えるほど、ブラウザはレンダリングやイベント処理に時間を要するため、不要なものは削除しよう。
手順（Chrome DevToolsで未使用スクリプトを特定）
- F12キーを押してChrome DevToolsを開く
- Coverage タブを開く（Ctrl + Shift + P → “Show Coverage”）
- JSタブを確認し、未使用のスクリプトを特定
- 使用されていないスクリプトを削除または遅延読み込みに変更
- 非同期処理の導入（async・deferの活用）
レンダリングブロックを防ぐため、JavaScriptは非同期で読み込む。
実装例（HTML）
<script src=”script.js” defer></script>
async：ダウンロード後すぐに実行する（重要でないスクリプト向け）
defer：ページの解析が完了してから実行（推奨）
実装例（JavaScript）
また、重い処理をWeb Workerでバックグラウンド実行すると、メインスレッドをブロックせずに済む。
worker.postMessage(“処理を開始”);
INP改善②：ユーザー入力イベントの遅延対策（フォームやボタンの反応速度を向上）
フォームやボタンのレスポンスが遅いと、INPスコアが低下するため、チェックしておこう。
- イベントリスナーの最適化
不要なイベントリスナーが多いと、処理コストが増加し、ボタンクリックやフォーム入力の遅延を引き起こす。
改善策としては、以下2点が有望だ。
1.passive: true を指定して、スクロールイベントの処理を最適化
JavaScript
JavaScript
2.debounce を適用して、頻繁に発生するイベント（キーボード入力など）の負荷を軽減
JavaScript
let timer;
return function () {
clearTimeout(timer);
timer = setTimeout(func, delay);
};
}
console.log(“入力処理”);
}, 300));
- フォームの即時レスポンスを確保
フォーム送信時に処理が遅れると「本当に送信されたのか？」という疑念が生じ、ユーザーの離脱につながる。
非同期送信を活用し、バックグラウンドで処理を行うことで遅延を防ごう。
実装例（JavaScript）
event.preventDefault();
const formData = new FormData(this);
const response = await fetch(“/submit”, { method: “POST”, body: formData });
console.log(“フォーム送信完了”);
});
INP改善③：フレームワークの適切な使用（React、Vue.jsなどのチューニング）
JavaScriptフレームワーク（React、Vue.js、Angularなど）のチューニングが適切でない場合もINPの悪化につながる。
以下のポイントに注意して最適化を行おう。
- 仮想DOMの更新を最適化（Reactの場合）
Reactの再レンダリングが頻発すると、操作のレスポンスが遅くなる。
不要なレンダリングを防ぐために、useMemo や useCallback を活用する。
- Vue.jsのリアクティブデータの最適化
Vue.jsでは、データの変更がコンポーネント全体の再レンダリングを引き起こすことがある。
レンダリングを無駄に実行させないために、computed プロパティなどを活用しよう。
3.3.CLSの改善方法
Cumulative Layout Shift（CLS）は、ページの視覚的な安定性を測る指標だ。
画像・広告の表示、フォントの読み込み、動的コンテンツの配置、アニメーションの制御が主な改善ポイントになる。
CLS改善①：画像・広告のサイズ指定（レイアウトシフトを防ぐ）
画像や広告が読み込まれる際にレイアウトが変わると、CLSスコアが悪化する。
あらかじめサイズを指定し、ブラウザが適切なスペースを確保できるように配慮しよう。
実装例（HTML）
<img src=”image.jpg” width=”600″ height=”400″ alt=”適切なサイズ指定”>
実装例（CSS）
また、CSSで aspect-ratio を指定することも有効だ。
img {
aspect-ratio: 3 / 2;
}
広告も同様に、サイズを指定して配置のズレを防ぐ。
<div style=”width: 300px; height: 250px;”>
<script>広告スクリプト</script>
</div>
CLS改善②：フォントの最適化（FOIT・FOUTの回避）
Webフォントの読み込みが遅れると、一時的にテキストが表示されない状態になる。
このとき、デフォルトフォントに置き換わる現象が発生すし、視認性が悪化する。
これを防ぐには、フォントが読み込まれるまでシステムフォントを表示させる。
実装例（CSS）
font-family: ‘CustomFont’;
src: url(‘font.woff2’) format(‘woff2’);
font-display: swap;
}
実装例（HTML）
また、Google Fontsを使用する場合は、display=swap を指定することでも回避できる。
<linkrel=”stylesheet”
href=”https://fonts.googleapis.com/css2?family=Roboto&display=swap”>
CLS改善③：動的コンテンツの配置対策（Lazy Load時のシフトを防ぐ）
Lazy Load（遅延読み込み）を適用すると、コンテンツが後から表示される。
このとき、レイアウトシフトが発生してしまい「ズレ」になりやすい。
そこで、画像や動画のプレースホルダー（仮のスペース）をあらかじめ確保し、表示の際のズレを防ぐ対策が有効だ。
実装例（HTML）
<div style=”width: 100%; height: 300px; background-color: #f0f0f0;”>
<img src=”image.jpg” loading=”lazy” width=”600″ height=”300″>
</div>
実装例（CSS）
また、CSSの min-height を活用することで、動的に追加される要素のスペースを保持できる。
.lazy-load-placeholder {
min-height: 200px;
}
4. Core Web Vitalsの測定方法
最後にCore Web Vitalsの測定方法を簡単に紹介する。
一般的にCore Web Vitalsは複数のツールを使って概算値を出す。
まずはGoogleの公式ツールで現状を把握しておこう、
測定方法1. Google PageSpeed Insights
Google PageSpeed Insights（PSI）は、WebページのCore Web Vitalsを測定し、改善点を提案するツールだ。
URLを入力するだけで、モバイル・デスクトップのスコアと詳細な指標を確認できる。
手順
- PageSpeed Insights にアクセス
- 測定したいページのURLを入力し「分析」ボタンを押す
- 結果ページで、LCP・INP・CLSの数値を確認
- 問題点がある場合「改善できる項目」のリストが表示される
スコアの見方
- 90以上（良好）：最適化ができている
- 50〜89（改善が必要）：一部最適化が求められる
- 0〜49（要改善）：パフォーマンスが低く、対策が急務
問題点の原因と修正のヒントが表示されるため、Core Web Vitals改善の第一歩として活用していこう。
測定方法2.Search ConsoleのCore Web Vitalsレポート
Google Search Consoleでは、Core Web Vitalsのスコアを過去28日間のデータとして分析できる。
PSIが瞬間的な測定であるのに対し、Search Consoleは「実際のユーザーのデータ」をもとにしている。
ユーザーが約1か月間、どのような使用感を持っていたかを俯瞰的に把握できる。
手順
- Google Search Console にアクセスし、プロパティ（自分のサイト）を選択
- 左メニューの「ウェブに関する主な指標」をクリック
- 「モバイル」と「デスクトップ」の2種類のスコアを確認
- 問題があるページのURLを特定し、修正が必要な項目をチェック
5. まとめ
本記事では、Googleのテクニカルな指標である「Core Web Vitals」について解説した。
Core Web Vitalsは技術的な要素を含むことから、敬遠する担当者も多い。
しかし、定量的な指標をベースとした改善策であり、実は取り組みやすい。
BtoB領域では、スムーズで素早いコンテンツの表示が「企業の信頼性」にもつながる。
コンテンツの価値をしっかり届けるためにも、ぜひ取り組んでいただきたい。
