Googleフォントの使い方: Webフォントの表示の仕組みと最適化

Googleフォントなど、Webフォントのロードはどういう仕組みなのか、どのように対応できるのか、Googleフォントの表示の最適化について紹介します。

当ブログでも日本語のGoogleフォントを導入して、1ヵ月が経ちました。
文字が読みやすくなったという利点は非常に大きいですが、ロードに時間がかかってしまうという欠点もあります。

サイトのキャプチャ

Web fonts, boy, I don't know
キャプチャ: Google Fonts + 日本語 早期アクセス

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

Googleフォントのロードに何を注意すべきか

私はロンドンで開催された「Polymer Summit 2017」のGoogle Chrome Developersの提唱する「Do Less & Be Lazy」のアプローチに、非常に共感されました。簡単に説明すると、何かがクリティカルパスではない場合はそれを最初にページに適用させる必要はないということです。
参考: Do Less & Be Lazy -YouTube

フォントについて考えてみてください。重要なパスはテキストを見せることですか? それともテキストをスタイルすることですか? 大切なのはコンテンツを伝えることです。例えコンテンツの見た目が悪くても、コンテンツが無しの状態になるよりも優れているということです(見た目に意味があるコンテンツもあるかもしれませんが)。

テキストのレンダリングがクリティカルパスではないと思うなら、わたし達はチャットで話し合う必要がありますね。

GoogleフォントなどのWebフォントがロードされる時のフローには、2パターンあります。

  • FOIC(flash of invisible content)
    見るべきでないコンテンツがちらっと見える(見え方のサンプル)。
    ブラウザはあなたがWebフォントを使用しようとしている時に、まず透明インクですべてのテキストを描画し、しばらく時間がかかり、最終的にフォントを取得した際にテキストを正しく描画して再レイアウトします。

実際のコンテンツを見るのではなく、あなたがスタイルし忘れた箇条書きや下線やランダムなテキストを見ることになるので、私はこれが嫌いです。

  • FOUC(flash of unstyled content)
    スタイルされていないコンテンツがちらっと見える(見え方のサンプル)。
    Chromeは3秒後にWebフォントの待機を停止します(最近、2Gだと0秒後)。これが意味することは、透明インクで表示するのではなく、代替フォントでテキストを描画するということです。あなたのWebフォントが最終的にダウンロードされると、新しいフォントですでに表示されているテキストが再び描画されます。

メモ

iPhoneではこのタイムアウトは存在しないので、基本的にはFOICのみです。その中間の救済措置はなく、「テキストなし」から「すべてのテキスト」に移行するまで待つことになります。

GPRSと2GのそれぞれChromeでおこなったデモのコードがここにあります。
デモページ

このデモは、LTEで非常に素晴らしく見えるでしょう。すべてがLTE上で超高速です。

Webフォントの実装に役立つリソース

多くの人がWebフォントについて書いています。私はそれらの記事を書き直そうとはしません。Chromeは特に「font-display」の仕様に取り組み、2GでWebフォントのダウンロードタイムアウトを0秒に減らすことによって、改善するために多くの作業を行っています。

Webフォントの実装に役立つリソースをいくつか紹介します。

  • Webフォントの最適化(日本語版)」にある「Webフォントとクリティカル レンダリング パスで、ブラウザがWebフォントをどのように処理するか。
  • font display」で、
    どのようにフォントが読み込まれか、どのように影響するか。
  • CSS font-display」で、フォントが表示されるブラウザごとの仕組み。
  • Minimising font downloads」で、ロードする文字の範囲を制限することで、フォントのダウンロードを最小に。
  • type is your right」で、なぜWebフォントを気にするべきか、JavaScriptとFont Face Observerというライブラリを使ってFOITを最小限にする方法。
  • Font loading strategy」で、Font Face Observerを組み合わせたボルトロンソリューション、非同期にフォントバンドルとWebストレージをロードする方法。

Googleフォントの遅延読み込み

個人的には「font-display: optional」を使用しますが、まだどの環境でも動作しません。それが対応するまでの間は、Webフォントを遅延読み込みさせる2つの簡単な方法があります。繰り返しになりますが、私はFOUCを気にしません。なぜなら、私にとってプログレッシブエンハンスメントのように感じるからです。できるだけ早くコンテンツを表示して、スタイルを適用します。

この「loadFont」を実行する2つの方法を紹介します。

Load the stylesheet (blocking)

これは最も簡単な方法で、シンプルなページで素晴らしく機能します。しかし、スタイルシートをロード/パースすることはパース/描画するのをブロックするため、ドキュメントが読み込まれた後に他のモジュールを読み込んだ場合、遅くなるのでうまくいきません。
デモページ

XHR the stylesheet (asynchronous)

同期性を気にするなら、非同期のXMLHttpRequestを実行し、その結果で「style」のノードを作成することができます。
デモページ

これをさらに進めて、インラインの<style>を作成するのではなく、ブラウザのキャッシュが既に準備されているので、前の方法のように<link>を追加することができます。もしあなたがブラウザのキャッシュを信用するなら。私は信用しません。

アップデート:
これは明らかに完璧ではありません。最初のデモのように何もしなかったとしても、高速のLTE接続でFOUCを与えるでしょう。ポイントはビジターすべてがLTE接続をしているわけではありません、サイトで機能しているときにそれらについてあなたが考えることを私は望みます。FOUCを最小限に抑えたい場合、Helen HolmesはWebのタイポグラフィーとパフォーマンスについて驚くべき話を最近しました(YouTube)。FOUCがより穏やかになるように、フォールバックのフォントのx-heightをターゲットフォントに合わせる方法を説明しています。

まとめ

Webフォントに問題はありません、ブログを美しくします。遅くなるのはイライラさせますが、使用する必要がある場合は使用してください。あなたのサイトを超高速で読み込まれるようにすることは同様に、あなたの責任でもあることを覚えておいてください。

top of page

©2017 coliss