# サイト表示速度とSEOの関係｜Core Web VitalsがSEOランキングに与える影響 元のページ: SEO・Web集客の教科書 サイト表示速度とSEOの関係を解説します。Core Web Vitals（LCP・INP・CLS）がSEOランキングに与える影響と、PageSpeed Insightsでの計測・改善方法をまとめています。 ## **はじめに** 「サイトの表示が遅い」という問題は、ユーザー体験の悪化という観点で以前から認識されてましたが、2021年のGoogleのPage Experience Updateにより、Core Web VitalsがSEOのランキング要因として正式に採用されました。表示速度の問題は今や「ユーザーが不満を感じる」だけでなく「検索順位が下がる」という直接的なビジネスリスクになっています。 本記事では、Core Web Vitalsの各指標・表示速度とSEOの関係・具体的な改善施策を解説します。 ## **Core Web Vitalsとは** Core Web Vitals（コアウェブバイタル）とは、Googleがユーザー体験の品質を測定するために定義した、Webサイトのパフォーマンス指標群です。現在は以下の3つの指標で構成されています。 ### **LCP（Largest Contentful Paint：最大コンテンツの描画）** ページを開いてから、画面上で最も大きなコンテンツ要素（画像・テキストブロック等）が表示されるまでの時間を計測する指標です。 #### 目標値 - 良好：2.5秒以下 - 要改善：2.5〜4.0秒 - 不良：4.0秒以上 LCPが遅い主な原因として、サーバーレスポンスの遅延・大きな画像ファイル・レンダリングブロックするリソース（CSS・JavaScript）・クライアントサイドレンダリングの過多などが挙げられます。 ### **INP（Interaction to Next Paint：次のペイントへのインタラクション）** ページ上でユーザーがインタラクション（クリック・タップ・キー入力等）を行ったときから、その応答が画面に反映されるまでの時間を計測する指標です。2024年3月にFID（First Input Delay）から置き換えられました。 #### 目標値 - 良好：200ミリ秒以下 - 要改善：200〜500ミリ秒 - 不良：500ミリ秒以上 INPが悪い主な原因として、重いJavaScript処理・長いタスクのメインスレッドブロックなどが挙げられます。 ### **CLS（Cumulative Layout Shift：累積レイアウトシフト）** ページの読み込み中に、コンテンツが予期せず動く（レイアウトシフトが発生する）量を計測する指標です。広告の遅延表示・フォント切り替え・画像のサイズ未指定などが原因で、読んでいたテキストが突然ずれたり、タップしようとしたボタンが動いたりする現象をスコア化します。 #### 目標値 - 良好：0.1以下 - 要改善：0.1〜0.25 - 不良：0.25以上 ## **表示速度とSEOランキングの関係** ### **直接的なランキング要因** GoogleはCore Web Vitalsを「Page Experience」シグナルの一部としてランキング要因に採用しています。ただし現時点では、コンテンツの関連性・被リンクといった他の要因と比較すると、ランキングへの影響度は相対的に低いとされています。 「コンテンツの品質が低くても表示速度が速ければ順位が高い」とはならず、「コンテンツが同等に良質な場合に、表示速度が優れているサイトが有利になる」という理解が正確です。 SEOの基本的な考え方や施策については「[**SEO対策の基本（検索エンジンの仕組み）**](https://chot-inc.com/knowledge/what-is-seo)」の記事で詳しく解説しています。 ### **間接的なSEO影響（UXシグナル）** 表示速度がSEOに影響する経路として、直接的なランキング要因以上に重要なのが間接的な影響です。 #### **直帰率への影響** Google の調査によれば、ページの読み込み時間が1秒から3秒に増えると直帰率が32%増加し、1秒から5秒では直帰率が90%増加します。直帰率の上昇は、Googleがユーザーがページに価値を見出せなかったというシグナルとして解釈する可能性があります。 #### **クロール効率への影響** Googleのクロールバジェット（Googlebotが一定期間にクロールできるページ数）は限られており、応答が遅いサイトはクロール効率が下がりインデックスが遅くなる可能性があります。 ## **WordPressと次世代スタック（Next.js＋Vercel）のパフォーマンス差** 表示速度の改善において、使用する技術スタックは根本的な差を生む。 ### **WordPressの構造的な課題** WordPressはPHPがリクエストのたびにデータベースを参照してHTMLを動的生成します。この処理が表示速度のボトルネックになります。 高速化施策（WP Rocket・Cloudflare CDN・画像最適化）を重ねることで改善できますが、構造的な限界があります。 典型的な未最適化WordPressサイトのPageSpeed Insightsスコア：モバイルで30〜50台 高速化施策を徹底したWordPressサイト：モバイルで60〜80台 ### **Next.js＋Vercelの優位性** Next.jsの静的生成（SSG）とVercelのエッジネットワーク配信の組み合わせは、以下のメカニズムで圧倒的なパフォーマンスを実現します。 - ビルド時にHTMLを事前生成：リクエストのたびに計算が発生しません - エッジネットワークから直接配信：ユーザーに最も近いエッジからコンテンツが届く - next/imageによる自動画像最適化：WebP変換・リサイズ・遅延読み込みが自動 - コード分割：必要なJavaScriptのみをロード 典型的なNext.js＋Vercelサイトのスコア：モバイルで80〜95台 ## **Core Web Vitals改善のための具体的施策** ### **LCP改善** #### **画像の最適化** - 画像をWebP形式に変換する（同等品質でJPGより30〜50%小さい） - 画像のサイズを表示サイズに合わせてリサイズします - LCPの対象となる画像（ファーストビューの最大要素）にはfetchpriority="high"を設定します - next/imageを使用することで上記が自動化されます #### **サーバーレスポンスの改善** - CDNを導入してユーザーに近い場所からコンテンツを配信します - サーバーのTTFB（Time to First Byte）を改善します - HTMLのキャッシュ設定を最適化します #### **レンダリングブロックの解消** - CSSをminify（最小化）し、クリティカルCSSをインライン化します - JavaScriptのloading="defer"またはtype="module"を設定します - Google Fontsなどの外部フォントの読み込みを最適化します ### **INP改善** #### **長いタスクの分割** - 一つのJavaScriptタスクが50ミリ秒以上かかっている場合は分割します - useTransition（React）などで重い処理を優先度を下げて実行します 不要なJavaScriptの削減 - 使用していないライブラリ・コードを削除します - コード分割を適切に実装し、必要なコードのみをロードします ### **CLS改善** #### **画像・動画の寸法を明示します** - \タグにwidth・height属性を必ず指定します - CSSのaspect-ratioプロパティを使用します - next/imageは自動的にCLSを防ぐアスペクト比設定を行います #### **動的なコンテンツのスペースを確保します** - 広告・バナーの読み込みによるレイアウトシフトを防ぐため、表示前にスペースを確保します - Webフォントの読み込み中のレイアウトシフトを防ぐfont-display: optionalを検討します ## **Core Web Vitalsの測定と監視** ### **Field Data（実際のユーザーデータ）とLab Data（計測ツールデータ）** Core Web VitalsにはField DataとLab Dataの2種類があります。 Field Data：実際のユーザーのブラウザから収集されたリアルワールドのパフォーマンスデータ。Googleのランキング評価に使用されるのはこちら。Search ConsoleのCore Web Vitalsレポートで確認できます。 Lab Data：PageSpeed InsightsやLighthouseなどのツールが特定の条件下で計測したデータ。即座に確認できますが、ユーザーの実際の体験と差異があることがあります。 重要な点：PageSpeed Insightsのスコアを改善しても、Search Console上のCore Web Vitalsが「要改善」のままの場合があります。Field Dataの改善にはある程度の時間がかかる。 ### **定期的なモニタリング体制** - Google Search ConsoleのCore Web Vitalsレポートを月次で確認します - Vercel Analyticsなどのリアルタイムモニタリングを活用します - 大きなサイト改修後にPageSpeed Insightsで主要ページを確認します ## **まとめ** Core Web VitalsはSEOの直接的なランキング要因であるとともに、直帰率・クロール効率への影響を通じてSEOに間接的にも影響します。根本的な改善のためには技術スタックの選定が重要で、Next.js＋Vercelの組み合わせはWordPressと比較して構造的なパフォーマンス優位性を持つ。 次の記事では、Next.jsとVercelを使ったSEO最大化の具体的な設定方法を解説します。 ## エージェント型Web・AIアプリ 開発のご相談 chot inc.ではエージェント型Webの設計・構築・ 運用を 一貫してサポートしています。 [お問い合わせ](https://chot-inc.com/contact) ## このテーマの他の記事 - ### [SEO対策とは？2026年版・検索エンジンの仕組みから基本まで](https://chot-inc.com/knowledge/what-is-seo) [SEO対策とは何か、2026年版として検索エンジンの仕組みから基本施策まで解説します。GoogleがWebサイトを評価する仕組み・SEOの三本柱・今すぐ始めるべき施策をまとめています。](https://chot-inc.com/knowledge/what-is-seo) - ### [Web集客の全体像｜SEO・SNS・広告・メールの使い分け方](https://chot-inc.com/knowledge/web-marketing-overview) [Web集客の全体像としてSEO・SNS・広告・メールの使い分け方を解説します。各チャネルの特性・コスト・向いているケースを整理し、自社に合った集客設計のフレームワークをまとめています。](https://chot-inc.com/knowledge/web-marketing-overview) - ### [GoogleのE-E-A-Tとは？サイトの信頼性を高める4つの要素](https://chot-inc.com/knowledge/eeat-explained) [GoogleのE-E-A-Tとは何か、サイトの信頼性を高める4つの要素を解説します。Experience・Expertise・Authoritativeness・Trustworthinessの具体的な改善方法をまとめています。](https://chot-inc.com/knowledge/eeat-explained) [SEO・Web集客の教科書一覧](https://chot-inc.com/knowledge/themes/seo)