ウェブフォント読み込みをスピードアップする10の方法

フォントは最近、ウェブ上で人気のあるツールです.それはインターフェイスにカスタムタッチを追加し、より多くのオプションを可能にするため、ほとんどの現代のウェブサイトは、通常、Googleのフォントからカスタムフォントを使用します.しかし、Web上のフォントには多くのパフォーマンスがあります.フォントはしばしば数百キロバイトで、ウェブサイトを減速させて、もう一つのドメインにあります.幸いにも、これらの問題を解決することができます.ここでは10のヒントは、フォントをロードするパフォーマンスを向上させるウェブサイトです.

リスト

1 .自分のフォント
あなたがウェブサイトに行くとき、あなたはしばしばこのようなものを見ます:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

それは、ウェブサイトがフォントをロードするためにGoogleフォントを使用していることを意味します.それは簡単ですが、パフォーマンスのためにひどいです.Googleフォントには、フォントを得るための複雑な文字列があるので、パフォーマンスは悪いです.

ご覧のように、フォントをGoogleのフォントを読み込むことができます複雑です.しかし、あなたはどのように多くのリクエストを1つだけで自己をフォントをホストし、配置する必要が減少することができます@font-face 外部スタイルシートの代わりにCSSバンドル内で宣言を行います.道具Google Webfonts Helper これに便利です.

2 .現代のWebフォント形式の使用
フォントは、彼らのフォーマットがどのように働くかについて、ウェブ上のイメージのようです.画像を使用すると、AVIFやWebPのような近代的なWeb形式はPNGとJPEGのような圧縮形式に置き換えられます.同様に、WebフォントにはWoffとWoff 2があり、TrueTypeとOpenType(TTFとOTF)のような形式に優れた圧縮を提供します.さらに、Webフォントはほぼ普遍的にサポートされています.

この点では、ほぼ普遍的なブラウザのサポートのために、最善のことはWoff 2を使用してWoffs 2を使用していますが、Wofft 2を使用することもできますが、ユーザーの96 %がそれをサポートしています.

あなたのフォントのサブセット
フォントのサブセットは、必要な文字だけにフォントをトリミングすることを意味します.サブセットは、あなたが削除する文字を使用していない限り、任意の欠点を持たずに大量のサイズの節約をもたらすことができます.これを行う最も簡単な方法は、使用しない言語を削除するサブセットです.たとえば、取る、最も人気のあるフォントのいずれか.ラテン文字、キリル文字、ベトナム語、ギリシャ語を含むすべての言語を含めると、Wofft 2フォントのサイズは95 KBです.しかし、チャンスは、これらのすべての言語を使用していないです.英語以外のすべての文字を削除すると、サイズはわずか16 KBに縮小されます!フォントをサブセットする方法はたくさんあります.Everything Fonts , and fontTools .
サイズの縮小はパフォーマンスにとって有益ですが、より複雑にする気があればさらに良いことができます.ワイド文字の範囲でサブセットの代わりに、あなたが使用する正確に含めるようにサブセットすることができます.fonttoolsのようなツールで任意の文字リストでフォントをサブセットできます.このアプローチの問題は、使用するすべての文字を取得する複雑なビルドプロセスが必要です.または、もちろん、手動で各文字を追加することができますが、それは多くの仕事です🙁.

フォントの使用
デフォルトでは、正しいフォントが読み込まれるまで多くのブラウザでテキストが表示されません.その振舞いは目に見えないテキストのフラッシュと呼ばれます.いくつかの他のブラウザーは、テキストが表示されていないことを確認する読み込み中に、それがロードされている間、フォールバックフォントを使用してテキストを表示しますlayout shift .
幸いにも、フォントの読み込みをカスタマイズすることができますfont-display あなたのオプション@font-face 宣言.2つの推奨値font-display are swap and optional . swap 使用してフォールバックフォントを使用すると、カスタムフォントにロードされると、切り替えてoptional ブロックの負荷は、最大100 msのフォントをロードするために、それがない場合は、フォールバックフォントを使用します.

