2024.7.1
Webフォントの基本的な特性サイトパフォーマンス向上の方法を解説
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を利用した場合と比べても速さにあまり差はないみたいです。ダウンロードするデメリットとしては、更新が反映されないという事。(逆にサーバーにアップしたものから変わらないという事です。)
サブセットを使用する。
この機能については、セルフホスティングした場合のみ使用できる機能です。サブセット化 = 使うフォントだけをフォントファイルにするようなイメージ。日本語書体については効果は大きいですが、使用できる条件は限定的だと思います。
まとめ
フォントデータの読み込み時間は、サイトの読み込み速度、レイアウトシフトにも影響します。それはLighthouse(Googleが無料で提供しているWebサイトを分析・診断するための機能)の採点に反映されますのでSEOにも影響がでるということになります。
ですので、Webフォントの使用についてはメリット・デメリットをデザイン面からも理解していただき、コーディングの際もページに不必要なフォントデータは読み込まないなどの当たり前な事をきちんと守って設定することが大事です。
ジェイ・ラインでは、サイトのパフォーマンスも考慮しながら最適な採用サイトの制作を行っています。
質の高い魅力的な採用サイト制作を検討しているご担当者様は、お気軽にお問い合わせください。
#LP
#WEBデザイン
#採用ブランディング