Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cloudflare Fonts試してみた🔤

AijiUejima
October 17, 2023
Technology
2
710

Cloudflare Fonts試してみた🔤

Cloudflare Meetup Online #2 で発表した内容です。
https://cfm-cts.connpass.com/event/292785/

発表中に使用しているサンプルサイトはこちら https://example.fotnts.aiji42.com/

AijiUejima

October 17, 2023
Tweet

More Decks by AijiUejima

See All by AijiUejima
エッジはフロントエンドなのか？ バックエンドなのか？ について考えてみる
aiji42
7
4.9k
Cloudflare Workersで構築する非同期ジョブシステム
aiji42
6
1.9k
VRTツールのダークホース Lost Pixelを紹介したい
aiji42
5
2.7k
オリジンサーバに手を付けないパーフォマンス改善
aiji42
5
1.4k
Hyperdrive試してみた🛸
aiji42
3
1.2k
Workers Browser Rendering API について
aiji42
0
470
VercelとNext.jsの機能を最大限に活用したA/Bテスト手法
aiji42
6
1.4k
Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya
aiji42
1
810
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
aiji42
14
5.4k

Other Decks in Technology

See All in Technology
オプトインカメラ：UWB測位を応用したオプトイン型のカメラ計測
matthewlujp
0
170
日本版とグローバル版のモバイルアプリ統合の開発の裏側と今後の展望
miichan
1
120
DevOps視点でAWS re:invent2024の新サービス・アプデを振り返ってみた
oshanqq
0
180
統計データで2024年の クラウド・インフラ動向を眺める
ysknsid25
2
830
Amazon VPC Lattice 最新アップデート紹介 - PrivateLink も似たようなアップデートあったけど違いとは
bigmuramura
0
190
AIのコンプラは何故しんどい？
shujisado
1
190
レンジャーシステムズ | 会社紹介（採用ピッチ）
rssytems
0
150
OpenShift Virtualizationのネットワーク構成を真剣に考えてみた/OpenShift Virtualization's Network Configuration
tnk4on
0
130
Turing × atmaCup #18 - 1st Place Solution
hakubishin3
0
470
成果を出しながら成長する、アウトプット駆動のキャッチアップ術 / Output-driven catch-up techniques to grow while producing results
aiandrox
0
180
アップデート紹介：AWS Data Transfer Terminal
stknohg
PRO
0
170
サイバー攻撃を想定したセキュリティガイドライン 策定とASM及びCNAPPの活用方法
syoshie
3
1.2k

Featured

See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Writing Fast Ruby
sferik
628
61k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Visualization
eitanlees
146
15k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Building an army of robots
kneath
302
44k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
Being A Developer After 40
akosma
87
590k

Transcript

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

  2. © 2023 Ateam Inc. ⾃⼰紹介 Who am I ? Name:

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

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

    Fontsが発表されました。

  4. © 2023 Ateam Inc. Cloudflare Fontsとは 4 https://www.cloudflare.com/ja-jp/cloudflare-fonts/ ブラウザと Google

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

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

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

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

    Fonts オン

  8. © 2023 Ateam Inc. 仕組み: Google Fontsが描画されるまで 8 まず、Web Font(Google

    Fonts)が表⽰されるまでの流れを解説

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

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

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

  12. © 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ブロックが並んでいる) 余談: コンテンツが動的に変化する場合には、新たにマッチするブロックがあれば、その都度フォントデータのダウンロードが起きている 余分なフォントデータのダウンロードが起きない仕組みになっている

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

  14. © 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)

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

  16. © 2023 Ateam Inc. 仕組み: Cloudflare Fontsは何を解決するか 16 まず、エッジ上でHTML上にGoogleFontsのCSSの<link>タグを⾒つけると、 それをheadに<style>でインライン展開して書き換えて、HTMLを返却する

    これによりブラウザでのリクエストが1つ減る Before Before

  17. © 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 { … } … ホスト名が省略されている

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

    Before

  19. © 2023 Ateam Inc. まとめ 19 Cloudflare Fonts をオンにすると起きること -

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

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