© 2023 Ateam Inc. Cloudflare Fonts試してみた🔤 Cloudflare Meet-up Online!! #2

© 2023 Ateam Inc. ⾃⼰紹介 Who am I ? Name: Aiji Uejima X(旧Twitter): aiji42_dev Github: aiji42 株式会社エイチームライフデザイン所属 最近興味があるのはエッジランタイム。 毎⽇プライベートでGithubに草⽣やしながら頑張ってます！ Cloudflare Meetup Nagoya によく出没しています。 2

© 2023 Ateam Inc. Birthday Weekでの発表 3 https://blog.cloudflare.com/cloudflare-fonts-enhancing-website-privacy-speed/ 先⽉末(2023年9⽉)のBirthday WeekにてブログでCloudflare Fontsが発表されました。

© 2023 Ateam Inc. Cloudflare Fontsとは 4 https://www.cloudflare.com/ja-jp/cloudflare-fonts/ ブラウザと Google のサードパーティ サーバー間のデータ交換を排除す ることで、ユーザーのプライバシーを強化します。 DNS ルックアップと TLS 接続のオーバーヘッドを最小限に抑えて遅延を 最小限に抑えます。 フォントをエンドユーザーに近づけることでサイトのパフォーマンスを向上 させます。 公式サイトによれば... Google Fontsの読み込みを⾼速化してくれるらしい🤔

© 2023 Ateam Inc. すでにベータ版として誰でも使⽤できる状態になっている 5

© 2023 Ateam Inc. サンプルサイトを使って実演 6 https://example.fotnts.aiji42.com/ LT後はCloudflare Fontsをオンにしておきます

© 2023 Ateam Inc. パフォーマンススコアが⼤きく改善している 7 Cloudflare Fonts オフ Cloudflare Fonts オン

© 2023 Ateam Inc. 仕組み: Google Fontsが描画されるまで 8 まず、Web Font(Google Fonts)が表⽰されるまでの流れを解説

© 2023 Ateam Inc. 仕組み: Google Fontsが描画されるまで 9 Google Fontsのページからフォントを選択し、を取得してに書く

© 2023 Ateam Inc. 仕組み: Google Fontsが描画されるまで 10 ブラウザでGoogle Fonts⽤のCSSがダウンロードされる

© 2023 Ateam Inc. 仕組み: Google Fontsが描画されるまで 11 @font-faceのブロックが並んだCSSがダウンロードされる

© 2023 Ateam Inc. 仕組み (Google Fontsが描画されるまで) 12 HTML中に存在している⽂字のunicodeと、 @font-faceブロック内の、font-family,style,weigh, unicode-range の組み合わせで探索し、 マッチする@font-faceがあれば、srcのURLに従ってフォントデータをダウンロードする /* [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/hESp…_A6A.0.woff2) format('woff2'); unicode-range: U+25ee8, (省略), U+2f9f4; } /* [1] */ (サンプルサイトでは700強のfont-faceブロックが並んでいる) 余談: コンテンツが動的に変化する場合には、新たにマッチするブロックがあれば、その都度フォントデータのダウンロードが起きている 余分なフォントデータのダウンロードが起きない仕組みになっている

© 2023 Ateam Inc. 仕組み (Google Fontsが描画されるまで) 13 フォントデータがダウンロードされて初めて画⾯に描画される

© 2023 Ateam Inc. Web Fonts(Google Fonts)のボトルネック 14 CSSとフォントデータ(1個⽬)をダウンロードするときにオーバーヘッドが載る (CSSとフォントデータのホスト名が異なるためオーバーヘッドは⼆重になる) - DNS Lookup - TCP Connection - TLS Connection CSS (fonts.googleapis.com) Font (fonts.gstatic.com)

© 2023 Ateam Inc. 仕組み: Cloudflare Fontsは何を解決するか 15 Cloudflare Fontsは何を解決してくれるのか

© 2023 Ateam Inc. 仕組み: Cloudflare Fontsは何を解決するか 16 まず、エッジ上でHTML上にGoogleFontsのCSSのタグを⾒つけると、 それをheadにでインライン展開して書き換えて、HTMLを返却する これによりブラウザでのリクエストが1つ減る Before Before

© 2023 Ateam Inc. 仕組み: Cloudflare Fontsは何を解決するか 17 さらに、フォントデータの配布元がセルフホストになるようにsrcを書き換えている (Google Fontsの場合 fonts.gstatic.com) @font-face { font-family:Dela Gothic One; font-style:normal; font-weight:400; src:url(/cf-fonts/s/dela-gothic-one/5.0.11/15/400/normal.woff2); unicode-range: … } @font-face { … } … ホスト名が省略されている

© 2023 Ateam Inc. 仕組み: Cloudflare Fontsは何を解決するか 18 フォントデータのリクエストがセルフホストとなり、コネクションの再利⽤ができるため 1コネクション分のオーバーヘッドが削減される Before

© 2023 Ateam Inc. まとめ 19 Cloudflare Fonts をオンにすると起きること - Google Fonts⽤のCSSがHTMLにインラインで挿⼊される - CSS⽤のリクエストが1つ減る - セルフホスト(CDN)からフォントデータを取得するようになる - コネクションが再利⽤されるため、DNS Lookup/TCP/TLS のオーバーヘッドがなくなる その他 - 現在利⽤できるのはGoogle Fontsに対してだけ - 仕組みは他のWeb Fontsもほとんど変わらないため、将来的には他のフォントも同様の最適化 が働くようになるかもしれない ⽇本語のGoogle Fontsを利⽤している場合は有効にすることをオススメします ※HTML書き換えられるため、有効にした後に問題がないことを確認してください

© 2023 Ateam Inc. 20 ご清聴ありがとうございました󰢛