ROCHAS

Google Web Fontsのパフォーマンス

Google Web Fontsのフォントがどのくらいの人に見られているのか想像できますでしょうか?
なんと只今のTotal Font Viewsは272,279,056,925 。リアルタイムに上がり続けて留まるところをしりません。 1億以上のWebページで利用されているWebフォントは、そのWebページを通じて、1日に10億以上のPV数があるそうです。
さらに驚いたのが、PV数が上がるほど高速化するというメカニズム! Make The Web Fast teamによって新たに開発されたGoogle Web FontsのPV数とパフォーマンスには深い関係があったのです。

1. なぜWebフォントは遅いのか

WOFFのブラウザサポート状況

Webフォントの利用が増加する一方で、パフォーマンスへの取り組みは立ち遅れていました。
その理由の1つとしては、ブラウザによってフォントファイルのフォーマットのサポート状況が違い、WOFF、TTF、EOT、SVGと4種類必要であるということ。ようやくWOFFの対応が進んできましたが、それでもクロスブラウザ対応するには@font-faceのコードはこんなにも助長してしまいます。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6~8 */
       url('webfont.woff') format('woff'), /* Modern Browsers, iOS5~*/
       url('webfont.ttf') format('truetype'), /* iOS4.2~4.3 */
       url('webfont.svg#svgFontName') format('svg'); /* iOS3.2~4.1 */
  font-weight: normal;
  font-style: normal;
}

フォントファイルの重さ

2つ目は、フォントファイル自体が巨大なこと。ほぼ全ての言語をサポートするArialは22MB以上の重さ!20以上の言語のサポートしているOpen Sansは217KBあります。

そこで立ち上がったのがMake The Web Fast team。 フォントファイルの軽量化、Dynamic Serving(動的配信)、ブラウザキャッシュの処理の3つの観点から、Google Web Fontsのパフォーマンスの改善への取り組みが始まったのです。

2. EOT、WOFFの圧縮に成功

Google Web Fonts、Monotype Imaging、Fonts.comが協力し、MicroType Expressという新しいフォントフォーマットが開発され、フォントファイルの圧縮に成功しました。 これは、Mac(もしくはiOS、Android)を使用している場合はfont hintingというWindowsのレンダリング品質を改善するためのメタデータを自動的に削除してくれるのです。 これによって従来よりもEOTは15%以上圧縮され、IEの高速化につながりました。 またMicroType Expressの技術を取り入れた、sfntlyというオープンソースライブラリがリリースされ、WOFFも30%以上の圧縮、Chrome、Safari、Firefox、Operaのモダンブラウザでの高速化が可能となりました。 sfntlyはfont hintingの削除の他に、フォントのサブセット化、Dynamic Serving(動的配信)の機能を持っています。

3. フォントをサブセット化して軽量化

フォントのサブセット化とは、例えばラテン文字、またはキリル文字 だけというように、使用言語を限定するメカニズムです。 これによって217KBのOpen Sansでは、ラテン文字だけに限定すると36KBまで圧縮できるようになりました。

Script Subsets

スニペットに&subset=属性を付けることで、英語や日本語だけに対応する場合はラテン文字だけ、多言語対応であれば言語をサブセット化することができます。

<link href="http://fonts.googleapis.com/css?family=Open+Sans&ubset=latin" rel="stylesheet" />

Font Request

また、もし決まった文字しか使わないのなら、その使用文字を搾り込むことでさらに圧縮する(Font Request)ことができます。 見出しだけにWebフォントを使いたいといったケースも多いでよね。これは覚えておきたい。

<link href="http://fonts.googleapis.com/css?family=Inconsolata&ext=Hello" rel="stylesheet" />

4. Dynamic Serving(動的配信)で最適化

Dynamic Servingとは、Chrome、Safari、Firefox、Opera、IE9にはWOFF。IE6~8にはEOT。iOS4ではTTFといったように、プラットフォームやブラウザの対応状況に応じて動的に最適な処理をしてくれる機能です。もちろんfont hintingの削除もサブセット化も同様、動的に処理してくれるためCSSもフォントファイルも書き換える必要はありません。
モダンブラウザではWOFFだけが動的に読み込まれ、従来の@font-faceのコードに比べると無駄な読み込みがなくなっているのは一目瞭然です。ちなみにIEでは6~8用にEOTと9用にWOFFの2つが読み込まれています。
またブラウザ・キャッシュの保存期間が、CSSファイルは1日(86400秒)、フォントファイルは1年(31536000秒)とそれぞれのレスポンス・ヘッダーに指定されています。ここがさらなる高速化のポイント、Googleのスゴイところなのです。

5. ブラウザ・キャッシュで高速化

Google Web Fontsはオープンソースであることが利用者の拡大へとつながり、クロス・サイト・キャッシングに非常に良い効果をもたらしています。
どのドメインでも同じフォントが配信され、同じフォントが閲覧されているため、利用数が多いフォントほどブラウザ・キャッシュにヒットする確率は高くなります。初めて訪れたサイトでも、他のサイトからのキャッシュによってロード時間は短縮されるという訳です。 つまり、PV数が高くなるほどパフォーマンスはあがる、ということです!

6. アナリティクスとパフォーマンスの関係

10月4日Google Web Fontsにアナリティクス機能が搭載され、ページの右上のAnalyticsから、Webフォントがどのくらい使用され、どのくらい閲覧されているかが計測できるようになりました。例えば・・・

現在Google Web Fontsの人気トップ3の月間PV(2012.10)は、
1位 Open Sans 4,367,109,806PV
2位 Droid Sans 1,905,503,056PV
3位 Oswald 1,714,253,585PV

また各フォントのページのStatisticsでは週間PVや地域分布などが確認できたり、Pairingsでは他のフォントとの組み合わせ方法が紹介されています。

つまり、人気のあるフォントほど速い。このアナリティクスを参考にしてWebフォントを選べば、パフォーマンスを考慮できる、というわけです。 またこれほどのPVを獲得できるのも、無料でライセンスフリーなGoogle Web Fontsの為せる技、ぜひ参考にしたいですね。

参考