この Codelab では、rel="preload" を使用してウェブフォントをプリロードし、スタイルが適用されていないテキストのフラッシュ（FOUT）を排除する方法について説明します。
測定
まず、最適化を行う前にウェブサイトのパフォーマンスを測定します。
- サイトをプレビューするには、[View App] を押します。次に、[Fullscreen]
を押します。 - Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
- [Lighthouse] タブをクリックします。
- [カテゴリ] リストで [パフォーマンス] チェックボックスがオンになっていることを確認します。
- [レポートを生成] ボタンをクリックします。
生成された Lighthouse レポートの [Maximum critical path latency] に、リソースの取得シーケンスが表示されます。
上記の監査では、ウェブフォントはクリティカル リクエスト チェーンの一部であり、最後に取得されます。クリティカル リクエスト チェーンは、ブラウザによって優先的に取得されるリソースの順序を表します。このアプリケーションでは、ウェブフォント（Pacfico と Pacifico-Bold）が @font-face ルールを使用して定義されており、クリティカル リクエスト チェーンでブラウザによって最後に取得されるリソースとなっています。通常、ウェブフォントは遅延読み込みされます。つまり、重要なリソース（CSS、JS）がダウンロードされるまで読み込まれません。
アプリケーションで取得されるリソースのシーケンスは次のとおりです。
ウェブフォントのプリロード
FOUT を回避するには、すぐに必要なウェブフォントをプリロードします。このアプリケーションの Link 要素をドキュメントの先頭に追加します。
<head>
<!-- ... -->
<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>
as="font" type="font/woff2" 属性は、このリソースをフォントとしてダウンロードするようブラウザに指示し、リソースキューの優先順位付けに役立ちます。
crossorigin 属性は、フォントが別のドメインから取得される可能性があるため、CORS リクエストでリソースを取得する必要があるかどうかを示します。この属性がない場合、プリロードされたフォントはブラウザによって無視されます。
Pacifico-Bold はページヘッダーで使用されているため、さらに早く取得できるようにプリロードタグを追加しました。Pacifico.woff2 フォントは、スクロールしなければ見えない範囲にあるテキストのスタイルを設定するため、プリロードする必要はありません。
アプリケーションを再読み込みして、Lighthouse を再度実行します。[Maximum critical path latency] セクションを確認します。
Pacifico-Bold.woff2 がクリティカル リクエスト チェーンから削除されていることに注目してください。アプリの早い段階でフェッチされる。
プリロードを使用すると、ブラウザはこのファイルを早めにダウンロードする必要があることを認識します。ただし、正しく使用しないと、使用されないリソースに対して不要なリクエストが行われ、パフォーマンスが低下する可能性があることに注意してください。