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

Cloudflare Fonts試してみた🔤

AijiUejima
October 17, 2023
Technology
2
690

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.8k
Cloudflare Workersで構築する非同期ジョブシステム
aiji42
6
1.8k
VRTツールのダークホース Lost Pixelを紹介したい
aiji42
5
2.6k
オリジンサーバに手を付けないパーフォマンス改善
aiji42
5
1.4k
Hyperdrive試してみた🛸
aiji42
3
1.2k
Workers Browser Rendering API について
aiji42
0
460
VercelとNext.jsの機能を最大限に活用したA/Bテスト手法
aiji42
6
1.3k
Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya
aiji42
1
790
ビギナー向け エッジランタイムのすすめ | エッジランタイムを意識した開発をはじめよう
aiji42
14
5.3k

Other Decks in Technology

See All in Technology
OCI Security サービス 概要
oracle4engineer
PRO
0
6.5k
SSMRunbook作成の勘所_20241120
koichiotomo
2
120
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
Amazon Personalizeの レコメンドシステム構築、実際何するの？ 〜大体10分で具体的なイメージをつかむ〜
kniino
1
100
透過型SMTPプロキシによる送信メールの可観測性向上: Update Edition / Improved observability of outgoing emails with transparent smtp proxy: Update edition
linyows
2
210
オープンソースAIとは何か？ --「オープンソースAIの定義 v1.0」詳細解説
shujisado
5
590
The Role of Developer Relations in AI Product Success.
giftojabu1
0
120
個人でもIAM Identity Centerを使おう!(アクセス管理編)
ryder472
3
190
誰も全体を知らない ～ ロールの垣根を超えて引き上げる開発生産性 / Boosting Development Productivity Across Roles
kakehashi
1
220
スクラム成熟度セルフチェックツールを作って得た学びとその活用法
coincheck_recruit
1
140
Lambda10周年！Lambdaは何をもたらしたか
smt7174
2
110
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430

Featured

See All Featured
Unsuck your backbone
ammeep
668
57k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
120
The Cult of Friendly URLs
andyhume
78
6k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Navigating Team Friction
lara
183
14k
Thoughts on Productivity
jonyablonski
67
4.3k
Building Applications with DynamoDB
mza
90
6.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Faster Mobile Websites
deanohume
305
30k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Writing Fast Ruby
sferik
627
61k

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