LP の表示速度を改善する方法：画像の圧縮と読み込みの見直し

2026 年 11 月 12 日

LP の表示が遅いと、内容を読まれる前に閉じられます。広告や SNS で集めた訪問者が、表示を待たずに離れてしまえば、集客にかけた手間が無駄になります。

この記事では、表示速度が成果に与える影響、測定する方法、画像の形式と圧縮、外部ファイルの見直し、改善後の確認項目を説明します。基準値は、Google が公開している指標をもとにしています。数値は更新されることがあるため、最新の情報は Google の公式ドキュメントで確認してください。

表示速度が成果に与える影響

読者への影響

スマホの通信は、場所や時間によって速度が変わります。表示に時間がかかると、読者は待たずに戻るボタンを押します。SNS のアプリ内ブラウザから開く場合は、通常のブラウザより読み込みに時間がかかる場合もあり、速度の影響が出やすくなります。

LP は、最初の画面で読者の関心を引く必要があります。そのため、最初の画面が素早く表示されることが、とりわけ重要です。離脱に関する数字の見方は、離脱の記事で説明しています。

検索への影響

Google は、ページの体験を測る指標として、Core Web Vitals を公開しています。主な指標は次の 3 つです。

指標	内容	良好の目安
LCP	最も大きな要素の表示にかかる時間	2.5 秒以内
INP	操作への反応の速さ	200 ミリ秒以内
CLS	表示中のレイアウトのずれ	0.1 以下

これらは、Google の web.dev で解説されています(https://web.dev/articles/vitals)。表示速度は検索順位を決める要素の一つとされていますが、内容の質が最優先で、速度だけで順位が決まるわけではありません。

速度を測定する方法

改善の前に、現状を数字で把握します。

PageSpeed Insights

Google の PageSpeed Insights(https://pagespeed.web.dev/)は、URL を入力するだけで、スマホと PC の両方の結果を表示します。実際の利用者のデータ(フィールドデータ)と、テスト環境での計測(ラボデータ)が分けて見られます。アクセスが少ない LP では、フィールドデータが表示されない場合もあります。その場合はラボデータで傾向を確認します。

Chrome の開発者ツール

Chrome の開発者ツールの Lighthouse や Network タブでも、読み込みの状況が確認できます。Network タブでは、どのファイルが何秒かかっているか、サイズが大きいファイルはどれかが分かります。

測定のコツ

変更する前に、現状の数値を記録しておく
スマホの結果を重視する
1 回の測定だけで判断せず、複数回測って傾向を見る
測定結果の点数だけを追わず、実際に体感が速くなったかも確認する

実機での確認も欠かせません。速い通信環境のパソコンでは問題なくても、スマホの回線では遅い場合があります。

画像の形式と圧縮

多くの LP では、表示の重さの大部分を画像が占めています。最も効果が出やすい改善箇所です。

形式の選択

形式	向いている用途
JPEG	写真
PNG	透過が必要な画像、文字が多い図
WebP	写真や図の両方。JPEG や PNG より軽くなりやすい
AVIF	さらに軽くなりやすいが、対応状況を確認する
SVG	ロゴやアイコンなど、図形で作れるもの

WebP は主要なブラウザで対応が進んでいます。対応していないブラウザ向けに、別の形式を用意する場合もあります。LP 作成サービスによっては、アップロードした画像を自動で変換するものもあります。

サイズと圧縮

表示する大きさに合わせて縮小する。画面に 400 px で表示する画像に、4000 px の画像を使わない
見た目が変わらない範囲で圧縮する。画像の圧縮ツールやサービスで容量を減らせる
一度に表示されない画像は、遅延読み込みにする
画像の幅と高さを指定して、読み込み中のレイアウトのずれを防ぐ

HTML では、画像に loading="lazy" を指定すると、画面の外にある画像の読み込みを遅らせられます。ただし、ファーストビューの画像に遅延読み込みを指定すると、最初の表示が遅くなるため、最初の画面の画像は通常どおり読み込みます。

動画

自動再生の動画は、容量が大きく、表示を遅くします。必要な場合も、短く圧縮し、最初の画面では静止画を表示して、操作したときに読み込む方法を検討してください。動画を埋め込む場合は、動画サービスの埋め込みを使うと、読み込みが重くなることがあります。

画像の選び方は、スマホ向け LPの記事や、デザインの観点でLP デザインの記事にもまとめています。

外部ファイルの見直し

画像以外にも、読み込みを遅くする要素があります。

読み込む外部ファイルを減らす

要素	見直しの方法
計測タグ・広告タグ	使っていないものを外す。重複して入れていないか確認する
Web フォント	使う種類と太さを絞る
外部のスクリプト	必要なページだけで読み込む
チャットや SNS の埋め込み	必要なければ外す。操作時に読み込む
アイコンのライブラリ	使うものだけを読み込む

読み込みを止めないための工夫

ページの表示をブロックするスクリプトは、最初の表示を遅らせます。HTML の script タグに defer や async を付けると、表示を止めずに読み込めます。ただし、実行順序に依存するスクリプトでは、動作を確認してください。

使っていないものを探す

過去に入れた計測タグや、使わなくなったウィジェットが残っていることがあります。Network タブで読み込まれているファイルを一覧にして、不要なものを探します。

サーバーとキャッシュ

LP を置いているサーバーの応答が遅い場合は、画像やコードを軽くしても限界があります。ブラウザのキャッシュや、CDN(世界各地のサーバーから配信する仕組み)を使うと、表示が速くなることがあります。LP 作成サービスや、サイト構築ツールを使う場合は、これらが標準で対応されているか確認してください。

改善後の確認

数字の再測定

改善後は、同じ方法で再度測定して、前後を比べます。

PageSpeed Insights で、スマホの結果を確認する
LCP、INP、CLS の変化を記録する
実機で、通信が遅い状態でも確認する(開発者ツールの通信速度の制限も使える)
表示が崩れていないか、機能が動くかを確認する

速度改善のデメリットに注意

画像を圧縮しすぎると、見た目が荒くなります。遅延読み込みを使うと、スクロール時に一瞬空白が見えることもあります。速度と見た目のバランスを取りながら、実際に見て判断してください。

成果の数字も確認する

表示速度の改善は、最終的に成果につなげるための手段です。改善の前後で、直帰率、クリック率、成約率がどう変わったかも確認します。改善の記録の取り方は、LP の改善の記事を参考にしてください。

定期的に見直す

LP は、公開後に画像やタグが追加され、少しずつ重くなります。月に一度、速度を測る習慣を作ると、遅くなる前に気づけます。

まとめ

表示速度は、読者の離脱と、検索での評価の両方に影響します。まず PageSpeed Insights などで現状を測り、スマホの結果を重視して確認します。改善の効果が最も出やすいのは画像で、サイズの縮小、形式の変更、圧縮、遅延読み込みを行ってください。外部の計測タグやフォント、スクリプトは、使っていないものを外し、読み込みを止めない書き方にします。改善後は同じ方法で再測定し、成果の数字の変化まで確認します。

LP を SNS から読み込む際は、リンク先の表示速度とあわせて、アプリ内ブラウザの扱いも確認が必要です。Boostlink は、短縮 URL から LP を配信し、クリック分析で流入の状況を確認できます。外部ブラウザで開く案内も設定できます。

LP の集客に使える SNS アカウントを探している場合は、アカウントの購入や M&A を扱う Boostshop もあります。購入の際は各プラットフォームの利用規約を確認してください。