.png?q=75&fm=webp)
LP(ランディングページ)の表示速度改善!高速化させる12個の方法
LP(ランディングページ)の表示速度は、コンバージョン率に直結する重要な要素です。
本記事では、LPの表示速度を劇的に改善するための具体的な施策を、技術的な最適化からコンテンツの軽量化まで体系的に解説します。
ユーザー体験を改善させ、ビジネス成果を最大化するための実践的なノウハウをお届けします。
LP(ランディングページ)表示速度の重要性
LP表示速度は、直帰率やコンバージョン率に直結する重要指標です。
特にLPは広告などの費用をかけて集客をしていることが多く、直帰率やコンバージョン率が悪くなると費用対効果などにも大きく影響を与えます。
これは、売り上げにも直結しビジネス面での指標としても重要性の高い要素となります。
直帰率・離脱率への影響
ランディングページの表示速度が遅いと、直帰率と離脱率が劇的に上昇します。
Googleの調査によれば、ページの読み込み時間が1秒から3秒に増加しただけで、直帰率は32%も増加します。
さらに読み込み時間が5秒になると、直帰率は90%まで跳ね上がるという深刻なデータが報告されています。
特にモバイル環境では、この傾向がより顕著で、ユーザーは即座にページを閉じて競合サイトへ移動してしまいます。
ランディングページは本来、訪問者を顧客に転換するための重要な接点です。
しかし、表示速度が遅いだけで、商品やサービスの内容を見る前にユーザーが離脱してしまうため、どれだけ優れたコンテンツやデザインを用意していても、その価値を伝える機会すら失ってしまいます。
表示速度の改善は、ユーザーとの最初の接点を守る最も基本的な施策と言えます。
コンバージョン率(CVR)への直接的影響
ランディングページの表示速度は、コンバージョン率に極めて大きな影響を与えます。
調査データによれば、ページの読み込み時間が1秒遅れるごとに、コンバージョン率は平均7%低下します。
逆に、表示速度を1秒改善するだけで、コンバージョン率は最大20%向上するという結果も報告されています。
ユーザーは待たされることにストレスを感じ、購買意欲が低下します。
表示が遅いページでは、フォーム入力前に離脱したり、商品詳細を十分に確認せずに離れてしまったりします。
表示速度の最適化は、広告費やマーケティング施策の効果を最大化し、投資対効果(ROI)を大幅に改善する最も確実な方法の一つです。
ユーザー体験への直接的な影響
ランディングページの表示速度は、ユーザー体験の質を決定する最も基本的な要素です。
ページが瞬時に表示されることで、ユーザーは快適さと信頼感を得られますが、読み込みが遅いと不安やストレスを感じ、サイト全体への信頼性が損なわれます。
表示速度が遅いページでは、ユーザーは「このサイトは古い」「管理されていない」「セキュリティに問題があるのでは」といったネガティブな印象を持ちやすくなります。
特に初回訪問時の第一印象は、その後の行動に大きく影響し、たとえ優れた商品やサービスを提供していても、表示速度の遅さだけでブランドイメージが低下してしまいます。
また、ページ内でのユーザー行動にも影響します。
読み込みが速いサイトでは、滞在時間が長くなり、複数のセクションを閲覧したり、詳細情報を確認したりする行動が活発になります。
逆に遅いサイトでは、必要最低限の情報しか見ずに離脱するため、商品の魅力を十分に伝えることができません。
快適なユーザー体験の提供は、長期的な顧客関係構築の基盤となります。
広告品質スコアへの悪影響
ランディングページの表示速度は、Google広告やYahoo!広告などの広告品質スコアに直接影響します。
広告品質スコアは、広告の関連性、推定クリック率、そしてランディングページの利便性という3つの要素で構成されており、表示速度はランディングページの利便性評価において重要な判断基準となっています。
品質スコアが低下すると、同じ入札額でも広告の掲載順位が下がり、クリック単価(CPC)が上昇します。
つまり、表示速度が遅いだけで、広告費が割高になり、広告効果が大幅に低下してしまうのです。
実際に、品質スコアが1ポイント下がるだけで、クリック単価が数十パーセント上昇するケースも報告されています。
さらに、広告プラットフォームは、ユーザーに快適な体験を提供することを重視しているため、表示速度の遅いランディングページは広告審査で不承認になったり、配信が制限されたりする可能性もあります。
表示速度の最適化は、広告運用の費用対効果を高め、限られた広告予算を最大限に活用するための必須施策と言えます。
LP(ランディングページ)の表示速度が遅くなる主な原因
改善策を考える前に、なぜLPの表示速度が遅くなるのか、その原因を理解しておくことが大切です。
画像・動画の最適化不足
LPの表示速度が遅い原因の多くは、実は画像にあります。特にLPのファーストビュー画像の表示が遅いと、離脱率に影響が出ます。
LPでは、訴求を強めるために高解像度のリッチな画像や動画を使いたいケースが多いと思いますが、最適化をしっかりやっておかないと表示速度が遅くなる原因となります。
主に遅くなる原因となる部分を挙げると下記になります。
- 高解像度の画像をそのまま使用している
- 次世代フォーマットに変換していない
- 動画をLP上に直接埋め込んで自動再生させている
- 画像サイズが表示サイズに対して無駄に大きい
- ファーストビュー以外の画像を同時に読み込んでいる
特に意識せずにLPを作成するとこういった部分が、遅くなる要因となります。
CSS・JavaScriptの読み込み問題
CSS・JavaScriptの読み込み問題は、LP表示速度を著しく低下させる重要な原因です。
特に、ページ上部に配置された大量のJavaScriptファイルは、HTMLの解析をブロックし、ユーザーに何も表示されない白い画面が長時間続く状態を引き起こします。
主に遅くなる原因となる部分を挙げると下記になります。
- レンダリングブロックが発生している
- 使用していないCSSやJavaScriptが残っている
- 外部スクリプトを必要以上に多く読み込んでいる
- ファーストビュー以外のCSSやJavaScriptが同時に読み込まれている
- JavaScriptの実行までの計算が重い
外部ライブラリやプラグインを多用すると、jQuery、アニメーションライブラリ、トラッキングスクリプトなど、複数のJavaScriptファイルが読み込まれ、それぞれのファイルサイズとリクエスト数が積み重なります。
また、CSSファイルが複数に分割されていたり、未使用のスタイル定義が大量に含まれていたりすると、レンダリングブロックが発生します。
さらに、JavaScriptの実行処理自体が重い場合、メインスレッドが長時間ブロックされ、ユーザーがボタンをクリックしても反応しない状態が続きます。
インラインスクリプトの多用や、非同期読み込み(async/defer属性)を適切に設定していないことも、初期表示の遅延につながります。
レンダリングブロックについては「レンダリングブロックとは」の記事で詳しく解説しています。
JavaScriptの最適化について詳しくは「JavaScriptの速度改善方法」もご覧ください。
サーバーの応答速度が遅い
サーバーの応答速度が遅いと、ユーザーがページにアクセスしてから最初のデータを受信するまでの時間(TTFB)が長くなり、LP全体の表示速度に深刻な影響を与えます。
サーバーのスペックが低い共用レンタルサーバーを使用している場合、同じサーバー上の他のサイトの影響を受けて処理速度が低下します。
遅い要因になるサーバー環境の例
- 低価格の共用サーバーで、他のユーザーの影響を受けている
- 海外サーバーで、日本国内からのアクセスに時間がかかっている
- アクセス集中時に処理が追いつかない
- PHPなどのバージョンが古い
また、データベースへの問い合わせ処理が最適化されていない場合、動的なコンテンツ生成に時間がかかり、サーバーの応答が数秒遅れることもあります。
サーバーのメモリ不足やCPU使用率の高騰も、応答速度低下の主要因です。
さらに、サーバーの物理的な設置場所も重要で、日本のユーザーに対して海外のサーバーからコンテンツを配信すると、物理的な距離による通信遅延が発生します。
サーバー側のキャッシュ機能が未設定であったり、PHPやデータベースのバージョンが古かったりすることも、処理速度の低下につながります。
サーバーの速度改善方法も是非参考にしてみてください。
外部ツール・タグの負荷
外部タグ・計測ツールの負荷は、LP表示速度を著しく低下させる見過ごされがちな原因です。
Google Analytics、Google Tag Manager、広告トラッキングタグ、ヒートマップツール、チャットボット、A/Bテストツールなど、複数のサードパーティスクリプトを導入すると、それぞれが独自のJavaScriptファイルを読み込み、外部サーバーへの通信が発生します。
主に下記のようなケースは表示速度の遅延の要因になります。
- それぞれのタグの読み込ませ方が最適化されていない
- 使用していない不要なタグが設置されている
これらのツールは、自社サーバーとは別の外部サーバーから読み込まれるため、その応答速度をコントロールできません。
外部サーバーの応答が遅い場合や、ネットワーク障害が発生すると、ページ全体の読み込みが停止してしまうリスクもあります。
特に、複数の計測ツールを同期的に読み込むと、各ツールの初期化処理が順次実行され、メインスレッドがブロックされます。
キャッシュやCDNの未活用
キャッシュやCDNを活用していない場合、LP表示速度の大幅な機会損失につながる重要な問題です。
キャッシュとは、一度読み込んだリソース(画像、CSS、JavaScriptなど)をブラウザやサーバー側に保存し、再訪問時に高速表示する仕組みです。
下記ができていない場合、表示速度にも影響が出ます。
- キャッシュの未設定
- CDN未導入による配信遅延
キャッシュ設定がされていないと、ユーザーが再度ページを訪れた際も、すべてのファイルを最初から読み込み直すため、リピーター訪問時も初回と同じ読み込み時間がかかってしまいます。
CDN(Content Delivery Network)は、世界中に配置されたサーバーネットワークから、ユーザーに最も近いサーバーでコンテンツを配信する仕組みです。
CDNを活用しないと、日本全国のユーザーが単一のサーバーからデータを取得することになり、物理的な距離による通信遅延や、アクセス集中時のサーバー負荷が発生します。
また、CDNの導入により、TTFB(初回バイト到達時間)を大幅に短縮し、特に地理的に離れたユーザーへの配信速度を劇的に向上させることができます。
LPの表示速度改善テクニック
LPの表示速度を改善する具体的な方法を見ていきましょう。
画像は次世代フォーマットを使う
画像を次世代フォーマットに変換することは、LP表示速度を劇的に改善する最も効果的な施策の一つです。
従来のJPEGやPNG形式と比較して、WebPやAVIF形式ではファイルサイズの削減が可能です。
WebPは、Googleが開発した画像フォーマットで、JPEGの高い圧縮率とPNGの透過性を両立しています。
現在、Chrome、Firefox、Safari、Edgeなど主要ブラウザのほぼすべてが対応しており、実用性が非常に高くなっています。
AVIFは最新の次世代フォーマットで、さらに高い圧縮効率を誇りますが、ブラウザ対応がまだ完全ではありません。
実装時は、picture要素とsource要素を使用することで、対応ブラウザには次世代フォーマットを、非対応ブラウザには従来のJPEG/PNGをフォールバックとして提供できます。
画像が多いLPでは、この変換だけでページサイズを数MB削減でき、LCPやページ読み込み時間の大幅な改善につながります。
次世代フォーマットについて詳しくは「次世代フォーマット画像とは」をご覧ください。
最適なサイズ・容量の画像を使う
最適なサイズ・容量の画像を使用することは、LP表示速度改善の基本中の基本です。
デジタルカメラやスマートフォンで撮影した画像は、高解像度で容量も大きく、Web表示では過剰なスペックです。
実際にLPで表示される画像サイズに合わせて幅をリサイズすることで、ファイルサイズを大幅に削減できます。
特に重要なのは、デバイスごとに適切なサイズの画像を配信することです。
レスポンシブ画像を導入する
スマートフォンやデスクトップでは必要な画像の大きさが変わってきます。
仮にスマホでもデスクトップと同じサイズの画像を使用した場合、無駄な容量の読み込みが必要となります。
それを回避するためにもレスポンシブ画像を導入することをお勧めします。
レスポンシブ画像であれば、各デバイスごとの大きさに合わせた画像サイズを表示させることができるので読み込みの容量も最適化できます。
レスポンシブ画像については「レスポンシブ画像とは」の記事をご覧ください。
Lazy Load(遅延読み込み)を活用する
Lazy Load(遅延読み込み)は、ファーストビュー外の画像や動画を、ユーザーがスクロールして表示領域に近づいたタイミングで読み込む技術です。
img要素にloading="lazy"属性を追加するだけで簡単に実装でき、初期ページ読み込み時のデータ量を大幅に削減できます。
特に画像が多いLPでは、初回表示速度が50%以上改善されることもあります。
LCPやFCPなどのCore Web Vitals指標が向上し、ユーザーは素早くコンテンツを閲覧できるため、直帰率の低減にも効果的です。
lazy load(遅延読み込み)については「lazy loadとは」で詳しく解説しています。
ブラウザキャッシュの設定
ブラウザキャッシュは、一度読み込んだ画像、CSS、JavaScriptなどをユーザーのブラウザに保存し、再訪問時に高速表示する仕組みです。
サーバー側でCache-Controlヘッダーを設定し、静的リソースに適切な有効期限(例:1年間)を指定することで実装できます。
リピーター訪問時の読み込み時間を削減でき、サーバー負荷も軽減されます。
特に広告経由で複数回訪れるユーザーが多いLPでは、キャッシュ設定によりコンバージョン率の大幅な改善が期待できます。
CDN(Content Delivery Network)を導入する
CDN(Content Delivery Network)は、世界中に分散配置されたサーバーネットワークから、ユーザーに最も近い場所でコンテンツを配信するサービスです。
下記は国内のCDNイメージ例
Cloudflare、AWS CloudFront、Fastlyなどが代表的で、物理的な距離による通信遅延を削減し、TTFB(初回バイト到達時間)を大幅に短縮できます。
特にアクセスが集中する時間帯でも安定した高速配信が可能で、サーバー負荷も分散されます。
導入により、地方や海外からのアクセスでも均一な高速体験を提供でき、全体的なユーザー満足度とコンバージョン率が向上します。
CDNについて詳しくは「CDNとは」の記事をご覧ください。
内部CSS化の実施
内部CSS化(インラインCSS・クリティカルCSS)は、ファーストビューの表示に必要な最小限のCSSをHTML内に直接記述する技術です。
外部CSSファイルの読み込み待ち時間を削減し、初回コンテンツ描画時間(FCP)を劇的に改善できます。
特にLCPに影響する重要な要素のスタイルを優先的に内部CSS化することで、ユーザーは即座にメインコンテンツを閲覧できます。
残りの非クリティカルなCSSは遅延読み込みすることで、初期表示速度とページ全体のバランスを最適化できます。
CSS・JavaScriptの非同期読み込み
CSS・JavaScriptの非同期読み込みは、スクリプトタグにasync属性やdefer属性を追加することで、HTMLの解析をブロックせずにリソースを読み込む技術です。
asyncは読み込み完了後すぐに実行し、deferはHTML解析完了後に順序通り実行します。
これによりレンダリングブロックを回避し、ファーストビューの表示が大幅に高速化されます。
特にGoogle AnalyticsやSNSウィジェットなどの外部スクリプトを非同期化することで、初期表示速度を数秒短縮でき、FCP・LCP・TTIなどのCore Web Vitals指標が劇的に改善します。
サーバー環境を見直す
サーバー環境の見直しは、TTFB(初回バイト到達時間)を改善する根本的な施策です。
共用レンタルサーバーから専用サーバーやVPSへ移行することで、他サイトの影響を受けず安定した高速応答が可能になります。
平均TTFB | TTFB | 特徴 |
|---|---|---|
専用サーバー | 50-150ms | 高性能、完全制御、高コスト |
クラウドサーバー | 60-180ms | 柔軟性、自動スケール |
VPS | 100-300ms | バランス型、カスタマイズ可 |
共有サーバー | 300-800ms | 低コスト、低性能、制限多い |
また、HTTP/2やHTTP/3の有効化により複数リソースの並列読み込みが実現し、Gzip・Brotli圧縮でデータ転送量を削減できます。
PHPやデータベースを最新バージョンに更新することで処理速度が向上し、サーバーサイドキャッシュの導入で動的ページの生成時間を大幅に短縮できます。
共用サーバーから専用サーバーやVPSへの移行、PHPバージョンの最新化、HTTP/2の対応など、インフラレベルでの最適化も重要です。
参考記事「HTTP/3とは?HTTP/2の違いや特徴を比較」
ファイルの圧縮
ファイルの圧縮は、HTML、CSS、JavaScriptなどのテキストファイルから不要な空白、改行、コメントを削除し、ファイルサイズを削減する技術です。
Minify(ミニファイ)と呼ばれるこの処理により、ファイルサイズを削減できます。
さらに、サーバー側でGzipやBrotli圧縮を有効化すると、転送時のデータ量を圧縮できます。
特にJavaScriptライブラリや大規模なCSSファイルでは圧縮効果が高く、数百KBの削減も可能です。
不要なコードの削除
不要なコードの削除は、実際には使用されていないCSS、JavaScript、HTMLを取り除くことで、ファイルサイズと処理時間を削減する施策です。
特定ページでしか使わない機能のライブラリや、古いコードの残骸、コメントアウトされたコードなども削除対象です。
jQuery全体を読み込んでいるが数行しか使っていない場合は、ネイティブJavaScriptへの書き換えも効果的です。
特に広告タグや計測タグなど、未使用なものがあれば削除しておくことをお勧めします。
コードの整理により、ページサイズが数百KB削減され、パース時間も短縮されます。
gzip圧縮の設定
gzip圧縮は、サーバーからブラウザへデータを転送する際に、HTML、CSS、JavaScriptなどのテキストファイルを自動的に圧縮する技術です。
サーバーの設定ファイル(.htaccessやnginx.conf)で有効化するだけで、転送データ量を削減できます。
ブラウザ側で自動的に解凍されるため、ユーザー体験に影響はありません。
さらに高効率なBrotli圧縮を使用すれば、gzipより多く圧縮できます。
特に大容量のJavaScriptファイルやCSSファイルで効果が高く、モバイル回線でのページ読み込み時間を劇的に短縮できます。
LPの表示速度の計測方法
基本的にLPの表示速度を計測する場合はPageSpeed Insightsを活用するといいでしょう。
計測結果はもちろん、具体的な改善ポイントも確認できます。
PageSpeed Insightsでの計測方法と確認方法
PageSpeed InsightsにアクセスしURLを入力し分析ボタンをクリックするだけで計測が行われます。
計測に1分前後ほど待つ場合がありますが、計測結果や改善点も詳しく表示されます。
スマホ・デスクトップの数値が見分けられる
計測されると下記の画像のような表示となり計測結果も表示されます。
ここでは、URL入力のすぐ下の部分(画像の赤で囲われている箇所)でスマホとデスクトップそれぞれの計測結果を別に見ることができます。
スマホとPCでは大きく差が生まれることが多く、スマホ・デスクトップ別にどこを修正したらいいか確認する際はこちらを見るようにしましょう。
実際のユーザーの環境での評価の見方
URL入力欄の少し下の部分に「実際にユーザー環境で計測する」という項目が出てきます。
実際にユーザー環境で計測された数値は下記画像の赤枠部分で確認することができます。
ポイントとして、ここで表示されているデータは「実際のユーザーの環境」での評価となります。
実際のユーザーの環境というのは、Chrome User Experience Report(CrUX)データに基づいており、以下の具体的な条件が加わり測定されています。
- wデバイスやブラウザ環境
- 回線速度や接続環境
- 地理条件
そのため「実際のユーザーの環境で計測されている数値」となり、ユーザー環境によっても変動することだけ理解しておくといいでしょう。
ここでは
- LCP:ページ内で最も大きなコンテンツが表示されるまでの時間
- INP:ユーザーの操作に対するページの応答速度
- CLS:ページ表示中のレイアウトの予期しない移動量
- FCP:ページ内で最初のコンテンツが表示されるまでの時間
- TTFB:サーバーが最初のデータを返すまでの時間
これらの数値の評価が確認できます。
それぞれの指標に関しての詳しい解説は「LCP」「INP」「CLS」「FCP」「TTFB」こちらのリンク先をご覧ください。
パフォーマンスの問題を診断するの見方
更に下の方へスクロールすると、下記の画像のように「パフォーマンスの問題を診断する」という項目があります。
ここでは、パフォーマンス、ユーザー補助、おすすめの方法、SEOという項目に分けて改善方法が公開されます。
それぞれ詳しく解説していきます。
「パフォーマンス」の項目の見方について
パフォーマンスの項目は下記の画像のような項目が表示されています。
ここでは
- FCP:ページ内で最初のコンテンツが表示されるまでの時間
- LCP:ページ内で最も大きなコンテンツが表示されるまでの時間
- TBT:ページが操作不能な時間の合計
- CLS:ページ表示中のレイアウトの予期しない移動量
- SI:ページの可視部分が表示される平均速度
これらの数値の評価が確認できます。
「パフォーマンス」の項目に関しては、「FCP」「LCP」「TBT」「CLS」「SI」という5項目の指標の数値が見れます。
また「パフォーマンスの問題を計測する」セクションは、Lighthouseエンジンによるラボデータ(シミュレーション環境)で測定されているという点は押さえておきましょう。
具体的には、下記のような環境下で計測されている数値となります。
- CPUを4倍スローダウン
- ネットワークを4G LTE速度に制限
- モバイルは375×667px画面
- デスクトップは1920×1080px画面
- キャッシュなしの初回訪問の状態
実際のユーザー環境とは異なる理想的な実験室環境で、具体的な技術的問題の特定と改善提案に特化した診断結果となります。
インサイト・診断項目の見方
更にスクロールしていくと、下記の画像のようなINSIGHTS、診断という項目が出てきます。
ここでは、計測結果に応じた具体的な改善内容が確認できます。
上記画像の①では、各指標別の改善項目を絞り込むことができます。
②に関しては、具体的に改善余地のある項目が並びます。
更に右側にある③をクリックすると、更に詳しい改善箇所なども表示されます。
具体的な改善箇所を確認する場合は、インサイト・診断項目を確認して改善を進めましょう。
LPの表示速度改善まとめ
ここまで、LP表示速度改善について包括的にお伝えしてきました。
表示速度改善は、一朝一夕で完成するものではありません。
しかし、継続的に取り組むことで、確実にユーザー体験の向上とビジネス成果の改善につながります。
LP表示速度改善は、デジタルマーケティング成功のための基盤となる重要な取り組みです。
今日からできることから始めてみましょう。
