フォントは多くの場合、読み込みに時間がかかる大きなファイルです。一部のブラウザでは、フォントが読み込まれるまでテキストが非表示になり、非表示テキストのフラッシュ(FOIT)が発生します。
Lighthouse のフォント表示監査が失敗する仕組み
Lighthouse では、非表示のテキストをフラッシュする可能性のあるフォント URL にフラグが付けられます。
![Lighthouse におけるウェブフォントの読み込み時にテキストの表示が維持されることを示すスクリーンショット](https://developer.chrome.google.cn/static/docs/lighthouse/performance/font-display/image/a-screenshot-the-lightho-15d52429afc09.png?authuser=6&hl=ja)
非表示のテキストが表示されないようにする方法
font-display
API は、font-face
スタイル内で使用したときにフォントがどのように表示されるかを示します。次の font-display
値は、カスタム フォントの準備ができていない場合にシステム フォントを使用するようにブラウザに指示します。
swap
optional
fallback
CSS の例
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'),
url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
format('woff2');
font-display: swap;
}
Google Fonts の例
Google Fonts URL の末尾に &display=swap
/&display=optional
/&display=fallback
パラメータを追加します。
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
/>
遅延フォントによるレイアウト シフトを回避する方法
一時的にシステム フォントを表示すると、FOIT がスタイル設定されていないテキストの点滅(FOUT)に置き換えられます。これにより、コンテンツをより早くレンダリングすることで FCP と LCP が改善されますが、一時的なシステム フォントがカスタム フォントに置き換わると、FOIT と FOUT はどちらも CLS に同じ影響を与えます。
フォント読み込みによる CLS の影響は、font-display: optional
と組み合わせたプリロードを使用することで軽減できます。ただし、プリロードを過度に使用すると、負荷の指標に悪影響を及ぼす可能性があります。フォントのプリロードによってパフォーマンスの低下が発生しないように、A/B テストを行うことをおすすめします。
スタック固有のガイダンス
Drupal
テーマでカスタム フォントを定義する場合は、@font-display
を指定します。
Magento
カスタム フォントを定義する場合は @font-display
を指定します。