Webフォントを高速化するための5つのステップ

フォントファイルをカスタマイズし、ロード戦略を最適化して最大速度+最小FOUTを実現します







以前の投稿では、システムフォントとWebフォントに対するそれらの利点について書きました。私は「システムフォントファースト」アプローチを支持し、システムフォントと比較して、Webフォントは（a）パフォーマンスに悪影響を及ぼし、（b）より多くのデータを使用し、（c）サイ​​トの電力消費を増加させる可能性があると主張しました。しかし、WebフォントのないWebは、それほど面白くありません。おそらく、Webフォントをより責任を持って使用することで、欠点を最小限に抑えながら、すべての利点を得ることができます。



このチュートリアルの最初の部分では、最小限の労力で最大の影響を与えると思われるWebフォントのパフォーマンスを向上させる5つの方法について説明します。



彼のサイトでWebフォントについて広範囲に書いたZachLesermanの功績です。彼のすべての記事、特にフォント読み込みチェックリストと フォント読み込み戦略の包括的なガイド（これは非常に包括的です）は読む価値 があり、どちらもこの投稿を書いているときに非常に役立つことがわかりました。

, , :



(typeface) — , . ( , , ). Helvetica — . .



(font) — . , , , , «Helvetica Bold Italic 10 ». , ( , ).

1.

Web Open Font Format 2.0（woff2）は、執筆時点でWebフォント用の最小かつ最も効率的なファイル形式です。 CSSで@ font-face at-rulesを使用する場合は、ttfなどの古くて効率の悪いファイル形式の前にwoff2フォントがレンダリングされることを確認してください。ブラウザは、ファイルが大きい場合でも、リスト内で理解できる最初のフォントを使用します。

