LP(ランディングページ)の表示速度が成約率に直結する理由
せっかく広告費をかけてお客さんをLP(ランディングページ)に誘導しても、ページの表示が遅ければ成果にはつながりません。表示速度と成約率には明確な相関関係があり、ページの読み込みが1秒遅くなるだけで、コンバージョン率が約7%低下するという調査結果があります。
Googleの調査によれば、モバイルページの読み込みに3秒以上かかると、訪問者の53%が離脱するというデータも報告されています。つまり、半数以上の見込み客が、あなたのサービス内容を見ることすらなく帰ってしまうということです。
特に中小企業や個人事業主にとって、広告からLPに誘導するための集客コストは決して安くありません。1クリックあたり数百円〜数千円のコストをかけて集めたお客さんが、ページの遅さで離脱してしまうのは大きな損失です。
表示速度の改善は、デザインを変えずに成約率を上げられる、もっともコストパフォーマンスの高い施策のひとつです。この記事では、LPの表示速度を改善する具体的な方法を解説します。
まずは現状を把握しよう:LPの表示速度を測定する方法
改善の第一歩は、現状のパフォーマンスを正確に把握することです。以下の無料ツールを使って、LPの表示速度を測定してみましょう。
PageSpeed Insights
Googleが提供する無料のページ速度測定ツールです。URLを入力するだけで、モバイルとPC両方のパフォーマンススコアが表示されます。100点満点のスコアに加えて、具体的な改善項目も提示してくれるため、何を優先的に改善すべきかがわかります。
スコアの目安として、90点以上であれば「良好」、50〜89点は「改善が必要」、50点未満は「早急な対応が必要」と判断できます。特にモバイルのスコアは重視しましょう。現在のWeb閲覧の70%以上がスマートフォンからのアクセスです。
Lighthouse
Google Chromeのデベロッパーツールに内蔵されている監査機能です。表示速度だけでなく、アクセシビリティやSEOの観点からもサイトを評価してくれます。
GTmetrix
PageSpeed Insightsよりも詳細な分析結果が得られるツールです。ページの読み込みにかかる時間を滝グラフ(ウォーターフォール)で可視化してくれるため、どのファイルがボトルネックになっているかを特定しやすくなります。
LP表示速度を劇的に改善する6つの具体的テクニック
測定結果をもとに、以下の6つのテクニックを実践して表示速度を改善しましょう。
1. 画像の最適化(最も効果が大きい)
LPの表示速度が遅い原因の多くは、画像のファイルサイズが大きすぎることにあります。一眼レフやスマートフォンで撮影した写真をそのままアップロードすると、1枚あたり数MBのサイズになり、ページ全体の読み込み時間が大幅に伸びてしまいます。
改善策としては、まず画像形式をWebPに変換しましょう。WebPはJPEGやPNGと比較して、画質を保ちながらファイルサイズを25〜35%削減できます。また、LPに表示する実際のサイズに合わせてリサイズすることも重要です。横幅1920pxの画像を横幅600pxの領域に表示しているケースは意外と多く、これだけで大きな無駄が生じています。
Webサイトの画像最適化について、さらに詳しいテクニックはこちらの記事をご覧ください。
2. 遅延読み込み(Lazy Loading)の導入
ページ内のすべての画像を一度に読み込む必要はありません。画面に表示されるタイミングで画像を読み込む「遅延読み込み」を導入すれば、初期表示を大幅に高速化できます。
HTMLのimg要素にloading=“lazy”属性を追加するだけで実装できるため、技術的なハードルも低い改善策です。ただし、ファーストビュー(最初に表示される領域)の画像には遅延読み込みを適用しないよう注意しましょう。
3. 不要なスクリプトの削除
LPに使用していないJavaScriptファイルやCSSファイルが読み込まれていないか確認しましょう。WordPressを使っている場合、プラグインを多数インストールしていると、使っていない機能のスクリプトまで読み込まれてしまうことがあります。
アクセス解析タグ、チャットツール、SNSシェアボタン、ヒートマップツールなど、本当に必要なものだけに絞り込むことで表示速度が改善します。
4. サーバーの応答速度を改善する
サーバーの応答時間(TTFB:Time to First Byte)が遅い場合は、サーバー側の改善が必要です。共用サーバーを使用している場合、アクセスが集中する時間帯に速度が低下することがあります。
改善策としては、CDN(コンテンツデリバリネットワーク)の導入がもっとも手軽です。CloudflareなどのCDNサービスを利用すれば、世界中のサーバーにページのキャッシュを配置し、ユーザーに最も近いサーバーからコンテンツを配信できます。
5. CSSとJavaScriptの圧縮(ミニファイ)
CSSやJavaScriptファイル内の不要な空白・改行・コメントを削除する「ミニファイ」を行うことで、ファイルサイズを10〜20%程度削減できます。WordPressを使用している場合は「Autoptimize」などのプラグインで簡単に実装可能です。
6. ブラウザキャッシュの設定
一度訪問したユーザーが再度ページを開いたとき、画像やCSSファイルをサーバーから再ダウンロードせず、ブラウザに保存されたデータを使うようにする設定です。リピーターの表示速度を大幅に改善できるため、必ず設定しておきましょう。
表示速度を改善した後にやるべきこと
表示速度の改善は一度やって終わりではありません。改善後は以下のステップで効果を検証し、継続的に最適化を進めましょう。
まず、改善前と改善後のPageSpeed Insightsスコアを比較して、数値の改善を確認します。次に、Googleアナリティクスで直帰率や平均滞在時間の変化を追跡しましょう。表示速度が改善されれば、これらの指標も連動して改善するはずです。
さらに、コンバージョン率の変化もモニタリングします。コンバージョン率の業種別目安を参考に、自社のLPが適切な水準に達しているか確認してみてください。
定期的な速度測定を習慣化し、新しい画像やスクリプトを追加するたびにパフォーマンスへの影響をチェックすることが、長期的な成果につながります。
まとめ:表示速度の改善は、最もコスパの良いLP改善施策
LPの表示速度は、成約率に直結する重要な要素です。1秒の遅延がコンバージョン率を7%下げるという事実を踏まえると、表示速度の改善は最もコストパフォーマンスの高いLP改善施策と言えます。
まずはPageSpeed Insightsでスコアを測定し、画像の最適化から始めてみてください。画像の圧縮とWebP変換だけでも、大幅な改善が期待できます。
「LPの表示速度を改善したい」「コンバージョン率が上がるLPを作りたい」という方は、Sane Designにご相談ください。速度改善からデザイン・コピーの最適化まで、成果の出るLP制作をトータルでサポートいたします。