ウェブフォントの表示スワッピングを有効にして、あなたのウェブサイトの表示速度を向上させましょう

ウェブサイトの最適化は、Googleや他の検索エンジンで良いランキングを得るために非常に重要であり、世界中と競い合っている時には、毎ミリ秒が重要です。サイトのフォントの読み込みを遅延させることで、わずかな向上を得ることができます。

ウェブフォントはレンダリングブロッキングです

リソースがレンダーブロッキングである場合、サイトが最初のコンテンツペイントに到達する前に読み込む必要があります。最適化されたサイトでは、レンダーブロッキングリソースは絶対的に最小限に抑えるべきです。

ここでの欠点は明白です。クライアントがあなたのサイトが読み込まれる前に追加のリソースを読み込む必要がある場合、レンダーブロックリソースのダウンロードを始める前に、特に安全な接続とTCPハンドシェイクを行う必要があり、これがモバイルでの読み込み時間を数百ミリ秒延長する可能性があります。大きなブロッキングリソースを読み込んでいる場合、読み込み時間は他のホストの影響を受けることにもなります。

解決策はフォントの扱い方を変更することです。デフォルトでは、フォントはオプションではなく、正しいフォントでレンダリングされるまでテキストはすべてブロックされます。しかし、すべてのユーザーはArialやTimes New Romanなどのデフォルトフォントをインストールしているため、最初にこれらのフォントを表示し、その後Webフォントが読み込まれたら切り替えることが可能です。

この動作はあなたの中で指定できます。

@font-face

指令を使用して

font-display

パラメーター:

@font-face {


 font-display: swap;

}

ただし、Google Fontsを使用している場合、font-faceディレクティブは、フォントを追加するために提供されるCSSファイルに定義されます。したがって、直接編集することはできませんが、幸運なことにGoogleは最近、APIでfont-display: swapのサポートを追加しました。新しいフォントを追加する場合はデフォルトで設定されるはずですが、少し前にフォントを追加した場合は、&display=swapのURLパラメータを末尾に追加することで更新できます。

https://fonts.googleapis.com/css?family=Lobster&display=swap

それがあなたがする必要があるすべてです。フォントがswapに設定されると、レンダーブロッキングが停止します。サイトがデフォルトフォントで読み込まれ、その後すぐに更新されたフォントに切り替わるのを気づくかもしれません。この問題を最小限に抑えるために、メインのウェブフォントに最も近いデフォルトフォントを見つけてください。ほとんどのデスクトップユーザーは、ページの他の部分の読み込みと一緒にそれを気づかないでしょうが、ユーザーが遅いモバイル接続であれば、フォントが1秒後にポップするのに気づくかもしれません。

パフォーマンスのミリ秒をすべて絞り出す努力をしていないのであれば、別の選択肢を使うことができます：font-display: fallbackオプションは、短時間（ほとんどのブラウザで100msを超えない）ブロックをレンダリングし、その後、フォントが読み込まれる際にスワッピングにフォールバックします。これにより、良好な接続を持つほとんどのデスクトップユーザーにとってのフラッシングの問題は解消されますが、フォントがタイムリーに読み込まれない場合には、最悪の場合約100ms（ブラウザに依存）の読み込み時間が追加されます。

fonts.gstatic.comにプレコネクトする

このヒントはウェブフォントのレンダーブロッキングの要素には影響しませんが、特にGoogle Fontsの速度を向上させます。

クライアントが別のオリジンからリソースを取得する必要がある場合、TCPハンドシェイクを行い（サイトが今十年以内に作成された場合）、安全なHTTPS接続を確立しなければなりません。これを行うには時間がかかるため、不要な往復を行うとダウンロードが遅くなります。

これはまさにGoogle Fontsが行っていることです。まず、fonts.googleapis.comからCSSスタイルシートが読み込まれ、フォントに関するすべての情報が取得されます。その後、フォントフェイスのsrcパラメータが読み取られ、クライアントはfonts.gstatic.comに接続してフォントをダウンロードします。ここでの問題は、欲しいフォントファイルが別のオリジンのCSSスタイルシートの後ろに gated されていることです。

この問題を解決するには、fonts.gstatic.com に事前接続することができます。事前接続は、ブラウザにリンクを開く前に HTTPS ハンドシェイクを実行するよう指示する特別な link オプションです。これにより、このような2回の往復にかかる待機時間が大幅に削減されます。

次のlinkタグを使ってプリコネクトできます:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

crossorigin パラメータは、ブラウザに対して単純なDNSルックアップ（デフォルトの動作）ではなく、HTTPSハンドシェイクを実行するよう指示します。

フォントを自分で提供している場合は、ユーザーが再度訪れたときにフォントがキャッシュから読み込まれるように、Cache-Control ヘッダーが適切に設定されていることを確認する必要があります。また、フォントを自分でホストしたい場合は、CDNを使用することを検討すると良いでしょう。これにより、静的オブジェクトのリクエストのレイテンシが減少します。