@font-face {
  font-family: 'Typefesse';
  src: url('typefesse.woff2') format('woff2'),
    url('typefesse.woff') format('woff');
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

IE8のサポートが必要ない場合は、woff2とwoff以外は必要ありません。IE11のサポートが必要ない場合は、woff2のみが必要です。



ttfファイルしかない場合（たとえば、Google Fontsからフォントをダウンロードした場合）、Online FontConverterなどのツールを使用して変換する必要があり ます。完全にオープンソースのフォントを使用していない場合は、最初にライセンスで許可されているかどうかを確認してください。

2.記述子font-displayを使用します

フォントの読み込み戦略を理解し始めると、よく目にする2つの頭字語があります。

1. 不可視テキストのフラッシュ（foit）は、ブラウザがWebフォントをロードする前にテキストが不可視である期間です。
2. スタイルなしテキストのフラッシュ（fout）は、ブラウザがWebフォントをロードする前に、フォールバックフォントを使用してテキストがレンダリングされる期間です。

上記のいずれも完璧ではありませんが、Webフォントを使用している場合、ユーザーが最初にWebサイトにアクセスしたときに発生する可能性があります（2番目のページが読み込まれると、ブラウザーはそのフォントからフォントを提供できるようになります）キャッシュ）。前のものからat-rulefont-faceを取得し、font-display記述子を追加する と、どちらを優先するかをブラウザーに伝えることができます。

@font-face {
  font-family: 'Typefesse';
  src: url('typefesse.woff2') format('woff2'),
    url('typefesse.woff') format('woff');
  font-display: swap;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

フォント表示の値は5つあります。まず、autoがデフォルトのブラウザの動作です（ほとんどのブラウザはfoitを好みます）。さらに4つあります。

スワップ

swapは、Webフォントがロードされるまでフォールバックフォントを使用してテキストを表示することをブラウザに通知します（つまり、foutを使用します）。5秒でも5分でも、フォントがダウンロードされるとすぐに置き換えられます。これは、Webサイトの訪問者がコンテンツをすぐに読み始めることができるため、優れた基盤ですが、大きなレイアウトのずれを防ぐために、同様のオプションを必ず選択してください（この記事シリーズのパート2では、フォールバックオプションについて説明します）。フォントの変更。

ブロック

Webフォントが読み込まれるまでブラウザがテキストを非表示にする場合（つまり、foitを使用する場合）、font-display：blockを使用できます。ただし、テキストが永久に非表示になることはありません。フォントが一定期間（通常は3秒）読み込まれない場合でも、ブラウザはフォールバックフォントを使用し、読み込まれた後にWebフォントに置き換えます。



画像の見栄えが悪いと思われるため、これが最善の選択肢であると思われる場合は、テキストが表示されていない場合、ページを使用できず、コンテンツを読み取ることができないことに注意してください。

後退する

フォールバックはスワップに似ていますが、2つの違いがあります。

1. これは、テキストが非表示になる非常に短い（〜100ms）「ブロック」期間で始まり、その後、フォールバックフォントが表示されます。
2. Webフォントが短時間（約3秒）ロードされない場合、フォールバックフォントはページの終わりまで使用されます。

ユーザーが最初にサイトにアクセスしたときにWebフォントが表示されるかどうかを心配していない場合（ユーザーはおそらくそれほど気にしないでしょう）、フォールバックを選択することをお勧めします。

オプション

オプションはフォールバックに似ていますが、フォントの読み込みに非常に短い時間（〜100ms）が与えられ、その後は置き換えられません。ただし、接続が遅すぎてフォントを読み込めない場合に、ブラウザがフォント要求を中止することを決定できる追加機能があります。

foit/fout — , . ( . - Mitt Romney). JavaScript ( ).

3.

foit / fout期間を最小限に抑えるために、Webフォントファイルをできるだけ早くロードしたいと考えています。 link rel = "preload"



HTMLhead



で使用 すると、 フォントのフェッチを早く開始するようにブラウザに指示できます。フォントファイルのURLにhead



属性href



を設定して、（cssの前に） 次のタグを追加し ます。



link rel="preload" href="/typefesse.woff2" as="font" type="font/woff2" crossorigin







このタグを追加すると、今すぐフォントファイルのダウンロードを開始するようにブラウザに指示しますが、通常はダウンロードしません。 CSSで特定のフォントへのリンクが見つかり、それを使用するdom要素が見つからなくなるまで開始します。



ブラウザは通常、現在のページで必要な場合にのみフォントをロードするのに十分スマートです。プリロードを使用すると、この動作が無効になり、使用していないときでもブラウザにフォントのダウンロードが強制されます。このため、常に各フォントの1つの形式のみをプリロードします（woff2がある場合）。



プリロードするフォントが多いほど、この方法から得られるメリットは少なくなるため、「折り目より上」に表示されるフォント（ユーザーがスクロールせずに表示する最初の100vh）を優先します。



Yoav Weissによるこの記事でプリロードの詳細を読むことができます： プリロード：それは何に適していますか？

4.フォントファイルを取得します

フォントのサブセットを作成することにより、必要なグリフ（グリフは単一の文字または1文字）のみを含む新しい小さいフォントファイルを生成できます。私が使用 フォントSubsetterツールを一致させるためにすべてのフォントにスペースグロテスク太字フォント のみ基本ラテン文字を含めるには、このサイト上の見出しに使用します。これにより、woff2バージョンのファイルサイズが30KBから7KBに減少しました。



サブセットは強力なツールですが、いくつかの潜在的な欠点があります。ユーザー生成コンテンツ、人名、または地名を表示するWebサイトを作成する場合は、26の標準文字、10の数字、および英語で一般的な数文字以外の文字を使用する必要があります。



少なくとも、発音区別符号について考える必要があります。発音を変える文字の上または下に表示されるグリフです。それらは、フランス語、スペイン語、ベトナム語、およびギリシャ語やヘブライ語などのアルファベットからの音訳（または「ローマ字化」）テキストを含む言語で一般的です。また、外来語（別の言語から取られた単語）にも表示されます。



過度にサブセット化する場合は、1つの単語にフォントの組み合わせが含まれることもあります。







日曜大工について書きたい場合は、見出しに使用するフォントサブセットファイルをカスタマイズする必要があるかもしれません。 「â」と「é」（アクセント付き）の形式が、これらの文字のアクセントのないバージョンと一致しないことに注意してください。



幸い、サイトのすべてのページでさまざまな文字を手動で確認する必要はありません。 グリファンガー2つのことを行うコマンドラインツールです。1つは、Webページをクロールし、使用中のUnicode文字範囲を決定します（これらの範囲は、基本ラテン文字、キリル文字、タイ語などのスクリプトまたは言語に対応します）。次に、フォントファイルのサブセットであり、指定された範囲の文字のみを含む新しいバージョンを出力します。



Glyphhangerの使用を開始するのは少し難しい場合があります（Pythonとpipが必要です）-Sarah Sueidanは、この記事で彼女がどのようにそれを行ったかを説明しています： Web用のフォントファイルを最適化および変換するためにmacOSでGlyphhangerを設定する方法。



ファイル形式の変更と同様に、フォントライセンスでのサブセットが許可されていることを確認してください。

5.フォントを自分で配置します

これは、他のほとんどのように、普遍的なルールではありません。あなたのようなホスティングサービスを使用する理由2つの良いの理由があります Googleのフォントや アドビフォント：



これは、多くの場合、インターネット上の特定の書体を使用するための最も安いまたは唯一の合法的な方法です。これらのサービスのいずれかを使用せざるを得ない場合は、フォント表示記述子のサブセット化または追加をサポートしているかどうかを確認してください。

それらは便利です：あなたのサイトにhtmlの行をコピーして貼り付けることは他の方法よりも速くなります：フォントファイルをダウンロードし、フォントファイルの変換とサブセットを作成し、そして各重みとスタイルの@ font-faceat-rulesを書きます。



単に便宜上GoogleFontsを使用している場合は、 google-webfonts-helperをご覧ください。このツールを使用すると、完全なgoogleフォントセットから独自のWebフォントパッケージを作成し、必要な重みと文字セットを定義して、必要なすべてのcssファイルとフォントファイル（最新の形式）を含む1つのダウンロードを提供できます。

神話＃1 Webフォントについて

（Google Fontsで繰り返されている）ユーザーが以前に同じソースから同じフォントをダウンロードするサイトにアクセスしたことがある場合、ブラウザはそれらを再度ダウンロードする必要がないという主張を聞いたことがあるかもしれません。キャッシュされます..。



かつてこれは真実だったかもしれませんが、これが何かに影響を与える十分に一般的な現象であるという証拠を見つけることができません。実際、Google ChromeとSafariはどちらも、追跡の問題のため、ドメイン間でキャッシュされたサードパーティリソースを共有することを明示的に禁止しています。

ホストされているサービスを使用せず、代わりに自分でフォントをホストする理由のリストを次に示します。

パフォーマンス

ドメインの検索には時間がかかります。リソースヒントを使用して状況を緩和できますが 、新しいドメインへのTCP接続を開くと、常にパフォーマンスが低下します。これが、Google独自のサイト（web.devを含む）の一部がGoogleフォントの代わりにネイティブフォントを使用する理由である可能性があり ます。

守秘義務

Adobe Fontsなどの有料Webフォントサービスは、計算のためにページビューを決定する必要がありますが、厳密に必要な以上のデータを収集する場合があります。選択肢がある場合は、link rel = "stylesheet"



JavaScript（script



）の代わりにcss（） を使用してフォントをロードし 、サードパーティがユーザーに関して収集する可能性のあるデータの量を最小限に抑えます。



Google FontsはIPアドレスやユーザーエージェント文字列ほど多くのウェブサイト訪問者を収集していないようですが、Googleは無料でサービスを提供することに完全に無私無欲ではありません。Googleフォントを使用した50兆のページビューのそれぞれは、Webサイトが代わりに独自のフォントを使用している場合にGoogleが持つことのできないデータポイントです。

コントロール

オフラインフォントを使用すると、フォントの読み込み方法を完全に制御できるため、カスタムサブセットを提供したり、フォント表示オプションを定義したり、ブラウザがフォントファイルをキャッシュする期間を指定したりできます。

信頼性

サードパーティのサービスは、速度が低下したり、切断されたり、完全に機能しなくなったりする場合があります 。セルフホストフォントを使用すると、Webサイトが稼働している間、フォントを使用できます。

結論

これらの各ステップはそれ自体でメリットがありますが、一緒に使用すると大きな改善につながる可能性があります。この記事のいくつかの手順に従うことにした場合は、変更を加える前後にLighthouseや Web Page Testなどのツールを使用して、 個々の変更の効果を確認してください。



パート2では、JavaScriptフォントの読み込み戦略や可変フォントなど、より高度な手法をいくつか見ていきます。また、適切なフォールバックフォントを選択することの重要性を確認し、新しい頭字語であるFOFT、Flash Of FauxTextを紹介します。

---

コンピューター上の大量のブックマークでデザインの結果を失わないようにするために、Drin DesignTelegramチャネルを作成しました 。私が自分で見つけたすべてのクールで便利な資料（チュートリアル、記事、クールな人物のアカウントへのリンク）は、そこに投稿します。どうぞ食べて下さい。