
画像は表示速度を左右しますが、原因を特定せず画像だけを圧縮すると改善幅が小さく、別のボトルネックを見落とします。
なお、TimeValue株式会社では、広告運用・クリエイティブ制作・LP改善・データ分析・AI導入までを一括で引き受けるWebマーケティング支援「KAIZEN」を提供しています。
現在、オンラインの無料マーケティング診断を毎月10社限定で実施中です。いまの数字を見ながら、どこから直すのが早いかを一緒に整理します。
今月の無料診断は残り4社です
広告からLPまで、まとめて見ます。オンラインで30分から対応しています。
目次
目次
- 表示速度の改善で最初から画像圧縮だけを見るのはなぜ失敗するのか
- 原因を分けてから修正対象を決める
- パソコンだけで表示速度を確認すると何が問題になるのか
- スマートフォンの実機でもページを開く
- 計測ツールの点数だけを追うとなぜ判断を誤るのか
- 指標と事業成果を分けて考える
- 画像を小さくしすぎると表示速度改善でどんな失敗が起きるのか
- 画像形式と表示サイズを先に見直す
- 計測タグを追加し続けると表示速度にどんな影響が出るのか
- タグマネージャー内の設定も定期的に確認する
- ファーストビュー以外をすべて遅延読み込みにすると何が起きるのか
- ユーザーが次に見る範囲を想定して読み込む
- 表示速度を改善したのにCVRが上がらないのは失敗なのか
- 改善前後で数字を比較する
- 表示速度を一度改善しただけで運用を終えるとなぜ失敗するのか
- ページ変更のタイミングで速度も確認する
- よくある質問
- まとめ
画像は表示速度を左右しますが、原因を特定せず画像だけを圧縮すると改善幅が小さく、別のボトルネックを見落とします。
表示速度の改善で最初から画像圧縮だけを見るのはなぜ失敗するのか
画像は表示速度を左右しますが、原因を特定せず画像だけを圧縮すると改善幅が小さく、別のボトルネックを見落とします。
表示速度が遅いとき、最初に画像サイズを疑うのは間違いではありません。
ただし、画像だけを軽くすれば解決すると考えるのは表示速度改善でよくある失敗です。
ページが表示されるまでには、HTMLの取得、CSSやJavaScriptの読み込み、画像の取得、フォントの読み込み、ブラウザ上での描画など複数の処理が発生します。
どこで時間がかかっているかによって、取るべき対策は変わります。
たとえば画像が十分に圧縮されているにもかかわらず、外部JavaScriptが大量に読み込まれていれば、画像をさらに削っても体感速度はほとんど変わりません。
逆にファーストビューに数MBの画像が配置されている場合は、画像への対応が優先されます。
原因を分けてから修正対象を決める
表示速度を改善するときは、まず通信量、サーバー応答、画像、JavaScript、CSS、フォント、外部タグなどに原因を分けます。
そのうえで表示への影響が大きい要素から手を付けます。
PageSpeed Insightsなどを利用すると、Largest Contentful PaintやCumulative Layout Shiftなどの指標だけでなく、改善候補も確認できます。
数値をそのまま良し悪しの判定に使うのではなく、どの処理が表示を遅らせているかを見るために利用します。
広告運用の現場でも同じです。
CPAが悪化したときに広告文だけを変更するのではなく、CTR、CPC、CVRに分解して原因を見るように、表示速度も構成要素に分けて考える必要があります。
表示速度が遅いときの主な確認対象
| 確認対象 | 起こりやすい問題 | 確認する内容 |
|---|---|---|
| 画像 | ファイル容量が大きい | 容量、形式、表示サイズ |
| JavaScript | 読み込みや実行に時間がかかる | 不要なスクリプト、実行タイミング |
| CSS | 不要な記述が多い | 未使用CSS、読み込み順序 |
| サーバー | 最初の応答が遅い | TTFB、キャッシュ設定 |
| 外部タグ | 第三者サービスが増えている | 広告タグ、計測タグ、チャットツール |
| フォント | 複数のWebフォントを読み込む | フォント数、ウェイト数 |
改善施策を先に決めるのではなく、遅くなっている理由を確認してから施策を決めます。
この順序を守るだけでも、効果の小さい修正に時間を使う失敗を減らせます。
パソコンだけで表示速度を確認すると何が問題になるのか
パソコンでは速く見えても、スマートフォンや通信環境によって表示速度は変わるため、PCだけの確認では実際のユーザー体験を判断できません。
制作担当者やマーケティング担当者が社内でページを確認するとき、性能の高いパソコンと高速なWi-Fiを使っていることが少なくありません。
その環境で問題なく表示されるからといって、ユーザーにとっても速いとは限りません。
広告経由のアクセスではスマートフォン比率が高くなる案件も多くあります。
スマートフォンは端末性能や通信環境によって読み込み速度の差が出やすいため、パソコンだけの確認では実態を見誤ります。
特にLPでは、広告をクリックした直後の数秒間で離脱するユーザーもいます。
そのためデザインが完成しているかだけではなく、広告から遷移した直後に主要コンテンツが見えるかを確認する必要があります。
スマートフォンの実機でもページを開く
速度計測ツールの数値だけではなく、実際の端末でページを開く確認も有効です。
ファーストビューが表示されるまでの時間や、スクロール開始時にページが引っかからないかを確認します。
会社のWi-Fi環境だけで確認すると通信速度による問題を見逃す場合があります。
モバイル回線でも確認すると、ユーザーに近い状況を把握しやすくなります。
また、ページ内で遅延読み込みを使用している場合は、ファーストビューだけではなくスクロール後の挙動も確認します。
画像が表示されるまで大きな空白が残る場合や、読み込みによってコンテンツ位置が動く場合は、速度以外の使いにくさにつながります。
広告運用担当者はLP制作を制作会社に任せていても、実際の広告流入環境で表示確認をしておく方が安全です。
管理画面の数値だけでは発見できない問題が、実機確認で見つかることがあります。
計測ツールの点数だけを追うとなぜ判断を誤るのか
計測ツールのスコアは参考になりますが、点数そのものを目的にすると、売上やCVに影響しない修正へ工数を使う可能性があります。
表示速度の改善を始めると、計測ツールのスコアを高くすること自体が目的になってしまうことがあります。
これはマーケティング施策としては注意が必要です。
スコアはページの状態を把握するための一つの指標です。
100点に近づけることが、そのままCVRや売上の最大化を意味するわけではありません。
たとえば表示速度を少し改善するために、ユーザーに商品の魅力を伝えている動画や画像をすべて削除してしまえば、速度は改善しても訴求力が落ちる可能性があります。
広告用LPでは、軽さだけではなく情報量や説得力とのバランスを見る必要があります。
指標と事業成果を分けて考える
表示速度の指標は、改善の必要性を見つけるために使います。
マーケティングでは、その改善によって離脱率やCVRがどう変わったかまで確認します。
説明のための仮の値として、LPのCVRが3.0%で、表示速度の改善後に3.4%になったとします。
この場合は速度改善が事業成果につながった可能性を検討できます。
一方で、スコアが60から90へ改善してもCVRに変化がなければ、次に優先すべき改善対象は別にあるかもしれません。
広告運用では限られた工数で成果を最大化する必要があるため、スコアだけを追い続けることは避けます。
表示速度改善で見る指標の役割
| 指標 | 確認できること | マーケティング上の見方 |
|---|---|---|
| 計測ツールのスコア | 技術的な改善余地 | 修正候補を探す参考 |
| LCP | 主要コンテンツの表示速度 | ファーストビューの体感速度 |
| CLS | 表示中のレイアウト移動 | 操作しにくさの有無 |
| 離脱率 | ページから離れた割合 | 速度改善前後の変化 |
| CVR | 成果地点への到達率 | 事業成果への影響 |
技術指標の改善とマーケティング成果の改善は分けて管理します。
速度改善を実施した後にCVRや離脱率も確認することで、修正の価値を判断しやすくなります。
画像を小さくしすぎると表示速度改善でどんな失敗が起きるのか
画像容量を減らしすぎると画質が崩れ、商品の質感やサービスの信頼感が伝わりにくくなるため、速度だけを基準に圧縮するのは危険です。
画像はWebページのデータ容量を大きくしやすいため、表示速度改善では優先的に見直されます。
ただし、容量を減らすことだけを考えると別の問題が発生します。
特にEC、住宅、美容、採用などでは写真の品質がユーザーの判断に影響します。
画像を強く圧縮して輪郭や文字がぼやけると、ページ全体が安っぽく見える場合があります。
表示速度を改善する目的は、ユーザーが快適にページを見られる状態をつくることです。
画像を軽くした結果、内容を理解しにくくなっては本末転倒です。
画像形式と表示サイズを先に見直す
単純に画質を落とす前に、画像形式や実際の表示サイズを確認します。
必要以上に大きな画像をCSSで縮小表示しているページは珍しくありません。
たとえば横幅500ピクセルで表示する画像に、横幅3000ピクセルの画像をそのまま使用していれば余分なデータを読み込んでいます。
表示サイズに合わせた画像を用意するだけでも通信量を減らせます。
WebPなどの軽量な形式を利用する方法もあります。
画像の内容や利用環境によって適した形式は変わるため、画質と容量を比較しながら選びます。
ファーストビューにある画像と、ページ下部にある画像を同じ扱いにする必要もありません。
ページ下部の画像には遅延読み込みを使い、最初に必要なデータを減らす方法があります。
広告LPの場合は、メインビジュアル、商品画像、実績を示す画像など、CVに影響する要素の品質は残します。
装飾目的の画像や背景画像などから削減余地を探した方が、訴求力を保ちやすくなります。
計測タグを追加し続けると表示速度にどんな影響が出るのか
広告やアクセス解析のタグを増やし続けると外部通信やJavaScript実行が増え、ページ表示や操作開始までの時間が長くなる場合があります。
Webマーケティングを行っているページでは、検索広告、SNS広告、アクセス解析、ヒートマップ、チャット、接客ツールなど複数のタグを設置します。
それぞれ必要な目的があって導入されていますが、増え続けると表示速度へ影響することがあります。
特に長期間運用しているサイトでは、現在は使用していない広告媒体のタグや、終了した施策の計測コードが残っている場合があります。
誰も管理していないタグが積み重なると、ページの構造が複雑になります。
タグマネージャー内の設定も定期的に確認する
タグマネージャーを利用している場合でも、タグを入れれば自動的に軽くなるわけではありません。
発火するタグが増えれば、その分外部サービスとの通信や処理が発生します。
すべてのタグを削除する必要はありません。
売上計測や広告最適化に必要なタグを残し、使われていないものを整理します。
広告代理店、制作会社、社内マーケティング担当など複数の関係者がタグを追加できる体制では、管理ルールを決めておくと安全です。
追加目的、管理担当者、利用期間が分からないタグを増やさないようにします。
マーケティングタグを整理するときの確認項目
| タグの種類 | 確認内容 | 整理時の注意 |
|---|---|---|
| 広告計測タグ | 現在も広告配信しているか | 停止中でも再開予定を確認する |
| アクセス解析 | 実際に分析へ使用しているか | 主要計測を誤って削除しない |
| ヒートマップ | 現在もデータを見ているか | 対象ページを限定できないか確認する |
| チャットツール | 利用率や問い合わせへの寄与 | 常時読み込みが必要か確認する |
| 過去施策のタグ | 施策が終了しているか | 関係者確認後に削除する |
タグ整理は表示速度だけでなく、計測環境の管理にも役立ちます。
何を計測しているか把握できる状態を保つことで、広告成果の分析ミスも減らせます。
ファーストビュー以外をすべて遅延読み込みにすると何が起きるのか
遅延読み込みを過剰に使うと、スクロール後に画像やコンテンツが間に合わず、ユーザーが空白や表示の遅れを感じる場合があります。
遅延読み込みは、最初からすべての画像やコンテンツを読み込まず、必要になったタイミングで読み込む方法です。
初期表示の通信量を減らせるため、表示速度改善でよく利用されます。
一方で、遅延読み込みを設定すればするほど良いわけではありません。
ユーザーがスクロールした後に読み込みが始まり、表示が追いつかない場合があります。
特に通信環境が遅いユーザーでは、画像が表示される位置まで到達しているのに空白が残ることがあります。
その状態が長いと、ページが壊れているように見える場合もあります。
ユーザーが次に見る範囲を想定して読み込む
遅延読み込みは、ファーストビューとページ下部を単純に二分するだけではなく、ユーザーの閲覧速度を考えて設定します。
次に表示される可能性が高いコンテンツを少し早めに読み込む設計もあります。
LPでは、ユーザーが比較的速くスクロールするケースもあります。
広告から遷移したユーザーは、ページ全体を短時間で確認することがあるため、読み込みが追いつかない設計は避けます。
また、画像の表示領域を事前に確保しておかないと、読み込み後に文章やボタンの位置が動くことがあります。
これはユーザーがボタンを押そうとした瞬間に位置が変わる原因にもなります。
表示速度改善では、最初の数秒だけを速く見せることを目的にしません。
ページを閲覧している間を通してストレスなく操作できる状態を目指します。
表示速度を改善したのにCVRが上がらないのは失敗なのか
表示速度を改善しても必ずCVRが上がるわけではなく、速度が主要な離脱原因ではなかった場合は、訴求やフォームなど別の要因を確認する必要があります。
表示速度改善を実施すると、CVRも必ず改善すると期待してしまうことがあります。
しかし、速度改善とCVR改善は同じものではありません。
表示速度が明確に遅く、多くのユーザーがページ表示前に離脱していた場合は改善効果が出やすくなります。
一方で、もともと十分な速度が出ているページでは、さらに高速化してもCVRへの影響が小さいことがあります。
CVRは広告との訴求一致、商品の魅力、価格、信頼性、フォームの使いやすさなど多くの要素から影響を受けます。
表示速度はその一つです。
改善前後で数字を比較する
速度改善を行った場合は、変更前後でページ指標を確認します。
表示速度だけではなく、広告クリック後の離脱、スクロール率、フォーム到達率、CVRなどを見ると原因を考えやすくなります。
説明のための仮の値として、ページ表示時間が4秒から2秒へ短縮されても、フォーム到達率が30%のままだったとします。
この場合、速度以外にフォーム到達を妨げている要因がある可能性があります。
逆にファーストビュー離脱率が下がっているのであれば、速度改善によってページ閲覧開始までの障害が減ったと考えられます。
それでもCVRが変わらない場合は、ページ中盤以降の訴求やフォームを確認します。
広告運用では一つの施策だけですべてを改善しようとしないことが大切です。
表示速度を改善した後は、その結果を確認し、次のボトルネックへ移ります。
表示速度を一度改善しただけで運用を終えるとなぜ失敗するのか
Webサイトは画像追加やタグ設置、機能更新によって徐々に重くなるため、一度改善して終わりにすると数カ月後に再び速度が低下する可能性があります。
表示速度は一度改善すれば永久に維持されるものではありません。
WebサイトやLPは運用中にさまざまな変更が加わります。
新しい広告媒体を始めればタグが増えます。
キャンペーンを実施すればバナーが追加されます。
制作会社が新しい機能を実装すればJavaScriptが増えることもあります。
一つ一つの変更は小さくても、積み重なることでページが徐々に重くなります。
そのため表示速度は制作時だけではなく、運用中も確認する必要があります。
ページ変更のタイミングで速度も確認する
毎日表示速度を確認する必要はありません。
大きな更新を行ったときや、新しいツールを導入したときに確認するだけでも問題を発見しやすくなります。
広告用LPであれば、新しい動画や画像を追加したタイミングは特に注意します。
PCで見ると問題なくても、スマートフォンではデータ量が増えて表示が遅くなっていることがあります。
広告運用側と制作側で役割を分ける方法もあります。
広告担当は離脱率やCVRの変化を確認し、制作担当は計測ツールなどで技術的な変化を確認します。
表示速度が突然悪化した場合は、直近の更新内容を確認します。
原因が変更箇所にあるなら、サイト全体を調査するより短時間で修正できることがあります。
マーケティング施策では、LPやWebサイトは完成後も変化します。
表示速度を制作時の品質チェックだけで終わらせず、運用指標として定期的に確認することで、知らないうちにページが重くなる失敗を防げます。
よくある質問
表示速度で最もよくある失敗は何ですか
原因を確認せず、画像圧縮など一つの施策だけで改善しようとすることです。表示速度は画像、JavaScript、サーバー、外部タグなど複数の要素から影響を受けるため、原因を分けて確認する必要があります。
計測ツールのスコアは何点を目指せばいいですか
点数だけを目標にする必要はありません。スコアは改善余地を把握する参考として使い、実際の表示体験や離脱率、CVRと合わせて判断します。
画像を圧縮すれば表示速度は必ず改善しますか
画像容量が原因であれば改善が期待できます。ただしJavaScriptやサーバー応答など別の要因が大きい場合は、画像圧縮だけでは十分な改善にならないことがあります。
表示速度を改善すればCVRも上がりますか
必ず上がるわけではありません。表示速度が離脱の原因だった場合は改善する可能性がありますが、訴求、価格、フォームなど別の要因がCVRを下げているケースもあります。
表示速度はどのタイミングで確認すればいいですか
サイト公開時だけでなく、画像や動画の追加、広告タグの追加、機能変更などを行ったタイミングでも確認します。継続的に確認することで、更新による速度低下を早く発見できます。
まとめ
- 画像は表示速度を左右しますが、原因を特定せず画像だけを圧縮すると改善幅が小さく、別のボトルネックを見落とします
- パソコンでは速く見えても、スマートフォンや通信環境によって表示速度は変わるため、PCだけの確認では実際のユーザー体験を判断できません
- 計測ツールのスコアは参考になりますが、点数そのものを目的にすると、売上やCVに影響しない修正へ工数を使う可能性があります
- 画像容量を減らしすぎると画質が崩れ、商品の質感やサービスの信頼感が伝わりにくくなるため、速度だけを基準に圧縮するのは危険です
- 広告やアクセス解析のタグを増やし続けると外部通信やJavaScript実行が増え、ページ表示や操作開始までの時間が長くなる場合があります
- 遅延読み込みを過剰に使うと、スクロール後に画像やコンテンツが間に合わず、ユーザーが空白や表示の遅れを感じる場合があります
- 表示速度を改善しても必ずCVRが上がるわけではなく、速度が主要な離脱原因ではなかった場合は、訴求やフォームなど別の要因を確認する必要があります
- Webサイトは画像追加やタグ設置、機能更新によって徐々に重くなるため、一度改善して終わりにすると数カ月後に再び速度が低下する可能性があります