12月の歳末セールはアクセスが大幅に増加する可能性があります。この時期に表示速度が落ちると、せっかく呼び込んだ見込み客がカート画面で離脱します。本記事ではECサイト特有のCore Web Vitals改善策を、LCP・INPに絞って数値基準とチェックリストで解説します。
結論: ECサイトの年末商戦対策は、LCPを2.5秒以内、INPを200ミリ秒以内に抑えることが前提です。商品画像の配信最適化とセールバナー・在庫表示スクリプトの軽量化を事前に済ませ、アクセス集中前にRUM監視体制を整えることでCVR低下を防げます。
目次
なぜ年末商戦でCore Web Vitalsが重要なのか
年末商戦でCore Web Vitalsが重要なのは、アクセス集中時こそ表示速度の劣化が顕著になり、売上に直結するからです。Core Web Vitalsとは、Googleが提唱するページ体験の指標群で、読み込み速度を示すLCP、応答性を示すINP、視覚的安定性を示すCLSの3つで構成されます。
Googleは2024年3月にFID(First Input Delay)を廃止し、応答性の指標をINP(Interaction to Next Paint)に置き換えました。ECサイトではカート追加ボタンやフィルター操作など、ユーザーがクリックする頻度が高いため、この変更の影響を強く受けます。
歳末セールではサーバー負荷増大とともに、タイムセールのカウントダウンや在庫数のリアルタイム表示といった動的要素が増え、JavaScript処理が重くなります。普段は合格ラインでも、繁忙期だけ基準を下回るサイトが少なくありません。事前に負荷試験を行い、ピーク時でも閾値を維持できるか確認することが実践的な対策です。
ECサイトのLCP改善はどこを見るべきか
ECサイトのLCP改善で最優先すべきは、ファーストビューに表示される商品メイン画像とヒーローバナーの配信方法です。LCP(Largest Contentful Paint)とは、ページ内で最も大きな要素が表示されるまでの時間を測る指標で、2.5秒以内が良好、4.0秒以上は不良と判定されます。
商品画像の配信を見直す
商品一覧ページでは数十枚の画像を一度に読み込ませがちですが、LCP対象となるファーストビュー画像にはloading="lazy"を付けてはいけません。遅延読み込みは画面外の画像にのみ適用し、LCP候補画像にはfetchpriority="high"を指定して優先的に取得させます。
画像形式はWebPやAVIFへの変換で、JPEGと比較してファイルサイズを圧縮できる場合があります。加えてCDN経由の配信に切り替えることで、アクセス集中時でもオリジンサーバーへの負荷を分散できます。
サーバー応答時間とキャッシュ設定
LCPはTTFB(Time to First Byte)の影響も受けます。セール期間中は商品ページへのアクセスが集中するため、静的ページのCDNキャッシュ化と、在庫情報などの動的データのみをAPIで分離取得する設計が有効です。価格やセールバッジの差し込みをサーバーサイドで毎回生成していると、繁忙期に応答遅延が発生しやすくなります。
ヒーローバナーに動画や大型画像を使う場合は、プリロードタグ(<link rel="preload">)で先読みを指示し、フォント読み込みによるレンダリングブロックも事前にWebフォントのsubset化で軽減します。
INP改善でカート離脱を防ぐには
INP改善でカート離脱を防ぐには、カート追加ボタンや数量変更など操作頻度の高い要素の応答速度を優先的に見直すことが結論です。INP(Interaction to Next Paint)とは、ユーザーの操作から画面が次の状態に更新されるまでの時間を測る指標で、200ミリ秒以内が良好、500ミリ秒以上は不良とされます。
長いタスクを分割する
歳末セールではカウントダウンタイマー、在庫残数のリアルタイム更新、レコメンドウィジェットなど複数のJavaScriptが同時に動作します。これらが1本の長いタスクとしてメインスレッドを占有すると、ユーザーがカートボタンを押しても反応が遅れます。処理を50ミリ秒以下の単位に分割し、requestIdleCallbackやWeb Workerへの移譲でメインスレッドの空き時間を確保します。
サードパーティスクリプトの遅延読み込み
チャットツール、広告トラッキング、レビュー表示ウィジェットなどのサードパーティタグは、ページ読み込み直後に一斉実行されるとINPを悪化させる代表的な原因です。ユーザー操作が発生してから読み込む遅延実行に切り替えるだけで、応答性が大きく改善するケースがあります。
カウントダウンタイマーは1秒ごとの再描画がDOM全体に影響しないよう、更新範囲を数字部分のみに限定する実装が有効です。React・Vueなどのフレームワークを使う場合は、不要な再レンダリングをmemo化で抑制し、仮想DOMの差分計算コストを減らします。
アクセス集中時の監視体制は
アクセス集中時に重要なのは、ラボ環境の計測だけでなく実際のユーザー環境のデータ(フィールドデータ)をリアルタイムで把握する体制です。年末商戦の数日間は通常の月次レポートでは手遅れになるため、日次〜時間単位での確認が必要です。
Search ConsoleのCore Web Vitalsレポートは実際のユーザー環境データを集計したもので、CrUX(Chrome User Experience Report)を基にしています。ただしデータ反映には遅延があるため、セール期間中の異常検知には注意が必要です。RUM(リアルユーザーモニタリング)を自社で導入し、INPやLCPの数値をリアルタイムでダッシュボード化しておくことで、劣化の兆候を即座に察知できます。
具体的には、ページ閲覧ごとにJavaScriptのPerformance APIで指標を取得し、サーバーに送信・集計する仕組みを構築します。閾値を超えたアクセスが一定割合を超えたらアラートを出す設計にしておくと、セール中の障害対応が格段に早まります。
計測ツールはどう使い分けるか
計測ツールは、事前検証用のラボツールと、本番運用中の実測を把握するフィールドツールを併用することが結論です。それぞれ得意な場面が異なるため、目的に応じて使い分けます。
| ラボ計測ツール | フィールド計測ツール | 自社RUM監視 | |
|---|---|---|---|
| 代表例 | Lighthouse・PageSpeed Insights | Search Console・CrUXダッシュボード | 独自実装のPerformance API集計 |
| データの性質 | 固定環境のシミュレーション | 実ユーザー環境の28日集計 | 実ユーザー環境のリアルタイム |
| 向いている用途 | リリース前の事前検証 | 中長期のトレンド把握 | セール当日の異常検知 |
| 反映速度 | 即時 | 最大28日遅延 | 数分〜即時 |
歳末セール前の施策検証にはラボツールで繰り返し改善し、本番公開後はフィールドデータとRUMを両輪で確認する運用が実践的です。CrUXダッシュボードはBigQueryと連携させることで、自社サイトの過去推移を独自に可視化できます。
年末商戦前のチェックリスト
年末商戦前に行うべき対策は、画像配信・スクリプト軽量化・負荷試験・監視体制の4領域に整理すると漏れを防げます。セール開始の2〜3週間前から着手することで、本番前に十分な検証時間を確保できます。
- 商品画像のWebP・AVIF変換
ファーストビュー画像にfetchpriorityを設定し、CDN配信に切り替える - サードパーティタグの遅延読み込み化
チャット・広告・レビューウィジェットをユーザー操作後に読み込む設計へ変更する - カウントダウン・在庫表示の再描画範囲を限定
DOM全体ではなく数値部分のみ更新する実装に修正する - ピーク想定のアクセス負荷試験
想定トラフィックの3〜5倍で表示速度とINPを事前検証する - RUM監視ダッシュボードの稼働確認
LCP・INPの閾値超過アラートがセール開始前に機能しているか確認する - CDNキャッシュルールの最終確認
在庫・価格など動的データのみAPI分離され、静的ページがキャッシュされているか確認する
よくある質問
ECサイトのCore Web Vitals目標値はどのくらいですか
LCPは2.5秒以内、INPは200ミリ秒以内、CLSは0.1以内が良好の基準です。この3指標すべてで良好を満たすページの割合が75パーセンタイル基準で評価されます。
セールのカウントダウンタイマーはINPに影響しますか
影響します。1秒ごとの再描画がDOM全体に及ぶ実装だと、ユーザー操作時のメインスレッドが占有され応答が遅れます。数値部分のみ更新する実装に変更することで改善できます。
LCP対象画像にlazy loadingを使ってはいけないのですか
ファーストビューに表示されるLCP候補画像には遅延読み込みを使わないほうが有利です。代わりにfetchpriorityとpreloadで優先的に読み込ませることが推奨されます。
Core Web VitalsはSEO順位にどの程度影響しますか
ページ体験の一要素としてランキングに影響しますが、コンテンツの関連性と比べると影響度は小さいとされています。ただし体験の悪化はCVR低下に直結するため、売上目的でも改善価値があります。
アクセス集中時にCore Web Vitalsを即座に確認する方法はありますか
Search Consoleのレポートは最大28日の遅延があるため、セール当日の確認には向きません。自社でPerformance APIを使ったRUM監視を構築し、リアルタイムで数値を集計する方法が有効です。
モバイルとPCでCore Web Vitalsの基準は違いますか
評価基準の数値自体は同一ですが、計測はモバイルとデスクトップで別々に行われます。ECサイトはモバイル経由の流入が多いため、モバイル環境での実測値を優先して改善する必要があります。
SEO記事運用の効率化もあわせて検討を
Core Web Vitalsの改善と並行して、検索意図を満たす記事の継続公開もECサイトの集客には欠かせません。コンテンツ運用の効率化に関心がある場合は、無料相談で現状の課題を整理できます。