LANDING PAGE
Web・LPLPの表示速度を改善するには？LCP・INP・CLSで原因を分ける実務ガイド
株式会社Sunday Park / 公開：2026.10.05
LPが重いと感じたら、画像を一括で圧縮する前に「何が、いつ遅れているか」を確かめます。最初の表示、ボタンへの反応、読み込み中の位置ずれでは原因が違うからです。PageSpeed Insightsの点数だけで判断せず、広告流入の端末で起きている問題を見つけ、申込みや計測を壊さない順序で改善しましょう。
CONTENTS / この記事で分かること
記事の全体像を図で確認する
- LCP：2.5秒以下主要な内容が表示されるまで
- INP：200ms以下操作に対する視覚的な応答
- CLS：0.1以下予期しない位置ずれ。時間ではなくスコア。実ユーザーの75パーセンタイルで見る良好な目安
「何秒で全部読めるか」だけではなく、3つの体験を測る
画像が多いLPでは、最初に見える範囲だけでなく、CTAを押したときの反応やフォーム入力中の安定性も重要です。GoogleのCore Web Vitalsは、この体験をLCP・INP・CLSで評価します。
| 指標 | 良好な目安 | LPで確認する現象 |
|---|---|---|
| LCP | 2.5秒以下 | 大きな見出しや主画像など、主要な内容が表示されるまで |
| INP | 200ミリ秒以下 | クリック・タップ・キー操作への視覚的な応答 |
| CLS | 0.1以下 | 読み込み途中にボタンや本文の位置が不意に動く |
これらは実ユーザーデータの75パーセンタイルで見る指標です。GoogleのWeb Vitalsの解説に基づく目安で、購入率や広告成果を保証する基準ではありません。CLSは秒数ではなくスコアです。また、LCPはページ内の全画像や全処理が完了した時刻ではありません。
「表示スコアを100点にする」と「購入しやすいLPにする」は同じ目標ではありません。必要な説明や入力機能を削って点数だけ上げると、広告の期待に応えられなくなることがあります。まず利用者が困っている体験と、その要素を特定します。
PageSpeed Insightsは、実測とラボを分けて読む
PageSpeed Insightsに対象LPのURLを入力すると、実ユーザーのデータと、シミュレーションによる診断を確認できます。GoogleのPSIの説明では、実ユーザーデータはCrUXに基づく過去28日間のデータ、ラボは制御された条件での診断とされています。
公開直後や訪問数の少ないLPでは、ページ単位の実測データが十分でない場合があります。オリジン単位のデータが表示されていないか、対象範囲を確認してください。サイト全体の値を、そのLPだけの測定値として扱わないことが大切です。
- URL、測定日時、モバイル／PC、公開版を記録する
- 実ユーザーデータがページ単位かオリジン単位かを見る
- ラボで遅い要素と、読み込み・処理の順番を調べる
- 同じ条件で複数回測り、たまたま良い1回だけを採用しない
- 広告の主な流入環境で、表示・スクロール・入力を実機確認する
変更直後にラボ値が改善しても、28日間の集計には変更前の状態が混ざります。逆に、ラボの点数が良好でも、実際の端末や操作で問題が残ることがあります。自社のテストは「モバイル判定だから完了」とせず、画像が読めるか、アプリ内ブラウザでフォームを送れるかまで確認しましょう。
WORK & INSIGHT
文章と画面のつながりを、実物で確かめる。
以下は購入LPではなく、Sunday Parkが制作した記事LPの事例です。見出し、画像と説明の組み合わせ、次のページへ送る導線を観察する参考として掲載します。
株式会社ユーグレナ様
CONC リンクルインジェクション
広告運用と、記事LP・モデル撮影・動画制作を支援。制作物をまとめて確認できる支援事例です。
- 担当範囲
- 広告運用・記事LP制作・広告動画用のモデル撮影・動画クリエイティブ制作
記事を別画面で読む ↗
株式会社MEJ様
C COFFEE EQUOL & ISOFLAVONES
「エクオールラテ」という訴求コンセプトを設計。広告運用、記事LP、撮影、動画制作まで支援しました。
- 担当範囲
- 訴求コンセプト設計・広告運用・記事LP制作・広告動画用のモデル撮影・動画クリエイティブ制作
記事を別画面で読む ↗
- 見出しだけを追い、説明の順番が伝わるか確かめる。
- 写真・動画の前後で、何を説明しているかを読み比べる。
- 購入LPの制作では、価格・条件・申込導線を別途設計する。
掲載している商品説明・価格・キャンペーンは制作時点の内容です。掲載制作物だけから、配信成果や個別案件の費用を判断することはできません。
画像・サーバー・処理・位置ずれを、症状から切り分ける
| 症状 | 最初の確認 | 修正候補 |
|---|---|---|
| 白い画面が長い | HTML応答、リダイレクト、描画を待たせる処理 | サーバー応答・キャッシュ・初期読込順を点検 |
| 主画像だけが遅い | LCP要素、画像の発見と取得開始の時刻 | 寸法・形式・取得優先度・遅延読込を見直す |
| 押しても反応が遅い | 長いJavaScript処理、第三者ツール、入力処理 | 不要な処理の削減や分割を検討 |
| 本文やCTAが動く | 画像・動画の表示枠、後挿入バナー、フォント | 表示領域を確保し、差し替え時の寸法差を減らす |
| 下まで読むと重い | 埋込動画、自動再生、複数ツールの初期化 | 必要になるまでの読み込み方を設計する |
「画像が重い」という観察だけでは不十分です。画像の取得は早く終わっているのに、別のスクリプトが終わるまで非表示になっているかもしれません。GoogleのLCP最適化の解説も、応答・リソース取得の遅れ・取得時間・描画までの遅れを分けています。ファイル容量と表示までの時間を同じものとして扱わないようにしましょう。
診断メモには「ファーストビュー画像Aの取得開始が遅い」「フォーム選択時に長い処理が走る」のように、対象要素と再現操作を残します。開発者は直す場所を絞れ、発注者は改善後に同じ手順で確認できます。
ファーストビューと、下部の画像・動画で読み込み方を変える
まず表示寸法に対して必要以上に大きい画像を配っていないかを見ます。形式変換や圧縮は、商品ラベル、文字、色、細部を確認しながら進めます。容量の削減率だけを合格条件にしないでください。画面幅に合う画像を配信し、画像・動画の幅と高さ、または縦横比を指定して表示枠を確保します。
LCPになる主画像を、下部画像と一緒に遅延読み込みしないことが重要です。初期HTMLから画像を見つけられるかを確認し、必要に応じて取得優先度を調整します。全画像を高優先度にするのではなく、何を最初に見せるかを決めます。実装方法は、画像が通常のimg要素か背景画像かによっても変わります。
ページ下部の動画は、最初から全てをダウンロードしなくても内容が分かるよう、ポスター画像と説明を用意します。自動再生が本当に必要か、再生しなくても商品情報が理解できるかを検討します。埋め込みプレイヤーを遅らせる場合は、再生ボタンが動作することと、必要な同意制御が保たれることも確認してください。
日本語フォントは、使う書体や太さが増えると取得対象も増えます。ブランド指定は保ちながら、不要なウェイトを外せるか、フォント表示を待つ間の扱いを改善できるかを調べます。ライセンス条件を確認せずにフォントを変換・再配布してはいけません。
広告タグやフォームを、一括で止めて高速化しない
広告、アクセス解析、ヒートマップ、チャットなどが積み重なると、読み込みと処理が複雑になります。タグを棚卸しするときは「名前、目的、管理者、発火条件、停止した場合の影響」を一行ずつ記録します。利用が終わったツールや二重実装がないかを確認し、必要なタグの一律削除は避けます。
ボタンやフォームの反応が重い場合は、操作時に走る処理を調べます。GoogleのINP最適化のガイドを手がかりに、長い処理や応答を妨げる箇所を開発担当者と切り分けます。特定のプラグインを入れれば必ず改善する、という判断はしません。
- 広告パラメータが、リダイレクト後も必要な範囲で維持される
- 同意前後で、意図したタグだけが動作する
- フォームの入力補助・エラー・正常受付が動作する
- 購入・問い合わせの計測が欠損や二重発火していない
- チャットや外部予約など、残す機能の起動条件が変わっていない
- 障害時に戻せる公開前の版と復旧手順がある
個人情報をURLやイベントに入れない配慮も必要です。フォームを改善する際はEFOの計測と送信テストも合わせて確認すると、速度と受付品質を別々に検品できます。
改善前後は、数字と同じ操作で検収する
次の表は測定結果ではなく、検収項目の記入例です。実案件では、測定URL・端末・条件・測定回数・実施日を添え、改善前後を同じ方法で比べます。
| 対象 | 作業 | 合格確認 |
|---|---|---|
| 主画像 | 適切な寸法へ変更し、取得順を見直す | 画質が保たれ、対象要素の表示までの遅れが減った |
| 下部動画 | 初期取得を抑え、ポスターを表示 | 未再生時の負担を減らし、タップ後は再生できる |
| 位置ずれ | 画像と挿入領域の寸法を確保 | 読み込み中・スクロール中にCTAが不意に移動しない |
| 広告計測 | タグ発火条件を整理 | 正常な成果を確認し、重複や欠損を調べた |
| 公開後 | 実ユーザー指標と成果を確認 | 流入・端末・期間の違いを分けて評価した |
CPAやCVRの変化を速度だけの効果と断言するには注意が必要です。同じ期間に広告訴求、予算、商品価格、フォームも変われば、影響が混ざります。まず速度の測定結果と機能の正常動作を確認し、そのうえで事業成果を観察します。比較を設計する考え方はLPのA/Bテストも参考になります。
外注では「診断だけか、改修と計測確認までか」をそろえる
速度改善の見積もりは、診断レポートだけか、コード改修・画像制作・公開作業・公開後の計測確認まで含むかで変わります。LPのURLだけでなく、実装方法、CMS、フォーム・決済の連携、主な広告流入、困っている端末や操作を共有してください。
依頼の例は「スマートフォンで主画像の表示が遅い。主画像とタグを診断し、必要な画質と広告計測を保った改修案が欲しい。公開前にフォームの受付とタグ発火をテストし、公開後も同じ条件で再測定したい」です。制作範囲の比較にはLP制作費用の内訳も役立ちます。
表示速度は、広告の約束・本文・フォームと一緒に改善する品質の一つです。現在のLPでどこから着手するか迷う場合は、課題と対象ページをご相談ください。必要な確認と対応範囲を個別に整理します。
参考情報・出典
- Google｜Web VitalsLCP・INP・CLSの定義と良好な閾値／確認：2026-10-05
- Google｜PageSpeed Insightsについて実ユーザーデータとラボの違い、集計期間と対象範囲／確認：2026-10-05
- Google｜LCPを最適化するLCPの内訳、画像の発見と読み込み優先度／確認：2026-10-05
- Google｜INPを最適化する操作への応答を診断するための一次資料／確認：2026-10-05