LPの表示速度を改善する方法｜3つの指標と点検チェックリスト
目次
LPの表示速度を改善するなら、「画像」「広告や計測のタグ」「最初の1画面の作り方」の3つから手をつけると、効果の大きい対策から順に進められます。広告から来た人にとって、LPが表示されるまでの数秒は何も起きていない時間で、その間に戻られてしまえば、広告費はクリックの時点で支払い済みです。クリックは取れているのに申し込みが伸びないとき、原因がデザインやコピーではなく表示の遅さにあることは珍しくありません。成果に響く理由、Googleの指標による測り方、原因別の改善策、自社でできることと制作会社に頼むことの切り分けを順に整理します。
01表示速度が広告の成果に響く理由
読み込みが遅いほど直帰されやすくなる
Googleが公開しているマーケティング向けの情報サイト「Think with Google」では、ページの読み込み時間が1秒から3秒に延びると、直帰の確率が32%上がると紹介されています。わずか2秒の差でも、読み手の行動は変わるということです。
広告の場合、離脱はそのまま費用のむだになる
自然検索やSNSの投稿から来た人が戻るのと違い、広告から来た人が表示を待たずに戻ると、そのクリックに支払った費用は回収できません。同じ広告費でも、LPが速ければ読まれる人が増え、遅ければ減ります。表示速度は、技術的な話であると同時に、広告費の効率の話でもあります。
SNS広告の読み手は、とくに待たない
SNS広告から来る人は、流し見の途中でたまたまタップした人です。もともと強い目的を持って探していたわけではないため、待たされると、あっさりアプリに戻ります。通勤中の電車など、通信が不安定な環境で開かれることも多い点も意識しておきましょう。
02表示速度を測る3つの指標（Core Web Vitals）
Googleは、ページの体験を測る指標として「Core Web Vitals（コアウェブバイタル）」を示しています。LPの速度を考えるときも、この3つが共通言語になります。
| 指標 | 何を測るか | 「良好」の目安 |
|---|---|---|
| LCP（Largest Contentful Paint） | 画面の中で最も大きな要素（メイン画像や見出しなど）が表示されるまでの時間 | 2.5秒以内 |
| INP（Interaction to Next Paint） | タップなどの操作に対して、画面が反応するまでの時間 | 200ミリ秒以下 |
| CLS（Cumulative Layout Shift） | 読み込み中に、レイアウトがどれだけずれるか | 0.1以下 |
web.devの解説では、これらの目標値は、モバイルとデスクトップを分けたうえで、訪問の75パーセンタイル（遅いほうから4分の1にあたる位置）で達成することがすすめられています。平均値ではなく、「多くの人にとって十分に速いか」で判断するということです。
LPで特に重要なのはLCPです。ファーストビューのメイン画像が表示されるまでの時間は、読み手が「このページは見る価値があるか」を判断するまでの時間とほぼ重なります。CLSも見落とせません。読み込み中にボタンの位置がずれると、押したつもりの場所と違うところをタップしてしまうことがあります。
03表示速度の測り方と原因の調べ方
PageSpeed Insightsで測る
GoogleのPageSpeed Insightsに、LPのURLを入れるだけで、表示速度の診断ができます。無料で使え、ツールのインストールも必要ありません。
結果の画面には、大きく分けて2種類の数字が出ます。
| 数字の種類 | 中身 | 使い方 |
|---|---|---|
| 実際のユーザーのデータ | 実際の訪問者の環境で計測された数字。訪問の少ないページでは表示されないこともある | 今の状態の評価として見る |
| ラボデータ（診断） | 決まった条件でページを読み込んだときの数字と、改善の提案 | 原因を探し、改善の前後を比べる |
公開したばかりのLPや、訪問の少ないLPでは、実際のユーザーのデータが表示されないことがあります。その場合は、ラボデータの診断結果と、改善の提案を中心に見ていきます。
測るときの注意点
- 必ずモバイルの結果を見る：PageSpeed Insightsではモバイルとデスクトップの結果が分かれています。SNS広告のLPなら、まずモバイルの結果を確認します
- 広告から来た状態のURLで測る：広告用のパラメータがついたURLや、広告用に出し分けているページがあるなら、そのURLで測ります
- 数回測って傾向を見る：ラボデータは測るたびに多少ぶれるため、1回の結果で一喜一憂しないようにします
- 実機でも体感を確かめる：通信の遅い場所で、実際のスマートフォンで開いてみると、数字だけではわからない待たされ感がわかります
04LPの表示が遅い原因別の改善策
遅さの原因はページによって違います。よくある原因と対策を、効果の出やすい順に並べました。
| 原因 | よくある症状 | 対策 |
|---|---|---|
| 画像が重い | ファーストビューの写真がなかなか出ない | 表示サイズに合わせて縮小・圧縮する。WebPなど軽い形式を使う |
| ファーストビューの作り方 | 動画やスライドショーの読み込みを待つ | 最初の1画面は静止画を基本にし、動きは後から読み込む |
| タグが多すぎる | 表示が始まるまでに時間がかかる | 使っていない広告タグや計測タグを外す |
| 画面より下の画像も一度に読む | ページ全体の読み込みが終わらない | 画面より下の画像は、近づいてから読み込む（遅延読み込み） |
| フォントが重い | 文字が遅れて表示される、途中で書体が切り替わる | 使う書体と太さを絞る |
| 大きさを指定していない要素 | 読み込み中にレイアウトがずれる | 画像や埋め込みに表示サイズを指定する |
| 外部の埋め込みが多い | 動画やSNSの埋め込みで重くなる | 本当に必要なものに絞る。サムネイルを置き、押したら読み込む |
| サーバーの応答が遅い | どの端末でも最初の表示が遅い | サーバーの見直し、配信の仕組み（CDN）の利用を検討する |
画像の縮小・圧縮から確かめる
LPは画像が多いページです。特に、デザイナーから受け取った画像をそのまま載せていると、スマートフォンの画面には大きすぎるサイズで読み込まれていることがよくあります。表示する大きさに合わせて縮小し、圧縮するだけで、ページの重さが大きく変わることがあります。
文字を画像に埋め込んでいるLPは、画像の枚数も大きさも増えがちです。見出しや本文はできるだけテキストで組むと、軽さと読みやすさの両方に効きます。
使っていない広告タグ・計測タグを棚卸しする
広告を長く運用していると、過去に使っていた媒体の計測タグや、試しに入れたツールのタグが、LPに残ったままになっていることがあります。タグはそれぞれが外部のプログラムを読み込むため、数が増えるほどページは重くなります。
次の表のように、LPに入っているタグを一覧にして、今も使っているかを確認しましょう。
| タグ | 用途 | 今も使っているか | 担当 |
|---|---|---|---|
| 例：Meta ピクセル | Meta広告の成果計測 | 使っている | 広告運用担当 |
| 例：過去に試したヒートマップツール | 行動分析 | 使っていない | — |
| 例：チャットツール | 問い合わせ対応 | 要確認 | 営業 |
使っていないタグを外すときは、広告の成果計測に関わるタグを誤って消さないよう、広告運用の担当者と一緒に確認してください。計測が止まると、広告の配信の最適化にも影響が出ます。
05自社でできること、制作会社に頼むこと
表示速度の改善には、専門知識が要るものと、そうでないものがあります。切り分けておくと、依頼もしやすくなります。
| 自社でできること | 制作会社・エンジニアに頼むこと |
|---|---|
| PageSpeed Insightsで測り、結果を共有する | 画像の形式の変更、遅延読み込みの設定 |
| 実機で表示の遅さを体感して記録する | 読み込みの順番の調整（重い処理を後回しにする） |
| 使っていないタグを洗い出す | フォントの読み込み方の見直し |
| 載せる画像を事前に縮小・圧縮する | サーバーや配信の仕組みの見直し |
| ファーストビューの動画やスライドショーをやめる判断 | レイアウトのずれの原因の特定と修正 |
依頼するときは、PageSpeed Insightsの結果のURLや画面のキャプチャを添え、「モバイルのLCPを改善したい」のように、どの指標をどこまで改善したいかを伝えると、話が早く進みます。
画像の圧縮や不要なタグの整理で目安に届くなら、社内の対応で足ります。手間がかかりやすいのはタグの扱いです。外してよいかの判断には広告運用の担当者の確認が、実際に外す作業にはLPの編集権限が要るため、運用と制作の窓口が別々だと確認の往復で止まりがちです。担当者が他業務と兼務しているなら、誰が一覧を持ち、誰が最終判断をするかを先に決めておきましょう。
06公開前の表示速度の点検表
LPを公開する前、または大きく修正した後に確認したい項目です。
- PageSpeed Insightsのモバイルの結果を確認したか
- ファーストビューのメイン画像は、表示サイズに合わせて圧縮されているか
- ファーストビューに、読み込みの重い動画やスライドショーを置いていないか
- 画面より下の画像は、遅延読み込みになっているか
- 文字を画像に埋め込みすぎていないか
- 使っていない広告タグ・計測タグが残っていないか
- 書体の種類と太さを絞っているか
- 画像や埋め込みに表示サイズが指定され、読み込み中にずれないか
- 外部の埋め込み（動画、SNS、地図など）は必要なものだけか
- 通信の遅い環境で、実際のスマートフォンから開いて確かめたか
07表示速度の改善効果を広告とLPの数字で確かめる
速度を改善したら、表示速度の数字だけでなく、広告とLPの成果がどう変わったかも確認します。
- LPに着いてすぐに戻る人の割合（直帰率や、ページの最初でのスクロールの減り方）
- ファーストビューの次のブロックまで読まれた割合
- 広告のクリック数に対する、LPの表示回数の割合
- 申し込み率
広告の管理画面で記録されるクリック数と、アクセス解析で記録されるLPの訪問数には、もともと差が出ます。その差が速度の改善後に縮まれば、表示を待たずに戻っていた人が減ったと考えられます。改善の前後で、広告の配信条件を大きく変えていない期間を選んで比べると、速度の効果を見分けやすくなります。
すぐに戻る人が減っても申し込み率が変わらないなら、原因は速度の外にあります。広告で約束した内容とファーストビューがそろっているか、フォームで止まっていないか、LINE登録に誘導しているならその後の配信で反応が落ちていないか、と順に切り分けます。広告・LP・LINEの数字は別々の画面にあることが多いので、同じ期間で1枚の表に並べると、どこで減っているかを追いやすくなります。
08よくある質問
Q. PageSpeed Insightsのスコアは何点を目指せばよいですか
スコアそのものより、LCP・INP・CLSの3つの指標が「良好」の目安に入っているかを優先して見るのがおすすめです。スコアは測るたびに多少ぶれるうえ、ページの役割によって必要な速さも違います。数字を追いかけすぎて、伝えるべき写真や情報まで削ってしまっては本末転倒です。
Q. ノーコードツールで作ったLPでも改善できますか
ツールによって設定できる範囲は違いますが、画像の圧縮、ファーストビューの作り方の見直し、不要な埋め込みやタグの整理は、多くのツールで取り組めます。サーバーまわりの設定はツール側に任せる形になるので、まずは画像とタグから見直しましょう。
Q. 動画を使いたい場合はどうすればよいですか
動画は伝える力が大きい一方、ページを重くしやすい素材です。ファーストビューでは静止画のサムネイルを表示し、タップしたら再生する形にする、ファーストビューより下に置くなど、最初の表示を妨げない工夫をすると、伝える力と速さを両立しやすくなります。
09まとめ
- 読み込みが1秒から3秒に延びると、直帰の確率は32%上がるとされる。広告のLPでは、その離脱がそのまま費用のむだになる
- 指標はLCP（2.5秒以内）・INP（200ミリ秒以下）・CLS（0.1以下）を目安に、モバイルの結果を優先して見る
- 改善は「画像」「タグ」「最初の1画面の作り方」から手をつける
- 自社でできる測定とタグの棚卸しを先に進め、技術的な対策は根拠を添えて依頼する
- 改善後は、表示速度だけでなく広告とLPの成果の変化まで確かめる
クリックは取れているのに成果が伸びないとき、表示速度は最初に確かめたい場所の一つです。Lic.では、広告の数字とLPの数字を続けて見ることを大切にしています。
広告のクリックはあるのに、申し込みが増えない？
広告運用を前提に、離脱防止の設計までふくめたLPや、配信用の広告クリエイティブを制作します。公開後も、配信データをもとに改善を続けます。
- 離脱防止まで考えたLP制作
- 配信用の広告クリエイティブ制作
- 配信データをもとにした継続的な改善
まだ具体的に決まっていない段階のご相談も歓迎です。
参考
- Think with Google「Page load time statistics」 https://thinkwithgoogle.com/data/page-load-time-statistics
- Google検索セントラル「Core Web Vitals と Google 検索の検索結果について」 https://developers.google.com/search/docs/appearance/core-web-vitals?hl=ja
- web.dev「ウェブに関する主な指標」 https://web.dev/articles/vitals?hl=ja
- PageSpeed Insights https://pagespeed.web.dev/
