on:2016年11月21日sponsorsGoogleフォントなど、Webフォントのロードはどういう仕組みなのか、どのように対応できるのか、Googleフォントの表示の最適化について紹介します。当ブログでも日本語のGoogleフォントを導入して、1ヵ月が経ちました。文字が読みやすくなったという利点は非常に大きいですが、ロードに時間がかかってしまうという欠点もあります。早期アクセス下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。Lazy」のアプローチに、非常に共感されました。簡単に説明すると、何かがクリティカルパスではない場合はそれを最初にページに適用させる必要はないということです。-YouTubeフォントについて考えてみてください。大切なのはコンテンツを伝えることです。コンテンツの見た目が悪くても、コンテンツが無しの状態になるよりも優れているということです(見た目に意味があるコンテンツもあるかもしれませんが)。テキストのレンダリングがクリティカルパスではないと思うなら、わたし達はチャットで話し合う必要がありますね。GoogleフォントなどのWebフォントがロードされる時のフローには、2パターンあります。content)見るべきでないコンテンツがちらっと見える(見え方のサンプル)。ブラウザはあなたがWebフォントを使用しようとしている時に、まず透明インクですべてのテキストを描画し、しばらく時間がかかり、最終的にフォントを取得した際にテキストを正しく描画して再レイアウトします。実際のコンテンツを見るのではなく、あなたがスタイルし忘れた箇条書きや下線やランダムなテキストを見ることになるので、私はこれが嫌いです。content)スタイルされていないコンテンツがちらっと見える(見え方のサンプル)。Chromeは3秒後にWebフォントの待機を停止します(最近、2Gだと0秒後)。これが意味することは、透明インクで表示するのではなく、代替フォントでテキストを描画するということです。あなたのWebフォントが最終的にダウンロードされると、新しいフォントですでに表示されているテキストが再び描画されます。メモiPhoneではこのタイムアウトは存在しないので、基本的にはFOICのみです。その中間の救済措置はなく、「テキストなし」から「すべてのテキスト」に移行するまで待つことになります。GPRSと2GのそれぞれChromeでおこなったデモのコードがここにあります。デモページこのデモは、LTEで非常に素晴らしく見えるでしょう。すべてがLTE上で超高速です。Webフォントの実装に役立つリソース多くの人がWebフォントについて書いています。私はそれらの記事を書き直そうとはしません。Chromeは特に「font-display」の仕様に取り組み、2GでWebフォントのダウンロードタイムアウトを0秒に減らすことによって、改善するために多くの作業を行っています。Webフォントの実装に役立つリソースをいくつか紹介します。パスで、ブラウザがWebフォントをどのように処理するか。display」で、どのようにフォントが読み込まれか、どのように影響するか。font-display」で、フォントが表示されるブラウザごとの仕組み。downloads」で、ロードする文字の範囲を制限することで、フォントのダウンロードを最小に。Observerというライブラリを使ってFOITを最小限にする方法。Observerを組み合わせたボルトロンソリューション、非同期にフォントバンドルとWebストレージをロードする方法。optional」を使用しますが、まだどの環境でも動作しません。それが対応するまでの間は、Webフォントを遅延読み込みさせる2つの簡単な方法があります。繰り返しになりますが、私はFOUCを気にしません。私にとってプログレッシブエンハンスメントのように感じるからです。できるだけ早くコンテンツを表示して、スタイルを適用します。below.}</script>この「loadFont」を実行する2つの方法を紹介します。(blocking)これは最も簡単な方法で、シンプルなページで素晴らしく機能します。スタイルシートをロード/パースすることはパース/描画するのをブロックするため、ドキュメントが読み込まれた後に他のモジュールを読み込んだ場合、遅くなるのでうまくいきません。(asynchronous)同期性を気にするなら、非同期のXMLHttpRequestを実行し、その結果で「style」のノードを作成することができます。xhr.responseText;document.head.appendChild(style);}};xhr.send();これをさらに進めて、インラインの<style>を作成するのではなく、ブラウザのキャッシュが既に準備されているので、前の方法のように<link>を追加することができます。あなたがブラウザのキャッシュを信用するなら。アップデート:これは明らかに完璧ではありません。最初のデモのように何もしなかったとしても、高速のLTE接続でFOUCを与えるでしょう。ポイントはビジターすべてがLTE接続をしているわけではありません、サイトで機能しているときにそれらについてあなたが考えることを私は望みます。HolmesはWebのタイポグラフィーとパフォーマンスについて驚くべき話を最近しました(YouTube)。FOUCがより穏やかになるように、フォールバックのフォントのx-heightをターゲットフォントに合わせる方法を説明しています。まとめWebフォントに問題はありません、ブログを美しくします。遅くなるのはイライラさせますが、使用する必要がある場合は使用してください。あなたのサイトを超高速で読み込まれるようにすることは同様に、あなたの責任でもあることを覚えておいてください。