Core Web Vitals完全攻略【2026年版】LCP・INP・CLSの改善方法と計測ツールを徹底解説
cortismarketing「ページが遅い」——それだけで、あなたのビジネスは機会損失を起こしています。
Googleの調査によれば、ページの表示が1秒遅れるだけで直帰率が最大32%増加します。スマートフォンでの閲覧が主流となった現代では、ユーザーはわずか数秒でそのページを離れるかどうかを判断します。せっかく広告費をかけてユーザーを集めても、表示が遅ければすべてが水の泡です。
私たちcortis（横浜市保土ヶ谷区を拠点とするパーソナルジム兼Webマーケティング会社）は、自社サイト「cortismarketing.com」の改善を通じてCore Web Vitalsの重要性を痛感しました。改善前は総合スコアが50台だったものが、施策を重ねることで90台まで到達。その実体験をもとに、この記事ではCore Web Vitals（コアウェブバイタル）とは何か、そして実際に数値を改善するための具体的な方法をWordPressサイト向けに徹底解説します。
Core Web Vitalsとは？Googleが定めたページ品質の3指標
Core Web Vitals（コアウェブバイタル）とは、Googleが2020年に発表したユーザー体験（UX）を数値化するための3つの指標の総称です。2021年6月のPage Experience Updateから、これらの指標はGoogleの検索ランキングシグナルとして正式に採用されています。
つまり、Core Web Vitalsのスコアが低いと、SEO順位にも直接悪影響が出る可能性があります。単なる「ページ速度の話」ではなく、SEO・広告・コンバージョンすべてに影響する重要指標です。
① LCP（Largest Contentful Paint）：最大コンテンツの描画速度
LCPは、ページ内で最も大きな視覚要素（メインのヒーロー画像や見出しテキストなど）が表示されるまでの時間を測定します。ユーザーが「ページが読み込まれた」と感じる体感速度に直結する指標です。
| 評価 | LCP時間 |
|---|---|
| 良好（Good） | 2.5秒以内 |
| 要改善（Needs Improvement） | 2.5〜4.0秒 |
| 不良（Poor） | 4.0秒超 |
主な原因：大きな画像ファイル・低速なサーバー・レンダリングブロックリソース（CSS/JavaScript）
② INP（Interaction to Next Paint）：インタラクション応答速度
INPは2024年3月に旧FID（First Input Delay）から置き換わった新指標です。ユーザーがクリック・タップ・キーボード入力などの操作を行ってから、次の画面描画が完了するまでの時間を計測します。ページ全体の「操作性・応答性」を評価する指標です。
| 評価 | INP時間 |
|---|---|
| 良好（Good） | 200ms以内 |
| 要改善（Needs Improvement） | 200〜500ms |
| 不良（Poor） | 500ms超 |
主な原因：重いJavaScript処理・不要なプラグインの過多・メインスレッドのブロック
③ CLS（Cumulative Layout Shift）：視覚的安定性
CLSは、ページ読み込み中に要素がどれだけズレて表示されるかを測定する指標です。画像が遅れて読み込まれてテキストが突然下にずれる、広告が挿入されてボタンがずれてしまう——そういった「意図せずタップしてしまう」体験の悪さを数値化します。
| 評価 | CLSスコア |
|---|---|
| 良好（Good） | 0.1以下 |
| 要改善（Needs Improvement） | 0.1〜0.25 |
| 不良（Poor） | 0.25超 |
主な原因：画像・動画への幅×高さ指定なし・Webフォントの遅延読み込み・動的に挿入される広告
PageSpeed InsightsとSearch Consoleでの計測方法
Core Web Vitalsを改善するには、まず「現状を正確に把握する」ことが第一歩です。Googleが無料で提供している以下のツールを使いましょう。
PageSpeed Insights（PSI）
URL：https://pagespeed.web.dev/
- 計測したいページURLを入力するだけで、LCP・INP・CLSの実測値と改善提案を確認できます
- モバイルとデスクトップを切り替えて確認できます（モバイルスコアの方が低いことが多い）
- 「フィールドデータ」（実際のユーザーデータ）と「ラボデータ」（シミュレーション）の両方が表示されます
- 改善提案に「推定節約時間」も表示されるため、優先度をつけやすい
Google Search Console（コアウェブバイタルレポート）
Search Consoleにログイン後、左メニューの「エクスペリエンス」→「ウェブに関する主な指標」から確認できます。
- サイト全体のURLを「良好・要改善・不良」に分類して一覧表示
- 問題のあるURLをグループ単位で把握できる
- 改善後に「修正を確認」ボタンを押すと、Googleに再クロールをリクエストできる
まずはこの2つのツールで自分のサイトのスコアを確認することから始めましょう。
LCP改善の具体的な方法
LCPはCore Web Vitalsの中でも最も改善効果が出やすい指標です。以下の施策を優先度順に実施しましょう。
① 画像の最適化（最優先）
LCPの原因の大半はヒーロー画像など「最大のコンテンツ」となる画像です。以下の対策が有効です。
- WebP形式に変換する：JPEGやPNGと比較して25〜35%のファイルサイズ削減が可能。WordPressではプラグイン「Imagify」「ShortPixel」などで自動変換できます
- 画像のサイズを適切に設定する：表示サイズより大きな画像を使っている場合は縮小する
- fetchpriority="high"を指定する：LCPとなるヒーロー画像に fetchpriority="high" 属性を追加し、優先的に読み込ませる
- 遅延読み込み（lazy loading）をLCP要素に使わない：スクロールしなくても見える画像に loading="lazy" を設定するとLCPが悪化します
② サーバーレスポンス速度（TTFB）の改善
サーバーが遅いとそもそもの応答が遅くなり、LCPも悪化します。
- 高速なレンタルサーバーに乗り換える：国内では「ConoHa WING」「エックスサーバー」などが速度で評価されています
- データベースの最適化：WordPressの投稿リビジョンや不要なデータが蓄積するとクエリが遅くなります。「WP-Optimize」などで定期的に整理しましょう
- PHPバージョンを最新にする：PHP 8.x系はPHP 7.x系と比較して処理速度が大幅に向上しています
③ キャッシュの活用
- ブラウザキャッシュ：一度読み込んだリソースをブラウザに保存し、2回目以降の読み込みを高速化します
- サーバーサイドキャッシュ（ページキャッシュ）：HTMLを静的ファイルとして保存し、PHP処理を省略します。WordPressでは「WP Rocket」「W3 Total Cache」「LiteSpeed Cache」などが代表的です
- CDNの利用：CloudflareなどのCDN（コンテンツデリバリーネットワーク）を使うと、世界中のサーバーからコンテンツを配信でき、地理的な遅延を低減できます
④ レンダリングブロックリソースの排除
CSSやJavaScriptが読み込み完了するまでページ描画が止まる状態を「レンダリングブロック」と呼びます。
- 不要なCSSをインライン化またはメディアクエリで分離する
- JavaScriptに defer または async 属性を追加する
- 使用していないCSSを削除する（「Asset CleanUp」などのプラグインが有用）
INP改善の方法
INP（Interaction to Next Paint）はJavaScriptの処理量と直結しています。ページ内のJSを減らすことが根本的な解決策です。
① 不要なプラグインを削除する
WordPressサイトで最も多いINP悪化の原因は使っていないプラグインが無駄なJavaScriptを読み込んでいることです。
- 使っていないプラグインは有効化したままにしない（無効化または削除）
- 「Asset CleanUp」または「Perfmatters」で、特定ページでのみJS/CSSを読み込むよう制御する
- ContactForm7などのフォームプラグインのJSはフォームがないページでは読み込み不要
② JavaScriptの遅延読み込み
- すべてのscriptタグに defer 属性を付与し、HTMLのパース完了後に実行させる
- 必要なJSのみを最初に読み込み、それ以外は遅延させる「Code Splitting」の概念を活用する
- サードパーティスクリプト（チャット・ヒートマップ等）は非同期読み込みに変更する
③ メインスレッドのブロックを減らす
長いJavaScriptタスク（50ms超）がメインスレッドを占有すると、ユーザーの操作に対する応答が遅れます。
- PageSpeed Insightsの「メインスレッドの作業を最小限に抑える」の項目を確認する
- 大きなタスクはsetTimeout()やrequestIdleCallback()で分割する
- Web Workerを活用して重い処理をバックグラウンドに移す（開発者向け）
CLS改善の方法
CLSは「ページが読み込まれた後にレイアウトがズレる」現象です。原因を特定して1つずつ潰していきましょう。
① 画像・動画に必ずwidthとheightを指定する
画像タグに幅と高さを指定することで、ブラウザは画像読み込み前から表示領域を確保できます。これだけでCLSを大幅に改善できるケースが多いです。
<!-- 悪い例 -->
<img src="hero.jpg" alt="ヒーロー画像">
<!-- 良い例 -->
<img src="hero.jpg" alt="ヒーロー画像" width="1200" height="630">WordPressでは画像アップロード時に自動でwidthとheightが付与されますが、テーマやページビルダーによっては省略されることがあります。ソースコードを確認してみましょう。
② Webフォントのレイアウトシフトを防ぐ
GoogleフォントなどのWebフォントは読み込みが遅れると、フォールバックフォントから切り替わる際にテキストのサイズが変わりCLSが発生します。
- font-display: swap を設定し、フォント読み込み中も代替フォントで表示する
- Googleフォントを使うなら link rel="preconnect" でドメインを事前接続する
- 可能であればフォントをローカルにホスティングする（GDPR対策にもなる）
- 「Autoptimize」や「WP Rocket」のフォント最適化機能を活用する
③ 広告・バナーの高さを事前確保する
アドセンスや外部バナー広告は読み込みに時間がかかるため、後から挿入されるとレイアウトが崩れます。
- 広告コンテナに最小高さ（min-height）をCSSで指定しておく
- ページ上部（ファーストビュー）への広告配置はCLSに特に影響するため避ける
WordPress向け速度改善プラグイン・ツール一覧
WordPressではプラグインを使うことで、専門知識がなくても多くの速度改善施策を実施できます。目的別に整理しました。
| 目的 | 推奨プラグイン | 特徴 |
|---|---|---|
| 総合速度改善 | WP Rocket（有料） | ページキャッシュ・遅延読み込み・JS/CSS最適化を一括管理。設定が簡単で効果が高い |
| 総合速度改善（無料） | LiteSpeed Cache | LiteSpeedサーバー環境で最大限の効果。それ以外でも十分に有用 |
| 画像最適化 | Imagify / ShortPixel | アップロード時に自動WebP変換・圧縮。既存画像も一括処理可能 |
| JS/CSS制御 | Asset CleanUp | ページごとに不要なJS/CSSを無効化できる |
| データベース最適化 | WP-Optimize | リビジョン削除・DB最適化・キャッシュ機能を備える |
| CDN | Cloudflare（無料あり） | DNSレベルでの高速化・セキュリティ強化 |
| フォント最適化 | OMGF（Optimize My Google Fonts） | Googleフォントをローカルホスティング化する |
注意：プラグインを入れすぎると逆に速度が低下します。同じ機能のプラグインを複数使わず、機能が重複しないよう整理することが重要です。
cortisの速度改善実体験：スコア50台から90台へ
ここからは、私たちcortis（cortismarketing.com）が実際に取り組んだ速度改善の記録を共有します。
改善前の状態（2024年初頭）
- PageSpeed Insightsスコア（モバイル）：52
- LCP：4.8秒（不良）
- INP：480ms（要改善）
- CLS：0.31（不良）
主な問題点は以下の通りでした：
- ヒーロー画像がPNG形式で約800KB（WebP未使用）
- 使っていないプラグインが7本有効化されたまま
- Googleフォント（Noto Sans JP）がレンダリングブロックを発生させていた
- 広告コンテナに高さ指定がなくCLSが発生
実施した改善施策
- ヒーロー画像をWebPに変換・サイズを1200×630pxに統一：800KB → 85KB（約89%削減）
- 不要プラグイン7本を削除：読み込みJS量が大幅減少
- WP Rocketを導入：ページキャッシュ・JS遅延読み込み・CSS最適化を一括設定
- Googleフォントをローカルホスティング化：OMGFプラグインで対応
- すべての画像タグにwidth・height属性を追加：CLSがほぼゼロに
- Cloudflareを導入：静的リソースをCDN経由で配信
- 広告コンテナにmin-heightを指定：アドセンス挿入時のズレを防止
改善後の結果（2024年末）
- PageSpeed Insightsスコア（モバイル）：94
- LCP：1.8秒（良好）
- INP：120ms（良好）
- CLS：0.04（良好）
スコアが52→94に向上したことで、Google検索での表示順位が安定し、直帰率も改善されました。特に画像のWebP変換とプラグインの整理だけで劇的な効果があった点は強調しておきたいと思います。難しい開発作業なしに、誰でも取り組める施策から始めることが重要です。
改善の優先順位まとめ
| 優先度 | 施策 | 難易度 | 効果 |
|---|---|---|---|
| 高 | 画像のWebP変換・サイズ最適化 | 低 | 大 |
| 高 | 不要プラグインの削除 | 低 | 大 |
| 中 | ページキャッシュプラグイン導入 | 中 | 大 |
| 中 | 画像タグへのwidth/height指定 | 低 | 中 |
| 中 | Webフォントのローカル化 | 中 | 中 |
| 低 | CDN導入 | 中 | 中 |
| 低 | サーバー乗り換え | 高 | 大 |
まとめ：Core Web Vitalsの改善はビジネス成果に直結する
この記事で解説した内容を振り返ります。
- Core Web VitalsはGoogleが定めた3つのUX指標（LCP・INP・CLS）で、SEO順位に直接影響する
- LCP改善には画像最適化・サーバー速度向上・キャッシュ活用が有効
- INP改善には不要プラグイン削除とJavaScript削減が根本的な解決策
- CLS改善には画像サイズ指定とフォント最適化が効果的
- cortis自身のサイトでも、これらの施策でスコアを52→94に改善できた
ページ速度の改善は一度やれば終わりではなく、プラグインの更新やコンテンツの追加に伴い定期的に見直す必要があります。まずはPageSpeed InsightsでURLを入力して現状を把握することから始めてください。
「自分のサイトでやってみたいけど、何から手をつければいいかわからない」
そんな方は、cortisにお気軽にご相談ください。横浜市保土ヶ谷区を拠点に、中小企業・個人事業主のWebマーケティング支援を行っています。ページ速度改善・SEO対策・Web広告まで、ビジネス成果につながる施策を一緒に考えます。
ホームページ制作、まずは相談してみませんか？
cortisマーケティングでは、初期費用5,000円〜のHP制作プランをご用意。
横浜・首都圏の中小企業・店舗様の集客を全力でサポートします。
＼ 最新情報をチェック ／