@font-face {
  font-family: 'Example';
  font-style: normal;
  font-weight: 400;
  src: local('Example'), local('Example'), url(https://example.com/example.woff2) format('woff2');
  font-display: swap;
}

font-display: optional それはすべてのレイアウトのシフトを防止し、テキストが見えないことを保証するので、ロードされるフォントを必要としないときに最適です.しかしfont-display: swap それは100 ms以上かかる場合でも、フォントのスワップので、ロードするフォントを必要とする場合に最適です.

カスタムフォントを使用してフォールバックフォントと一致します
フォントは、通常、間隔をあけられて、異なるサイズです.たとえば、Cameraフォントサイズが同じであっても、Merriweatherはジョージアより大きいです.これらの矛盾は、あなたが使うならば、レイアウトシフトを引き起こすことがありえますfont-display: swap そして、あなたが使うならば、フォントをより一貫していさせてくださいfont-display: optional . 幸いにも、あなたが使用しているWebフォントのように多くを見てあなたのフォールバックフォントを構成することができます.両方のフォントに一致する間隔とフォントサイズをカスタマイズすることによって行うことができます矛盾を削除します.これに役立つツールはFont Style Matcher , これは、2つの異なるフォントを見て、さまざまな間隔のプロパティを設定し、レイアウトシフトのデモを見ることができます.

cdnを使う
CDNSは、静的なコンテンツ配信をスピードアップするために最適です.彼らはコンテンツをあなたのユーザーに近づけ、配達をスピードアップする他の方法を提供します.あなたの他の静的資産のすべてと共にCDNにあなたのフォントをホストするのは良い考えです.CDNを使用しても、一般的にCDNSがあなたのソースサーバから要求を出すのと比較してより安いので、サーバー経費を減らすという利点があります.

フォントをプリロードする
プリローディングは、しばしばリソースをダウンロードしてリソースの優先度を増加させる必要があることをブラウザに知らせるので、様々なリソースにとって良いアイデアです.それはフォントと同じ考えです.ただし、必ずフォントをプリロードする必要はありません.それはブラウザが自動的にウェブサイトがダウンロードする前にページにフォントを使用するかどうかを検出するためです@font-face が存在する.今、あなたはいつもあなたが含むフォントを使うのを知っているかもしれません@font-face . もう一つの潜在的な問題があります.フォントが優先度が低い場合は、他のリソースが読み込みにかかる時間が長くなります.しかし、これらのことが両方とも本当でないならば、プリローディングはあなたのフォント荷を速めるすばらしい方法でありえます.

8 . use locale ()
フォントに応じて、ユーザーはしばしば自分のマシンにローカルインストールを使用しているフォントを持つことができます.彼らがそうするならば、あなたは簡単にカスタムフォントからどんなパフォーマンス劣化も防ぐためにローカルでフォントを使うことができます.を使用してlocal() あなたの声明@font-face src ルール.

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
        url('example.com/awesome-font.woff2') format('woff2')
}

この@font-face ユーザーがローカルにフォントを持っているかどうかを調べます.これは、フォントを持つユーザーは、コードに少し複雑さを追加しながら、ローカルのフォントを持っていないユーザーに不利益をしながら無料のパフォーマンスを向上させることを意味します.

キャッシュの実装
キャッシングは非常に重要な場合は、特にリピートの訪問者がたくさんある場合.キャッシュは、フォントが初めてダウンロードされた後、ディスクからロードすることができます.を介してキャッシュを実装することができますCache-Control ヘッダ.あなたがCDNのようなCloudFlareを使うならば、それはダッシュボードからするのが簡単です.さもなければ、単にあなたのフォント応答でヘッダーを送ることによって、あなたはそれをすることができます.

カスタムフォントを使用しないでください
私は、あなたが1つ来ることを見なかった賭け😉. 話しているsystem font stacks . システムフォントはボディテキストやブランディングにとって重要でない他のテキストにとっては素晴らしいです.
上のリンクのシステムフォントスタックを使ってシステムUIフォントを実装することができますsystem-ui フォントファミリー.

結論
それはすべてです!私はあなたがあなたのウェブフォントを最適化する方法を学ぶことを楽しんだことを望みます、そして、これがあなたがあなたのウェブサイトでフォントを最適化するのを援助したことを願っています.あなたがこれを読んで楽しむならば、必ずメーリングリストにサインアップしてくださいhere . 読書ありがとう!