Webフォントの基本的な特性サイトパフォーマンス向上の方法を解説

#LP #WEBデザイン #採用ブランディング

2024.7.1

Webフォントは、デバイスを問わず同じフォントを使用できるという特性があり、沢山のユーザーに使用されています。私も、コーディングする際にwebフォントを読み込み使用しています。

本記事では、サイトのパフォーマンスを上げる観点から、webフォント(主にGoogle Fonts )を使用する際の特性と気をつける点についてまとめました。

webフォントの特性

フォントデータのファイル容量

特に日本語や中国語の場合は文字数が多いため重たいです。「Noto Sans JP」は1ウェイトあたり1.6MBあるため、「Regular (一般的な太さの文字」「Bold(太めの文字)」の2種類を利用すると3.2MBになります。Googleの推奨は1ページあたり1.6MBで、これはすべてのリソース（画像、スクリプト、スタイルシートなど）を含む合計サイズです。したがって、フォントだけで3.2MBを使用するのはページ全体のパフォーマンスに大きな影響を与えています。

https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight?hl=ja

FOIT (Flash of Invisible Text)

フォントデータをダウンロードしている間にページの描画が止まります。その為、サイト表示速度の低下に繋がります。

FOUT (Flash of Unstyled Text)

webフォント読み込み時に代替フォントを表示し、フォントダウンロード後にフォントを置き換えるプロセスです。置き換わる際にチラつきやレイアウトシフトに繋がります。

キャッシュの挙動

当該ページで1度ダウンロードされたフォントデータは一定期間キャッシュされます。(2回目以降キャッシュされたフォントデータを使用するので、キャッシュ期間中はダウンロードされないです。)

フォントデータの読み込み時間中のテキストの扱いは、FOITとFOUTのどちらかを選択して構築進める事になります。

フォントの読み込みを効率化する基本施策

必要ないフォントは読み込まない

構築時に不要なfont family, font-weightを一緒に読み込でいる事はありませんか？フォントの種類、太さ、斜体の違いで1つのフォントデータになります。ページに不要なフォントデータは読み込まない事が、一番重要です。ですので、外部からフォントを読み込まないのが最速です。
デザインする時から、あまり多くの種類のフォントを使用することは表示速度にも影響すること理解しておくことも大事だと思います。

cssファイルに@importを使用せずに、htmlの<head>内で読み込む。

cssファイル内で読み込む@importに対して高速化する手段がございません。その為、フォントデータの読み込みは<head>内で行う事が基本となります。

Google Fontsを使用する際はリクエストを連結させて、まとめて記述する。

複数に分けてリクエストを記述するのは、余計な通信が発生します。なので、まとめてリクエストする事で通信の回数を少なくするのは基本になります。Google Fontsで設定を行う際は、複数のフォントもまとめて設定するようにしてください。

セルフホスティング

フォントデータをダウンロードして、自サーバ内に設置して使用します。自サーバに設置することでパフォーマンス的にも安定して使用できます。
※通信環境に問題のない環境であれば、CDNを利用した場合と比べても速さにあまり差はないみたいです。
ダウンロードするデメリットとしては、更新が反映されないという事。(逆にサーバーにアップしたものから変わらないという事です。)