CDNとは何か｜自分のサイトのフォントは、Xserverではなく別の場所から届いていた

このサイトは、契約しているXserverの1台のサーバーから、ページも文字も画像も全部届いていると思っていた。
ドメインの正体を調べた前回の記事で、自分のサイトの住所がたった1つのIPアドレスだと分かったばかりだったので、なおさらそう思い込んでいた。

ページのソースを覗いたら、見慣れないアドレスが出てきた

ブラウザで自分の記事ページを開き、右クリックから「ページのソースを表示」をやってみた。
head タグの中に、こんな行があった。

fonts.googleapis.com。見た瞬間、あれ、と思った。
このサイトの文字はXserverの162.43.120.169から届いているはずなのに、フォントだけはGoogleのドメインから読み込まれていた。

CDNは「原本」を配らず、近くの倉庫から渡す仕組みだった

調べてみると、これはCDN（Content Delivery Network）と呼ばれる仕組みの一種だった。
世界中に配置されたたくさんのサーバー（キャッシュサーバー、エッジサーバーと呼ばれる）が、大元のサーバーの代わりにコンテンツを配ってくれる。
利用者から地理的に近いサーバーが応答するので、大元のサーバーまで毎回問い合わせに行くより速く届く、という理屈らしい。

Googleフォントの場合、大元はGoogleの巨大なインフラで、世界中のどこからアクセスしても、だいたい近くの拠点からフォントデータが返ってくる。
うちのサイトはXserverの1台しか借りていないけれど、フォントだけはGoogleの世界規模のネットワークにただ乗りしている形になっていたわけだ。

なぜ自分のサーバーに置かず、わざわざ外から借りてくるのか

最初は、余計な外部依存が増えるだけでは、と思った。
でも理由を調べていくと、納得できる点がいくつかあった。

ひとつは、フォントファイルそのものの保守をGoogle側に任せられること。
もうひとつは、同じGoogleフォントを使っている他のサイトをブラウザが先に訪れていれば、ブラウザの中にそのフォントがすでにキャッシュされていて、うちのサイトを開いたときに再ダウンロードが要らない可能性があること。
全部のサイトが思い思いに同じ書体ファイルを自分のサーバーに置くより、ひとつの配布元に集約したほうが、全体として見れば無駄が少ない、という考え方のようだった。

ページの重さの半分以上は、実は画像だった

CDNを調べているうちに、もうひとつ知らなかった数字に行き当たった。
一般的なWebページでは、転送されるデータ量の50〜70%を画像が占めているという。
文字よりも、画像のほうが重いファイルだという実感はあったけれど、サイト全体の重さの過半数を占めるとまでは考えていなかった。

だから画像専門のCDNサービスというものも存在していて、画像を圧縮したり、閲覧者の端末サイズに合わせてリサイズしたりを、配信するタイミングで自動的にやってくれるらしい。
うちのサイトでも、画像にはloading="lazy"を付けて、画面に入ってくるまで読み込みを遅らせる工夫はしている。
ただ、それは「読み込むタイミング」を遅らせているだけで、画像ファイル自体をどこの倉庫から配るか、という話とはまた別だったんだなと、今回の調べもので切り分けられた。

うちのサイトの画像は、まだ素通しで配っている

結局このサイトでCDNに乗っているのは、フォントだけだった。
記事のアイキャッチや本文中の写真は、Xserverの同じサーバーから直接配信している。
世界中から読みに来てくれているわけではないサイトなので、それで困っているわけではないけれど、「自分のサーバー1台だけで完結している」と思い込んでいた前提が、実際にソースを覗くまで間違っていたことに気づけたのは収穫だった。
次に画像の表示が重いと感じることがあったら、今度は画像の配り方そのものを疑ってみようと思う。