UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Web高速化】Webフォントを正しく扱う

Web高速化 Webフォント

Webフォントは重たいので、パフォーマンスの観点であまり導入しないほうがよいと思っていたが

軽量化を試みればパフォーマンス影響をほとんどなくすことができると知って調べた

サブセット化

対策としてよく知られているのが、「サブセット化」という手法で、使用頻度の低い文字を除外してファイルを軽量化する

Googleフォントの場合のサブセット化についてのドキュメントは以下

developers.google.com

導入には以下の記事が参考になった

www.webcreatorbox.com

GoogleフォントのURLのクエリパラメータにtext=xxxxxxxで使いたい文字列を指定するだけ

<head>
  <link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap&text=Webフォントを使う文字列" rel="stylesheet">
</head>

記事ではスピードインサイトのスコアが91→100になったといっていて、100ということはパフォーマンス観点ではほとんど影響ないということがわかる

unicode-range

unicode-range は特定の文字範囲を設定し、その範囲の文字が該当ページで使用されている場合のみ対象のフォントリソースを提供するようにできるCSSプロパティ

フォント提供者が設定する

developer.mozilla.org

Googleフォントの Noto Sans JP ではこんな感じ

/* [0] */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/notosansjp/v28/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.0.woff2) format('woff2');
  unicode-range: U+25ee8, U+25f23, U+25f5c, U+25fd4, U+25fe0, U+25ffb....;
}
/* [1] */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/notosansjp/v28/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.1.woff2) format('woff2');
  unicode-range: U+1f235-1f23b, U+1f240-1f248, U+1f250-1f251, ...;
}

unicode-range はページ中の出現頻度が高い文字をちゃんと考慮して範囲を指定しているみたい

他参考

https://developers.googleblog.com/2018/04/google-fonts-launches-korean-support.html

https://twitter.com/clockmaker/status/1396964812433674242?s=20