日本語Webフォントの読み込み戦略: FOIT/FOUT対策
英語のサイトに比べて、日本語のサイトでWeb用のフォントを使うと、とにかく重くて困りました。日本語は漢字がたくさんあるので、全部の文字を一つのファイルに詰めるとかなり大きくなりやすく、最初の表示が遅くなる原因になります。個人サイトであれこれ試した経過と、いま落ち着いているやり方をまとめます。先に結論を書いてしまうと、本文は端末に元から入っている文字に任せて、見出しやロゴだけ部分的にWeb用のフォントを使い、表示は「先に手元の文字で見せて後から差し替える方式」にする、という形に落ち着きました。
文字が出ない待ち時間と、後から差し替える方式
Web用のフォントを読み込んでいる間、文字をどう見せるかには大きく2つのやり方があるそうです。ひとつは、フォントが届くまで本文を表示しない「文字が出ない待ち時間が出る方式」（FOIT）。もうひとつは、まず端末に元から入っている文字で表示しておいて、Web用のフォントが届いたら差し替える「先に手元の文字で表示して、後からWeb用の文字に差し替える方式」（FOUT）です。
このあたりは設定で選べるようになっていて、初期状態だと少しの間文字が出ない待ち時間を経てから手元の文字に切り替わる挙動になり、別の設定にすると最初から手元の文字で見せて後で差し替える挙動になります。設定の名前まではきちんと覚えきれていないのですが、要は「待つか、先に見せてしまうか」の違いだと理解しています。
待ち時間が出る方式は、文字が出ない時間ができるので、初めて来た人には読み始めが遅れてしまいます。先に手元の文字で見せる方式は、文字の見た目がいったん切り替わる瞬間はあるものの、すぐに読み始められます。
私のサイトでは、とにかく早く読み始めてもらうことを優先して「最初から手元の文字で見せて後で差し替える設定」にしています。見た目が一瞬変わるのは正直気になるのですが、待たされるよりはいいかな、という判断です。
日本語フォントの容量問題
日本語のフォントは漢字を含むぶん、ファイルがどうしても大きくなります。よく使われる無料のWeb用フォントでも、全部入りにすると数MBを超えてしまうらしく、これをそのまま読み込ませると初回の通信量と読み込み時間がきつくて困りました。
軽くする工夫としては、使う文字だけを入れた軽いフォントを用意する方法や、漢字をいくつかのまとまりに分けておいて、そのページで実際に使う字のぶんだけ読み込ませる方法があるそうです。Google Fonts のような配信サービスが、こういう分割を自動でやってくれることもあります。
Google Fonts の日本語フォントは、大きな日本語フォントをWebで扱いやすくするための工夫がされていて、自分で軽いフォントを作るよりずっと楽でした。ただ、外のサービス経由だと届くまでの速さが環境によって変わります。表示までの時間や外部ドメインへの依存をきっちり管理したいときは、自分で用意したほうが扱いやすい場合もあるようです。正直そこまで厳密に測れていないので、このへんは感覚での話です。
端末に元から入っている文字を基本にする
最終的に行き着いたのは「本文は端末に元から入っている文字、見出しやロゴだけWeb用のフォント」というやり方です。本文をWeb用のフォントにすると、どうしても最初の読み込みが遅くなって困ったのですが、見出しやロゴは表示が小さいぶん、差し替わるときの印象もそれほど気にならず、Web用フォントの良さが出しやすい部分でした。
端末に元から入っている文字は機種ごとに違うので、「この機種ならこの文字」というのを順番に並べて指定しておきます。具体的には、その端末に最初から入っている読みやすい文字を上から順に指定しておいて、当てはまるものが使われるようにする、という形です。
iPhone や Mac だとヒラギノ、Windows だと游ゴシックやメイリオ、Android だと端末に入っている Noto Sans 系、といった具合に、それぞれの環境で「その機種で一番読みやすい標準の文字」が当たるように並び順を決めています。
待つか先に見せるかの使い分け
見出しやロゴでWeb用のフォントを使うときは、「待つか、先に手元の文字で見せるか」の選び方がそのまま読み心地に効いてきます。私はだいたい次のように分けています。
ロゴや短い見出しのように「文字の見た目そのものに意味がある」場面では、少しくらい待ってでもWeb用の文字を出す価値があるので、本文よりは見た目を優先する設定にしています。
本文や普通の見出しのように「中身を早く読めるほうが大事」な場面では、最初から手元の文字で見せて後で差し替える設定にしています。最初は端末の文字で出て、Web用の文字が用意できたら自然に入れ替わる感じです。
もうひとつ、「間に合わなければWeb用のフォントはあきらめて、手元の文字のままにする」という考え方の設定もあります。回線が遅い端末を想定したいときに向いているようですが、見た目がそろわなくなる場合もあるので、使うなら慎重にという感じだと思います。私はまだうまく使いこなせていません。
先回りで取りに行く指示
Web用のフォントをどうしても早く出したいときは、ページの先頭で「先回りで取りに行く」指示を入れる手があるそうです。外の配信サービスへの接続をあらかじめ準備しておく指示や、フォントのファイルそのものを優先して取りに行く指示などがあります。要は、後から必要になるものを早めに用意しておいて、いざというときの待ち時間を減らす、という発想だと理解しています。
ただ、こういう「先回り」をあれこれ詰め込みすぎると、ブラウザの中で優先順位の取り合いになってしまって、かえって見た目を整えるための読み込みや動きの読み込みを遅らせることもあるようでした。本当に最優先したい1〜2個だけに絞るのが無難だったので、欲張らないようにしています。
自前で置くか、配信サービスを使うか
Google Fonts のような配信サービスを使うか、自分のサイトにフォントのファイルを置くかは、サイトの規模や方針で選ぶことになります。配信サービスの良いところは、自分でフォント配信の仕組みを細かく持たなくて済むことです。一方で、最近のブラウザではキャッシュの扱いも変わってきているので、「他のサイトで読み込まれたフォントがそのまま共有される」とは期待しないほうがよさそうです。外のドメインから読み込むこと自体を避けたい場面では、自分のサイトに置く選択肢もあります。
自分で置く場合は、軽い形式のファイルで配って、しばらく手元に取っておいてもらう設定にしておくと、二度目に来た人の読み込みが速くなります。使う文字だけ入れた軽いフォントも必要に応じて自分で作れるのですが、その手間は確実に増えるので、ここは正直やや面倒でした。
最近は配信サービス側の機能が充実してきたようで、特別な事情がなければそちらのほうが楽だ、というのが私の実感です。外部ドメインへの依存や表示速度をかなりシビアに気にする場面でだけ、自前で置くのを考えるくらいのバランスがちょうどいいと感じています。
フォント周りは一度決めると触る機会が少ないのですが、初めて来た人の印象に直で効く部分なので、最初にどこまで頑張るか決めておくと後が楽になるんじゃないかな、と思っています。
← 他の制作記を見る ｜ トップ ｜ お問い合わせ