renue

ARTICLE

ページスピード改善とは?Core Web Vitals・LCP・CLS最適化の方法

公開日: 2026/4/3

ページスピード改善とは?Webサイト表示速度がビジネスに与える影響

ページスピード改善とは、Webサイトの表示速度を最適化し、ユーザー体験と検索エンジン評価を同時に向上させる施策です。Googleは2021年からCore Web Vitalsをランキング要因に組み込んでおり、2026年現在ではINP(Interaction to Next Paint)を含む3指標が検索順位に直接影響します。

表示速度が1秒遅れるだけでコンバージョン率が最大7%低下するというデータもあり、EC・BtoB問わずページスピードはビジネス成果に直結します。特にモバイルユーザーが全体の7割を超える現在、スマートフォンでの高速表示は必須の要件です。

Core Web Vitalsの3指標と基準値【2026年最新】

Core Web Vitalsは、Googleが定めるユーザー体験の核心的指標です。2026年現在の3指標と基準値は以下の通りです。

LCP(Largest Contentful Paint):読み込み速度

LCPは、ビューポート内で最も大きなコンテンツ要素(ヒーロー画像、見出しテキストなど)が描画されるまでの時間を測定します。良好:2.5秒以内、改善が必要:2.5〜4.0秒、不良:4.0秒超が基準です。

LCPに影響する主な要因は、サーバー応答時間(TTFB)、レンダリングブロックリソース(CSS・JavaScript)、画像やフォントの読み込み速度です。

CLS(Cumulative Layout Shift):視覚的安定性

CLSは、ページ読み込み中にレイアウトが予期せず移動する量を数値化したものです。良好:0.1以下、改善が必要:0.1〜0.25、不良:0.25超となります。

広告バナーや画像の遅延読み込みによるレイアウトずれが最も多い原因です。ボタンがずれてユーザーが意図しない箇所をクリックしてしまう「誤タップ」は、離脱率を大幅に上げる要因となります。

INP(Interaction to Next Paint):応答性

INPは2024年にFID(First Input Delay)に代わって導入された新指標で、ユーザーの操作から画面が次に更新されるまでの時間を測定します。良好:200ms以下、改善が必要:200〜500ms、不良:500ms超です。

ページ全体のインタラクティブ性を反映するため、FIDよりも実態に即した評価が可能になりました。

LCP改善の具体的な方法【実践ステップ】

LCPの改善は、体感速度への影響が大きく、優先的に取り組むべき項目です。以下のステップで進めましょう。

ステップ1:サーバー応答時間(TTFB)の短縮

CDN(Content Delivery Network)を導入し、ユーザーに最も近いサーバーからコンテンツを配信します。CloudflareやAWS CloudFrontが代表的なサービスです。サーバーサイドキャッシュの設定やデータベースクエリの最適化も効果的です。

ステップ2:画像の最適化

WebPやAVIF形式への変換で、JPEG比で30〜50%のファイルサイズ削減が可能です。imgタグのwidth・height属性を明示的に指定し、レスポンシブ画像にはsrcset属性を活用します。ファーストビューの画像にはfetchpriority=highを指定し、優先読み込みを設定しましょう。

ステップ3:レンダリングブロックリソースの排除

クリティカルCSSをインラインで記述し、非クリティカルなCSSはmedia属性やrel=preloadで遅延読み込みにします。JavaScriptにはdeferまたはasync属性を付与し、レンダリングをブロックしないようにします。

サイト表示速度の改善でCV率アップを実現しませんか?

Renueでは、Core Web Vitals改善を含むWebサイト高速化の戦略設計から実装までワンストップで支援しています。

無料で相談する

CLS改善の具体的な方法

画像・動画のサイズ指定を徹底する

すべてのimgタグとvideoタグにwidth・height属性を明記します。CSSのaspect-ratioプロパティを活用することで、レスポンシブデザインでもレイアウトシフトを防止できます。

広告・埋め込み要素の領域確保

