画像とCDNで変わる表示速度|今日からできるページ高速化の実践術

「ページがなかなか表示されない」
そんなサイトから、ユーザーは驚くほどあっさり離れていきます。

実際、Googleの調査(2016年)によると、モバイルサイトへのアクセスの約53%は、表示に3秒以上かかると離脱する可能性が高いとされています。
逆に、Googleとデロイトの調査(2020年)では、表示が0.1秒速くなるだけで、小売サイトのコンバージョン率が8.4%向上しました。

そこで今回取り上げるのは、画像の最適化と、CDN(コンテンツ・デリバリー・ネットワーク)の活用です。

CDNとは、サイトのデータを世界各地のサーバーにコピーしておき、訪問者にいちばん近いサーバーから届けて表示を速くする仕組みのことです。
これらは、Core Web Vitals(Googleの表示速度・操作性の指標)のような総論ではなく、今日から実践できる具体的な手法です。

まずは、なぜ画像がそれほど表示速度を左右するのかを見ていきましょう。

ページを重くしている最大の要因は「画像」

HTTP Archiveが公開した2025年版のWeb Almanacによると、トップページ容量の中央値はデスクトップで約2.86MB、モバイルで約2.56MBでした。
このうち画像は、デスクトップで約1,059KB、モバイルで約911KBを占めます。

バイト数で見ると、画像はJavaScriptやフォントを上回り、最大の構成要素です。
つまり画像を軽くすることは、ページ全体の表示速度を改善するうえで、最も費用対効果の高い施策の一つです。

1ページで読み込む画像は、中央値でモバイル15枚、デスクトップ17枚にのぼります。
枚数が多いぶん、1枚ずつ軽くしていけば、ページ全体の容量を大きく減らせます。

今日から取り組める画像最適化の手法

1. 次世代フォーマット(WebP/AVIF)への変換

従来のJPEGやPNGを、WebPやAVIFといった新しい画像フォーマットに置き換えるだけで、画質をほぼ保ったままファイルサイズを大きく減らせます

WebPはJPEGやPNGより高い圧縮率でファイルを小さくできます。
さらに画像配信サービスのImgixの調査によると、AVIFはWebPより小さくできるとされています。AVIFは2025年時点で主要なブラウザが対応済みで、実用の段階に入りました。

ただしAVIFは、画像を圧縮・変換する処理(エンコード)にかかるサーバー負荷が高いという弱点もあります。ページ上部の大きなメイン画像(ヒーロー画像)はAVIF、それ以外は扱いやすいWebPを優先する、といった使い分けもおすすめです。

2. 適切なサイズ・圧縮・遅延読み込み

フォーマット変換と並んで基本になるのが、表示サイズに合った画像を用意することです。

たとえば横幅800ピクセルの領域に、4000ピクセルの写真を読み込ませていては、いくら圧縮しても無駄が残ります。表示する大きさに合わせてリサイズし、そのうえで圧縮をかけましょう。

あわせて有効なのが、lazy loading(遅延読み込み)です。
画面にまだ映っていない画像を、スクロールで近づいたときに読み込む仕組みで、最初の表示に必要なデータ量を抑えられ、表示の体感速度も上がります。

3. CDNでユーザーの近くから配信する

画像そのものを軽くしたら、次は「届け方」です。

たとえばデータが東京のサーバーにしかないと、海外からのアクセスは遠回りになって時間がかかります。CDNで近くのサーバーから配信できれば、その待ち時間を短くできます。

物理的な距離が縮まることで、通信の遅れ(レイテンシ)が減り、表示が速くなります。
また、アクセスが各地に分散されるので、オリジンサーバーの負荷も軽くなります。

表示速度の改善は、直帰率(1ページだけ見て離脱する割合)の低下や滞在時間の増加につながり、間接的にSEO評価の向上にも寄与します。

主な高速化手法の早見表

手法主な効果難易度の目安
WebP/AVIF変換画像容量を大きく削減低〜中
リサイズ・圧縮過大な画像の無駄を排除
遅延読み込み初期表示データ量を削減
CDN配信レイテンシ削減・負荷分散

速度は劣化する

見落としがちなのが、表示速度は一度改善すれば永遠に保たれるものではない、という点です。

運用を続けるうちに、プラグインが増え、画像が積み重なり、外部スクリプトが追加され、速度は少しずつ落ちていきます。
だからこそ、最適化のあとも継続的にサイトの状態を監視し、異変に早く気づける体制を整えておくことが大切です。

Appmillで応答速度を継続的に見守る

私たちが提供するAppmillは、Webサイトを外部から定期的にチェックする監視サービスです。

フリープランでは、死活監視(応答があるかの確認)・応答速度・SSL有効期限・ドメイン有効期限などを含む6つの項目を、最大100URLまで無料で、5分間隔で監視できます
応答速度を記録し続けておけば、施策の効果を確認できるだけでなく、運用のなかで速度が徐々に悪化していないかも早めに把握できます。

導入にかかる時間は約3分です。まずは無料アカウントを作成し、サイトの応答速度を見える化してみてはいかがでしょうか。

プランや機能の最新情報は、公式サイト(https://appmill.work/)でご確認ください。

まとめ

やるべきことは多く見えても、一度に全部そろえる必要はありません。

まずは、ページの中でいちばん重い画像を1枚、WebPやAVIFに変換してみてください。
それだけでも、読み込みは目に見えて軽くなります。

大切なのは、速くした状態を保ち続けることです。速度は運用のなかで少しずつ落ちていくので、定期的に測り、落ちてきたら早めに手を打てるようにしておきましょう。