フォントの読み込み中に非表示テキストを回避する

Katie Hempenius

Barry Pollard

なぜ重要なのでしょうか。

フォントはたいてい大きなファイルで、読み込みに時間がかかります。この問題に対処するため、一部のブラウザでは、フォントが読み込まれるまでテキストを非表示にすることがあります（「目に見えないテキストの点滅」）。

Largest Contentful Paint（LCP）は、テキストのレンダリングを待機して遅延する場合があります。パフォーマンスを最適化する場合は、「非表示テキストの点滅」（FOIT）を回避し、システム フォントを使用してコンテンツをすぐにユーザーに表示することをおすすめします。これにより、「スタイル化されていないテキストの点滅」（FOUT）が発生します。

フォントの表示に関するブラウザのデフォルト

一般的なブラウザでのデフォルトのフォント読み込み動作は次のとおりです。

テキストをすぐに表示する

このガイドでは、できる限り早くテキストを表示する 2 つの方法を紹介します。1 つ目は簡単で、優れたブラウザ サポートを利用できる方法です。2 つ目のアプローチは詳細ですが、さらに多くのオプションが提供される場合もあります。どのウェブサイトに最適なかは要件によって異なります。

方法 1: font-display を使用する

font-display は、フォントの表示戦略を指定するための API です。swap は、このフォントを使用したテキストがシステム フォントを使用してすぐに表示される必要があることをブラウザに伝えます。カスタム フォントの準備ができたら、システム フォントがスワップアウトされます。

/* Before */
@font-face {
  font-family: Helvetica;
}

/* After */
@font-face {
  font-family: Helvetica;
  font-display: swap;
}

最新のブラウザはすべてサポートしていますが、ブラウザが font-display をサポートしていない場合、ブラウザは引き続きそのデフォルトの動作に従ってフォントを読み込みます。

方法 2: 読み込まれるまでカスタム フォントを使用する

もう少し作業すれば、よりカスタマイズされたアプローチを検討できます。

このアプローチは、次の 3 つの部分に分かれています。

• CSS をリファクタリングして最初のページ読み込み時にカスタム フォントを使用し、最初はカスタム フォントを使用しないようにしましょう。これにより、ブラウザはシステム フォントを使用してテキストをすぐに表示します。
• CSS Font Loading API を使用してカスタム フォントが読み込まれたことを検出する
• カスタム フォントを使用するようにページのスタイルを更新します。

// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");

// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);

// Load the font
font.load();

// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
  // Update the CSS to use the fonts
});

これは、FontFaceObserver ライブラリでも実現できます。このライブラリの中には、より使いやすい API であるものもあります。

これにより、フォントを読み込む際に考慮すべき事項が増えます。たとえば、すべてのフォントを一度に読み込むことができ、各フォントの読み込み時に複数のレイアウトを実行する必要がなくなります。また、接続速度が遅いユーザーやデータを保存しているユーザー向けにフォントを読み込まないサイトもあります。

確認

Lighthouse を実行して、サイトが font-display: swap を使用してテキストを表示していることを確認します。

1. Ctrl+Shift+J キー（Mac の場合は command+option+J キー）を押して DevTools を開きます。
2. [Lighthouse] タブをクリックします。
3. [カテゴリ] リストで [パフォーマンス] チェックボックスがオンになっていることを確認します。
4. [Generate report] ボタンをクリックします。

[ウェブフォントの読み込み時にテキストが表示されるようにする] の監査に合格していることを確認します。