画像にCDNを使う理由

東京からアクセスしてきた訪問者があなたのページを開いたとき、サーバーがパリにあるなら、各画像は何千キロもの海底ケーブルを経由してから画面に表示されます。結果は明白です:高い遅延、ゆっくり読み込まれる画像、上昇する直帰率。これがCDNの解決する問題です。

CDNとは何か

CDNはContent Delivery Network(コンテンツ配信ネットワーク)の略です。世界中に地理的に分散したサーバーのネットワークで、画像、動画、CSS、JavaScriptといった静的ファイルのコピーを保存し、リクエストした訪問者に最も近いサーバーから配信します。

Cloudflareは世界に300以上のPoP(Point of Presence)を運営しています。Fastlyは60以上、Amazon CloudFrontは400以上です。ブラジルのユーザーがページを読み込む際、アムステルダムのサーバーには接続しません。最寄りのCDNノードに接続し、ミリ秒単位で画像が届きます。

ある地域から初めて画像がリクエストされると、CDNはオリジンサーバーから取得してローカルにキャッシュします。以降その地域からのリクエストはすべてキャッシュから直接配信されます。オリジンサーバーはもう関与しません。

実際のパフォーマンスへの影響

研究によって数値は異なりますが、傾向は一貫しています:CDNはオリジンサーバーから遠い訪問者の画像読み込み時間を40〜70%削減します。国際的なオーディエンスを持つサイトでは、1.2秒で表示されるページと3.8秒かかるページの差になります。

ユーザーの快適さだけの問題ではありません。GoogleはCore Web Vitalsを2021年からランキングアルゴリズムに組み込んでいて、3つの主要指標のうち2つ(Largest Contentful PaintとCumulative Layout Shift)は画像の読み込み速度に直接影響されます。LCPが2.5秒を超えるとランキングにマイナスの影響があります。CDNはこの閾値を下回るための最も効果的なレバーの一つです。

キャッシュ以外にCDNが行うこと

モダンなCDNは単にファイルを保存して配信するだけではありません。Cloudflare Images、Cloudinary、imgixはいずれもオンザフライの画像変換機能を提供しています:自動リサイズ、検出されたブラウザに基づくWebPまたはAVIFへの変換、接続品質に応じたアダプティブ圧縮。サーバー上で同じ画像の10バージョンを管理する代わりに、一度アップロードするだけでCDNが各リクエストに適したバリアントを生成します。

もう一つの見落とされがちなメリット:トラフィックスパイクからの保護。記事がバイラルになり1時間に50,000アクセスが集中しても、オリジンサーバーへのリクエストはおそらく200件程度です。残りはCDNキャッシュが吸収します。CDNがなければ、この種のスパイクは共有ホスティングや小さなVPSをダウンさせるのに十分です。

HTTP/2と永続的な接続

CDNはHTTP/2を普遍的にサポートし、HTTP/3(QUIC)への対応も増えています。これらのプロトコルはマルチプレキシングを可能にします:1つのTCP接続で複数のファイルを順次ではなく並行して送信できます。20枚の画像があるページでは、HTTP/1.1とHTTP/2の読み込み時間の差が60%に達することもあります。共有ホスティングがHTTP/2をサポートしていなかったり、設定が不適切だったりすることがありますが、CDNはデフォルトで正しく実装しています。

用途に応じたCDNの選び方

予算が限られた個人サイトやブログには、Cloudflareの無料プランがほとんどのニーズをカバーします。無料プランではネイティブの画像変換はありませんが、グローバルネットワークからのキャッシュ配信は無料で利用できます。

多くの画像を扱うプラットフォーム(ECサイト、ポートフォリオ、ニュースサイト)には、Cloudinaryまたはimgixが定番です。どちらも強力なオンザフライ変換、完全なAPI、主要フレームワークとのネイティブ統合を提供しています。Cloudinaryは非技術系ユーザーに使いやすく、imgixはその柔軟性から開発チームに好まれる傾向があります。

Amazon CloudFrontFastlyは、CDNがDevOpsパイプラインの一部となる複雑なインフラ向けです。

CDNPoP数画像変換無料プランおすすめ用途
Cloudflare300+あり(有料)ありあらゆる規模のサイト
Cloudinary200+あり(ネイティブ)あり(月25クレジット)EC、メディア
imgix80+あり(ネイティブ)なし開発チーム
Amazon CloudFront400+Lambda@Edge経由12ヶ月(AWSフリーティア)AWSインフラ
Fastly60+Fastly IO経由なし大規模プラットフォーム

実際のコスト

CDNの料金体系は通常、転送データ量(月あたりGBまたはTB)とリクエスト数に基づいています。Cloudflareは注目すべき例外で、無料プランは帯域幅を課金しないため、小規模サイトには明らかな選択肢です。Cloudinaryはストレージ、変換、帯域幅をカバーする「クレジット」で課金し、無料プランは月25クレジットを含み、中程度の規模のサイトに十分です。

月10GBの画像を配信するサイトでは、CloudFrontのようなCDNのコストはヨーロッパリージョンで月約0.85ドルです。パフォーマンスの向上とオリジンサーバーの負荷軽減を考えれば無視できる金額です。

CDNは大規模プラットフォーム専用の贅沢品ではありません。オーディエンスが近隣地域を超えるか、ページに5〜6枚以上の画像がある時点で、メリットは測定可能になり、コストはゼロか限りなくゼロに近くなります。