Web ページでフォントを使用する際のヒント

ほとんどの Web ページでフォントが広く使用されていますが、エラーが含まれていることもよくあります。これらのエラーの多くは、Web パフォーマンス バジェットに悪影響を及ぼします。この記事の目的は、Web フォントの使用に関する情報を提供し、Web パフォーマンスの向上を支援することです。

ウェブページのレンダリング時に適用される階層に示されているように、フォント要素は、読み込まれるまで他の要素のレンダリングを遅らせる可能性があります。この遅延を適切に管理することは、累積レイアウトシフト (CLS) とユーザーの認識の両方にとって重要です。

フォント読み込みの問題

ページのフォントが読み込まれるまで、HTML および CSS レンダリング プロセス中のフォントの表示はブラウザーによって異なります。さまざまなブラウザーがこの状況をどのように処理するかをまとめると次のようになります。

この問題に対処するには、 ブラウザの動作について、font-display パラメータが導入されました。現在、92% のブラウザが font-display パラメータをサポートしています。

Font-Display は何をしますか?

ページの読み込みプロセス中、ブラウザによっては、フォントが完全に読み込まれるまでフォントの外観が異なる場合があります。たとえば、Safariブラウザの一部のバージョンでは、フォントが読み込まれるまでテキストが非表示になります。 フォント表示: スワップ CSS パラメータは、フォント ファイルが読み込まれるまでシステム フォントを使用してテキストを表示することで、この動作を標準化します。フォントが読み込まれると、システム フォントは目的のフォントに置き換えられます。使用例を次に示します。

@font-face {
 font-family: 'Awesome Font';
 font-style: normal;
 font-weight: 400;
 font-display: swap;
}

フォントのプリロード

使用クリティカル レンダリング パスの前にフォントを読み込むと、フォントの読み込み中にギャップが発生するのを防ぐことができます。

ボーナス: フォント使用に関する業界のアプローチ

SimilarTechのデータによると、インターネットの世界の重要なトレンドとスナップショットを見てみましょう。下の最初のグラフはフォントの使用状況を示しています。 10,000番目のグラフは上位100,000ページのフォント使用状況を示し、XNUMX番目のグラフは上位XNUMXサイトのフォント使用状況を示していますまずこれらのグラフを調べてみましょう。

上位5サイトと上位10,000サイトの間では、GoogleフォントとFont Awesomeの使用率に100,000%の差がある。これは、上位 10,000 のサイトでフォントの使用が最適化されていることを示しています。これは注目すべきトピックとして検討することをお勧めします。独自のソリューションで Web フォントを実装する方法を検討してください。

ボーナス2: GoogleフォントとFont Awesomeの使用統計

最初のボーナスを参考に、最も使用されているフォントライブラリの数値範囲を示す2つのグラフを調べることをお勧めします。ここでのユニークドメインの数は数百万を超えています。 そしてこの数百万はあなたのSEOの競合相手を表していますこれらのライブラリを他のライブラリよりも優れた最適な方法で使用することで、目立つことができます。

これらのヒントに従ってフォントの使用を最適化することで、Web のパフォーマンスとユーザー エクスペリエンスを大幅に向上させることができます。