広告枠や外部埋め込み(YouTube、SNSウィジェットなど)には、あらかじめ最小高さ(min-height)を設定し、コンテンツ読み込み後のレイアウト変動を防ぎます。

Webフォントの最適化

font-display: swapを指定し、フォント読み込み中はシステムフォントを表示してレイアウトシフトを回避します。rel=preloadでフォントファイルを事前読み込みするとさらに効果的です。

INP改善の具体的な方法

INPの改善には、JavaScriptの実行効率化が鍵となります。

長時間タスクの分割

50ms以上かかるJavaScriptタスク(Long Tasks)をrequestIdleCallbackやsetTimeoutで分割し、メインスレッドをブロックしないようにします。

不要なJavaScriptの削減

使用していないサードパーティスクリプトを特定・削除します。Chrome DevToolsのCoverageパネルで未使用コードの割合を確認できます。Tree Shakingやコード分割(Code Splitting)で必要な分だけを読み込む設計にしましょう。

イベントハンドラーの最適化

スクロールやリサイズイベントにはデバウンスやスロットリングを適用し、過剰な処理を防止します。

ページスピード測定ツールの活用法

改善施策の効果を正確に把握するには、適切なツールでの継続的な計測が不可欠です。

Google PageSpeed Insights

URLを入力するだけでCore Web Vitalsのスコアとフィールドデータ・ラボデータの両方を確認できます。改善提案も自動で提示されるため、初期診断に最適です。

Google Search Console

サイト全体のCore Web Vitals状況を俯瞰的に把握できます。ページエクスペリエンスレポートで、良好・改善が必要・不良のページ数を一覧で確認可能です。

Chrome DevToolsのLighthouse

開発者向けの詳細な分析が可能です。パフォーマンス、アクセシビリティ、SEOなど複数の観点からスコアリングされ、具体的な改善箇所を特定できます。

ページスピード改善の優先順位と進め方

すべてを一度に改善するのは現実的ではありません。以下の優先順位で進めることを推奨します。

  1. LCPの改善:体感速度への影響が最も大きく、効果が数値にも反映されやすい
  2. CLSの改善:ユーザーの不快体験を直接的に解消できる
  3. INPの改善:JavaScript最適化が中心で技術的な難度が高いが、SPA(シングルページアプリケーション)では特に重要

まずはPageSpeed InsightsとSearch Consoleで現状を把握し、最もスコアの低い指標から着手するのが効率的です。改善後は必ず再測定し、効果を検証するPDCAサイクルを回しましょう。

ページスピード改善のプロに無料相談

Core Web Vitals対策からサイト全体の高速化まで、データに基づいた改善提案をご提供します。

無料で相談する

よくある質問(FAQ)

Q. Core Web Vitalsの改善はSEO順位に直接影響しますか?

はい、Core Web VitalsはGoogleのランキング要因の一つです。ただし、コンテンツの関連性や被リンクと比較すると影響度は限定的です。同程度の品質のページ同士では、Core Web Vitalsが優れたページが優先される傾向があります。

Q. ページスピード改善にどのくらいの期間がかかりますか?

施策の規模によりますが、画像最適化やキャッシュ設定などの基本施策は1〜2週間で効果が出ます。JavaScript最適化やサーバー構成の見直しを含む場合は1〜3ヶ月程度が目安です。

Q. WordPressサイトでもCore Web Vitalsの改善は可能ですか?

可能です。画像最適化プラグイン(EWWW Image Optimizer等)、キャッシュプラグイン(WP Super Cache等)、不要なプラグインの削除が基本施策です。テーマの軽量化も効果が大きいため、テーマ選びも重要です。

Q. CDNの導入は必須ですか?

必須ではありませんが、グローバルにユーザーがいるサイトや画像・動画が多いサイトでは大幅な改善が期待できます。Cloudflareの無料プランから始めるのがおすすめです。

Q. モバイルとPCで別々に最適化する必要がありますか?

Googleはモバイルファーストインデックスを採用しているため、モバイルの最適化を優先すべきです。レスポンシブデザインを基本とし、モバイルで良好なスコアを出すことがPC側にも好影響を与えます。