LPの表示速度は、見た目の印象だけでなく、離脱率・広告効率・コンバージョン率に直結する重要な要素です。せっかく広告費をかけて集客しても、ページの表示が遅いだけで、ユーザーは内容を読む前に離脱してしまうことがあります。
特に情報量が多くなりやすいLPでは、「読み始める前にストレスを与えないこと」が前提条件になります。訴求内容が良くても、ページが重ければ成果は落ちます。逆に、情報設計が整理され、表示も速いLPは、信頼感を損なわずに問い合わせや資料請求へつなげやすくなります。
本記事では、実際に制作したLPを対象に、モバイルのPageSpeed Insightsスコアを31から100まで改善したプロセスを、施策ごとに整理して解説します。
- LP表示速度改善で何から着手すべきか知りたい
- LPが重く、広告成果や離脱率への影響が気になっている
- 表示速度改善をどこまでやれば成果につながるのか知りたい
このような方に向けて、できるだけ実務に沿って分かりやすくまとめています。
LP表示速度改善の結論｜モバイルスコア31→100まで改善できた理由
まず結論から言うと、今回のLP表示速度改善がうまくいった理由は、一つの施策だけで解決しようとせず、ボトルネックを特定しながら順番に改善を重ねたことです。
この記事は、LP表示速度改善のノウハウを網羅的に一覧化することよりも、実際にどの順番で改善が進み、どの施策でスコアが伸びたのかを追えるように構成しています。つまり、「こうすれば必ず同じ結果になる」という一般論ではなく、実案件で31→100まで改善していった流れそのものを事例として解説する記事です。
今回のLPでは、フォント、アイコン、CSS・JavaScript、外部ライブラリ、フォーム関連処理、タグの読み込み順序、初期描画、キャッシュ設定まで、一つずつ見直しました。LP表示速度改善というと「画像を軽くすればよい」「コードを圧縮すればよい」と単発で語られがちですが、実際には複数の小さな改善を積み上げることで大きな差になるケースが多くあります。
弊社FIELD-Xでも、BtoB向けLPの制作・改善支援の中で、訴求設計やCTA設計だけでなく、表示速度も成果に直結する品質要素として扱っています。本記事も、そうした実務の中で得た知見をもとに、改善の順番とスコア推移が分かる形で整理しています。
0. 現状分析と課題の特定
改善前の調査では、日本語サイト特有の「フォントデータの重さ」や、外部ツールの読み込み順序がボトルネックとなり、特にモバイル環境でのパフォーマンスについて十分なスコアが出ていない状態でした。
1. 日本語フォントデータの軽量化
日本語フォントは文字数が多いため、データ容量が大きくなりやすい特性があります。このフォントデータを最適化することで、読み込みにかかる時間を短縮しました。
今回の改善では、以下の3つの施策を行いました。
Google Fonts依存を減らすためのフォント自社管理
Google Fontsなどの外部配信に依存せず、必要なフォントファイルを自社サーバーで管理・配信する構成に変更しました。これにより、データ構成や圧縮方法を細かく調整しやすくなり、LP表示速度改善に必要な最適化が可能になります。
フォントウェイトを絞り込んでデータ量を削減
従来は7種類のウェイトファイルを読み込んでいましたが、実際のデザインで必要な太さを見直し、3種類まで絞り込みました。見た目の品質を大きく損なわずに、読み込みデータ量を減らしています。
サブセット化で必要な文字だけを読み込む
フォント全体ではなく、常用漢字のみに絞り込み、専用ファイルを作成しました。これにより、不要な文字データを削減し、ファイル容量を大幅に軽量化できます。
一方、自社サーバーから配信する構成に変更すると、データの圧縮やファイル統合といった細かな最適化に加え、キャッシュ制御まで含めて細かく設計できるため、LPの高速化につながりやすくなります。
※使用フォントは、ライセンス条件を確認したうえで、オープンライセンスの範囲内で最適化しています。
フォント最適化だけでも、モバイルスコアは31から52まで改善しました。日本語LPにおいて、フォントが大きなボトルネックになりやすいことが分かる結果です。
表示速度だけでなく、ファーストビューの読み出しを早くできるため、ユーザーが本文に入りやすくなる点でも効果があります。
2. アイコン素材の最適化でLP高速化｜小さな要素でも積み上げが効く
次に行ったのは、アイコン素材の軽量化です。アイコンは一見すると小さな要素ですが、外部サーバー経由で読み込んでいたり、不要なデータを大量に含んでいたりすると、LP表示速度改善の妨げになります。
Font Awesomeなどを“とりあえず全部読み込んでいる”状態は、LPでよく起きがちな無駄の一つです。小さな差に見えても、こうした負荷を削る積み重ねが、最終的なスコア改善につながります。
今回のLPでは、以下の改善を行いました。
アイコンを自社サーバー配信に変更
外部CDN経由で読み込んでいたアイコンフォントを、自社サーバーから配信する構成に変更しました。これにより、不要な通信経路を減らし、表示の安定性と速度の両面を改善しています。
必要なアイコンだけに絞って軽量化
実際に使用しているアイコンだけを残し、不要なデータを削減しました。汎用ライブラリをそのまま読み込むと、使っていないアイコンまで含まれることが多く、無駄なデータ量が発生しやすいためです。
※使用アイコン素材も、ライセンス条件を確認したうえで、オープンライセンスの範囲内で最適化しています。
フォント最適化に続いてアイコンを見直すことで、さらにスコアを改善できました。小さな要素でも、積み重ねることでLP全体の高速化に確実につながります。
3. CSS・JavaScriptの最適化でLP表示速度改善｜Minifyとファイル統合を実施
LP表示速度改善では、CSSやJavaScriptの扱いも重要です。ファイル数が多い、コード量が不要に多い、読み込みが分散している、といった状態では、ブラウザの処理効率が下がりやすくなります。
今回の改善では、次の施策を実施しました。
CSS・JavaScriptを圧縮して軽量化
CSSとJavaScriptについて、不要な空白・改行・コメントなどを削除する圧縮処理を行いました。動作そのものは変えずにデータ量を減らせるため、LP高速化の基本施策として有効です。
ファイルを一本化して通信回数を削減
複数に分かれていたCSSやJavaScriptを必要に応じて統合し、通信回数を削減しました。ファイル数が多いと、それぞれの取得に時間や接続コストがかかるため、LPの初期表示を遅らせる要因になります。
この段階で、通信負荷とブラウザ処理の無駄を少しずつ削減できています。LP表示速度改善は、一つの大技で決まるというより、こうした調整を順番に積み上げることが重要です。
ユーザー目線では見えにくい部分ですが、ここを整理すると、ページが“もたつく感じ”を減らしやすくなります。
4. jQuery依存の見直しでLP高速化｜スライダー機能を軽量化
続いて、画像をスライド表示する機能の見直しを行いました。スライダーはLPでよく使われる表現ですが、実装方法によっては表示速度に大きな負担をかけます。
古いLPテンプレートを流用している場合は、jQueryや古いプラグインが残っていることも多く、見直しポイントになりやすい部分です。
今回のLPでは、従来の外部ライブラリ依存をやめ、より軽量な構成に置き換えました。
jQueryを廃止しVanilla JavaScriptへ変更
従来使用していたjQueryベースの仕組みを廃止し、ブラウザ標準のJavaScriptのみで動作する構成に変更しました。これにより、ライブラリ読み込みの負荷を減らし、処理をシンプルにできます。
スライダー機能も自社管理に変更
スライダー用スクリプトも自社サーバーから配信し、不要な依存関係を減らしました。LP表示速度改善では、機能を残しつつ、実装そのものを軽くする発想が重要です。
ここでモバイルスコアは60まで到達しました。外部ライブラリを見直すだけでも、LPの高速化に一定の効果が出ることが分かります。
5. フォーム最適化でLP表示速度改善｜入力チェック処理を軽量化
LPでは問い合わせフォームや資料請求フォームが重要ですが、入力チェック用のスクリプトが表示速度を下げることも少なくありません。そのため、フォーム周辺のプログラムも見直しました。
CVに直結するフォームだからこそ、機能を残しつつ軽くする設計が重要になります。入力補助や外部連携が多いほど、表示速度への影響も出やすくなります。
入力チェック用スクリプトを圧縮
入力チェック用のコードについても、不要な空白やコメントを削除し、ファイルサイズを軽量化しました。フォーム機能は維持しながら、読み込み負荷を抑えています。
この施策単体の改善幅は大きくありませんが、LP表示速度改善ではこうした細部の積み重ねが最終結果を左右します。
フォームまわりのストレスを減らすことは、CV直前の離脱を防ぎやすくする意味でも重要です。
6. 画像・タグ・描画順序の最適化でLP表示速度改善｜初期表示を高速化
LP表示速度改善では、「何を軽くするか」だけでなく、「どの順番で読み込ませるか」も非常に重要です。そこで、ブラウザの描画順序や通信の優先度を見直し、初期表示の高速化とアクセシビリティ向上を同時に進めました。
画像が多いLP、タグが多いLP、ファーストビューに要素を詰め込みすぎているLPでは、このパートの影響が大きく出やすい傾向があります。この改善は、単にスコアを上げるだけでなく、ユーザーが「まず読める」状態を早く作ることに直結します。
外部サービスへの接続待ち時間を短縮
外部サービスに対して事前接続を行う設定を追加し、通信開始までの待ち時間を短縮しました。これにより、外部リソースを利用する場合でも、初動の遅れを抑えやすくなります。
JavaScriptの読み込み順序を最適化
初期表示に直接関係しないJavaScriptは、後から読み込む構成に変更しました。これにより、ユーザーが最初に目にする範囲の表示を優先できます。
PC・スマホで画像サイズを最適化
PCとスマートフォンで適切な画像サイズを出し分けるようにし、不要に大きな画像を読み込まない構成にしました。画像最適化は、LP高速化において非常に影響の大きい要素です。
Googleタグ・Clarityの読み込みタイミングを調整
Googleアナリティクス用のGoogleタグやMicrosoft Clarityについて、ページ表示直後ではなく、読み込み完了後に実行するよう調整しました。計測は重要ですが、初期表示を犠牲にしてまで先に実行する必要はないケースも多いためです。
アクセシビリティも同時に改善
すべての画像にalt属性とサイズ指定を追加し、HTMLのlang属性も適切に設定しました。さらに、背景色と文字色のコントラスト比も見直し、誰にとっても使いやすいLPへ改善しています。
表示速度改善とアクセシビリティ改善は別物と思われがちですが、実際には両立しやすい場面も多く、ページ品質全体の向上につながります。
この段階で、デスクトップは満点に到達し、モバイルも大きく改善しました。また、アクセシビリティも100まで引き上げることができました。
7. reCAPTCHAの遅延読み込みでLP表示速度改善｜必要なときだけ実行する設計へ
さらにLP表示速度改善を進めるため、ユーザーが実際に必要としたタイミングでのみ機能を読み込む仕組みを導入しました。これは、初期表示を軽くするうえで非常に有効です。
reCAPTCHAや外部フォーム連携をそのまま先読みしているLPでは、見直し余地があるケースが多いです。とくに広告流入LPでは、最初の数秒で離脱されることも多いため、初期表示を軽くする意味は大きいです。
reCAPTCHAをオンデマンド読み込みへ変更
reCAPTCHAはスパム対策に有効ですが、処理が重く、初期表示の負担になりやすい機能でもあります。そこで、ページ表示時には読み込まず、ユーザーがフォームを開いたタイミングでのみ読み込む構成へ変更しました。
入力チェック処理も必要なタイミングで実行
入力チェック機能についても、初期読み込みから外し、フォーム表示時に必要な処理だけ実行する構成へ見直しました。
この施策によって、ユーザーにとって不要な初期処理を減らし、さらにスコアを改善できました。
8. GTMの読み込み見直しでLP高速化｜初期表示を優先
次に、ユーザーが最初にコンテンツを認識するまでの時間を短縮するため、初期表示に関わる要素の優先順位を見直しました。
Googleタグマネージャーの読み込みタイミングを再調整
Googleタグマネージャー（gtm.js）の読み込みをさらに見直し、初期表示を優先した後に読み込む構成へ変更しました。計測タグは運用上必要ですが、最初に読み込むべきものではないケースも多く、LP表示速度改善では後回しが有効なことがあります。
ここまでで、モバイルスコアは70台後半まで改善しました。初期表示を阻害する要素を丁寧に排除していくことが、LP高速化では重要です。
9. 初期描画の最適化でLP表示速度改善｜ヒーロー画像とCSSを見直し
ここからは、ブラウザがページをどのように構築し、どの順番で表示していくかという描画プロセス自体の最適化に踏み込みました。この工程は、LP表示速度改善の中でも特に効果が大きかった部分です。
ファーストビューに大きな背景画像を使っているLPや、スマホ用画像の最適化が甘いLPでは、このパートの改善効果が出やすい傾向があります。ユーザーから見れば「最初に内容が見えるまでが速いかどうか」の差として表れます。
初期描画に必要なスタイルをHTMLへ直接記述
ページ表示に必要な最小限のスタイルをHTML内へ直接記述し、外部CSSの読み込み待ちによる遅延を抑えました。これにより、ファーストビューの表示を早めることができます。
ヒーロー画像を背景指定からimg要素へ変更
背景画像として指定していたファーストビューのメイン画像を、img要素で扱う構成へ変更しました。あわせてCSSによるレイアウト調整を行い、画像の読み込みと描画の効率を改善しています。
小さい画面向けにより軽量な画像を出し分け
スマートフォンの画面幅に応じて、より軽量な画像を配信する設定を追加しました。モバイル環境で不要に大きな画像を読み込ませないことは、LP高速化において基本かつ重要です。
フォント適用タイミングを調整
テキストフォントの適用タイミングも見直し、ブラウザの初期処理負荷を分散させました。これにより、ユーザーが最初に画面を認識するまでの応答性を高めています。
この段階で、モバイルスコアはほぼ満点に到達しました。LP表示速度改善では、単にファイルを軽くするだけでなく、描画の組み立て方そのものを見直すことが大きな差になります。
10. キャッシュ設定と不要処理削減でLP表示速度改善｜モバイル100点で最終調整
最後に、キャッシュ設定や描画負荷の細かな調整を行い、スコアの最終仕上げを実施しました。
.htaccessでブラウザキャッシュを最適化
ブラウザキャッシュの有効期限を最適化し、不要な再読み込みを抑える設定を追加しました。これにより、再訪問時や複数ページ閲覧時の体感速度向上も期待できます。
不要なアニメーションを削除
body要素に設定されていた不要なアニメーションを見直し、描画負荷を軽減しました。見た目の演出が、かえって初期表示の遅さにつながるケースは少なくありません。
アイコン適用タイミングも再調整
アイコンフォントについても、初期表示時の負荷にならないよう、適用タイミングを見直しました。最後まで細部を調整することで、スコアを押し上げています。
最終的に、モバイル環境でもPageSpeed Insightsスコア100を達成しました。
LP表示速度改善の結果まとめ｜モバイル31→100、デスクトップ75→100
今回のLP表示速度改善では、以下のように大幅なスコア改善を実現しました。
本事例では、フォント・画像・プログラム・描画制御に至るまで、表示速度に影響するあらゆる要素に対して多角的な最適化を実施することで、大幅なスコア改善を行いました。これらは単一の施策で実現できるものではなく、設計・実装・検証を通じて細部まで調整を積み重ねることで、初めて到達できる領域です。
また、LP高速化は単なる技術的自己満足ではありません。ユーザーを待たせないことは、離脱防止、広告効率の改善、コンバージョン率の向上といった実務成果にも直結します。
とくにBtoB向けLPでは、単におしゃれなページを作るだけでは不十分です。ターゲットの理解、論理的な訴求、導入事例などによる信頼補強、複数のCTA設計、そしてストレスのない表示速度まで含めて、はじめて問い合わせや資料請求につながるLPになります。
LP表示速度改善チェックリスト｜まず確認したい7項目
LPの表示速度改善を進める際は、まず以下の項目をチェックしてみてください。
- フォント：日本語フォントを必要以上に多く読み込んでいないか
- 画像：ファーストビュー画像やスマホ用画像が重すぎないか
- CSS・JavaScript：ファイル数が増えすぎていないか、使っていないコードが残っていないか
- 外部タグ・ライブラリ：GTM、計測タグ、アイコン、外部ライブラリを最初から読み込みすぎていないか
- フォーム関連：入力チェックや外部連携処理が初期表示を邪魔していないか
- 初期描画：不要なアニメーションやスタイル読み込みがファーストビューを遅らせていないか
- キャッシュ設定：再訪時や再読み込み時に不要な通信が発生しない設定になっているか
このチェックリストで複数当てはまる場合は、LPの表示速度改善余地が大きい可能性があります。とくに広告運用中のLPでは、表示速度の改善が離脱率やCVRに影響することもあるため、早めに見直す価値があります。
BtoB向けLPの改善や新規制作を検討している方へ｜FIELD-XのLP制作サービス
弊社では、見た目のデザインだけではなく、ユーザーがストレスなく閲覧できる品質まで含めてLP制作を行っています。 表示速度の改善だけでなく、BtoBならではの訴求設計、導線設計、信頼性の見せ方まで含めて支援しています。
BtoB向けLPの考え方や制作の進め方については、以下の記事でも詳しく解説しています。
LPの構成や訴求の考え方から見直したい方は「BtoBのランディングページ（LP）の特徴とは？BtoC向けと何が異なる？」を、制作の流れや会社選定、費用感まで知りたい方は「BtoBのLP制作をするなら？制作フローや会社選定・費用相場を解説」をご覧ください。
また、BtoBで集客できるLPを新規制作したい方、既存LPの表示速度やCV導線を改善したい方は、FIELD-XのLP制作サービスページをご覧ください。 サービス内容、制作サンプル、導入事例、料金プランをまとめています。
CTA： BtoB向けLP制作サービスを見る
BtoB向けLP制作サービスを見る資料ダウンロードや個別相談をご希望の方は、上記サービスページからご確認ください。
LP表示速度改善に関する注意事項｜PageSpeed Insightsの数値について
- 計測にはGoogle提供の分析ツール「PageSpeed Insights」を使用しました。
- 本記事の数値は実施時点（2024年および2025年時点）の特定の条件下における計測結果です。
- アルゴリズムは恒常的にアップデートされるため、評価は変動する可能性があります。
- 実際の速度は閲覧者のネットワーク環境や端末などにより異なります。
