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

Cloudflare Fonts試してみた🔤

AijiUejima
October 17, 2023

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

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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 { … }

    ホスト名が省略されている

    View full-size slide

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

    View full-size slide

  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書き換えられるため、有効にした後に問題がないことを確認してください

    View full-size slide

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

    View full-size slide