Cloudflare Fonts試してみた

Cloudflare Birthday Weekにて発表があったCloudflare Fonts。

https://blog.cloudflare.com/cloudflare-fonts-enhancing-website-privacy-speed/

発表当初は、まだ利用することはできなかったが、利用が可能(ベータ)になったので早速使用してみた。

https://developers.cloudflare.com/speed/optimization/content/fonts/

利用方法は非常に簡単で、CloudflareのWebコンソールからトグルをオンにするだけ。
オリジンの内容を変更したりなどの作業は一切不要。

サイドバーの Speed > Optimization を選択し、Content Optimization のタブの中にトグルが存在している。

現時点(2023/10/12)ではGoogle Fontsにのみ対応しているということなので、Google Fontsを5つ使用したサンプルのサイトを用意し、Cloudflare Fonts をオン・オフしてどんな違いが現れるかを確かめる。

実験した結果、Lighthouseのパフォーマンスに大きな差が生まれた。

Cloudflare Fontsオフ	Cloudflare Fontsオン

Cloudflare Fontsオフ

Cloudflare Fontsオン

Cloudflare Fontsの仕組みについて

まずGoogle Fontsを始めとした一般的なWebフォントが、どのようにブラウザで作用するかを述べる。
(専門家ではないので間違っていたら指摘ください)

通常、Google Fontsを利用する時は、次のようなlinkタグをheadに書く。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&...省略....&amp;display=swap" rel="stylesheet">

先頭2つに関しては、CSSファイルとフォントファイルのホストに事前接続して高速化させるものであり、今回はあまり関係がないのでスルーする。

核となるのは最終行のCSSファイル。このファイルをダウンロードしてみると下記のようになっている。

/* [0] */
@font-face {
    font-family: 'Dela Gothic One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/delagothicone/v15/hESp6XxvMDRA-2eD0lXpDa6QkBAGQEsPQAgBRQGhdlWTf4ifQMmxfTPxmI8D_A6A.0.woff2) format('woff2');
    unicode-range: U+25ee8, U+25f23, ...省略;
}

/* [1] */
@font-face {
    font-family: 'Dela Gothic One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/delagothicone/v15/hESp6XxvMDRA-2eD0lXpDa6QkBAGQEsPQAgBRQGhdlWTf4ifQMmxfTPxmI8D_A6A.1.woff2) format('woff2');
    unicode-range: U+1f235-1f23b, U+1f240-1f248, ...省略;
}

省略 (こんな感じのブロックが連なる)

ブラウザはこのCSSファイルをダウンロードして読み込んだ後に、src に記載されたURLから一気にフォントファイルをダウンロードして、それが完了したらフォントが描画されるというような流れ。

まとめるとWebフォントを利用する場合は

1. フォントデータのURLの一覧が書かれたCSSをダウンロード
2. フォントデータ本体(N個)をダウンロード
3. 描画

というような流れになる。
(この辺に関しては素人解釈なので、間違いがあれば指摘してください。)

続いてCloudflare Fontsをオンにすると何が起きるかを述べる。

まず、オリジンから返却されるHTMLをCDN上で解析し、<link href="https://fonts.googleapis.com/css2?...省略" rel="stylesheet">に書かれているCSSをブラザではなくエッジ上でダウンロードする。
そして、そのCSSの内容をheadにインラインのスタイル<style>として書き込んでから、ブラウザにHTMLを返却する。
(この処理自体はキャッシュされるので、毎回CSSをエッジでダウンロードしてるわけではない)

これにより、Webフォント用のCSSをブラウザ上でダウンロードするというステップなくなることになる。

そして、ここでGoogle Fonts用のCSSがそのままインラインとして埋め込まれているわけではなく、若干の変更が加えられている。

@font-face {
  font-family:Dela Gothic One;
  font-style:normal;
  font-weight:400;
  src:url(/cf-fonts/s/dela-gothic-one/5.0.11/92/400/normal.woff2);
  unicode-range:U+2460,U+4e5f, 省略;
  font-display:swap;
}

srcに注目すると、元々https://fonts.gstatic.com/....woff2だったURLが、/cf-fonts/....woff2に変換されている事がわかる。ホスト名が省略されているのである。

つまり、フォントデータのリクエスト先はセルフホストになり、TLSのコネクションを新たに張る必要がなくなるので、若干のアドバンテージを得ることになる。
最終的にこのフォントデータのリクエストはオリジンへは貫通せず、CDN(Cloudflare)側からGoogle Fontsと同じフォントデータをブラウザに返してやることで高速化させている。

これが、Cloudflare Fontsを利用するとパフォーマンスが向上する仕組みである。

なお、headを始めとしたHTMLの書き換えは、Cloudflare Zarazなどもその仕組の上で動いており、HTMLRewriterを備えるWorkersを使ってエッジ上でオプティマイズする手法は、Cloudflareのお家芸になりつつある。

https://www.cloudflare.com/ja-jp/application-services/products/zaraz/

ちなみに、今回は日本語フォントを5つも同時に利用するという、どう考えてもパフォーマンスが低下しそうなケースで比較しているので、大きくパフォーマンスに違いが出ているが、英字フォントだけのようなケースでは(Cloudflare Fontsの方が優位であるという点に変わりはないが)ここまで大きな差は発生しない。

ただ、われわれ日本人にとってはフォントによるサイトパフォーマンスの低下はよくある問題であるため、その対策としてのCloudflare Fontsという選択肢は非常に有効になりそう。

知りたいことがまるごと得られて参考になりました。
ありがとうございます！