日本語Webフォントの読み込み速度改善

2015年6月15日月曜日 Rio MURASHIMA 1 Comments

Googleの日本語Webフォント'Noto Sans Japanese'を試してみたが、読み込むフォントのサイズがデカいせいで、キャッシュされていない状態だと10数秒〜ぐらいかかってしまう。非同期読み込みやGoogle Web Font Loaderなど、いろいろ試してみたが、どれも満足できるレベルではなかったので、もう日本語Webフォントは諦めようかと思っていたところ、Japontという、日本語Webフォントのダイナミックサブセット化なる技術に出会ってしまいました。詳しい解説はこちら。
データ量が多いという日本語Webフォントの問題点に対し、表示するページ内の必要な文字を動的に調べ，抽出したフォントを動的に生成する、という方法で解決を図っています。すばらしい！

おおまかな仕組みは、
  1. 必要な文字を調べる(javascript)
  2. 必要な文字をサーバに送信(javascript)
  3. 受け取った文字のコードを調べる(python, fontforge)
  4. 文字コードからフォントを抽出(python, fontforge)
  5. 生成したフォントをCSSとしてクライアントへ送信(python)
  6. 受け取ったCSSを反映させる(javascript)
という流れで、フォントが表示されるまで数秒のタイムラグがあるが、まぁ許容範囲だし、その間は代替フォントで文字が表示されているので、10数秒も何も表示されないというストレスはない。
pythonの部分はサーバサイドで動かす必要があるため、別途、VPS等でサーバを用意する必要があるが、とりあえず作者の方の環境(heroku)で使わせてもらっている。近々、自分のサーバに環境を作る予定。
動作するブラウザが限られるようで、Mac OSX Yosemite のSafariやiOS 8.3のChrome, Safariあたりでは動かないみたいだけど、元々、これらの環境はフォントもきれいだから、自分的には問題ないかな。あとはWindows環境での対応状況を確認〜。

1 件のコメント:

登録: コメントの投稿 (Atom)