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

Cloudflare Fonts試してみた🔤

AijiUejima
October 17, 2023
Technology
2
520

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
VRTツールのダークホース Lost Pixelを紹介したい
aiji42
5
2.1k
オリジンサーバに手を付けないパーフォマンス改善
aiji42
5
1.1k
Hyperdrive試してみた🛸
aiji42
3
900
Workers Browser Rendering API について
aiji42
0
350
VercelとNext.jsの機能を最大限に活用したA/Bテスト手法
aiji42
6
1.1k
Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya
aiji42
1
510
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
aiji42
10
4k
Cloudflare Workersで動くOG画像生成器
aiji42
1
1.3k
サイボウズフロントエンドマンスリー#26_エイチーム
aiji42
0
370

Other Decks in Technology

See All in Technology
ワールドカフェI ／チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
150
実例で紹介するRAG導入時の知見と精度向上の勘所
yamahiro
5
1.6k
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
35k
AWS学習者向けにAzureの解説スライドを作成した話
handy
3
190
LangSmith入門―トレース／評価／プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
5
700
DMM.com アルファ室採用案内資料
hsugita
1
220
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
280
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
3
620
Python と Snowflake はズッ友だょ！~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
2
140
ルーターでプレゼンする
puhitaku
1
3.2k
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
720
EM完全に理解した と思ったけど、 やっぱり何も分からなかった話 / EM Night Fukuoka #1
hirutas
0
280

Featured

See All Featured
The Language of Interfaces
destraynor
151
23k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Designing with Data
zakiwarfel
96
4.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
It's Worth the Effort
3n
180
27k
Typedesign – Prime Four
hannesfritz
36
2.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Into the Great Unknown - MozCon
thekraken
14
1k
Being A Developer After 40
akosma
66
580k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
How STYLIGHT went responsive
nonsquared
92
4.8k

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 ご清聴ありがとうございました󰢛