この Codelab では、rel="preload" を使用してウェブフォントをプリロードし、フォントを削除する方法を説明します。
スタイル設定されていないテキスト（FOUT）のフラッシュや、
測定
最適化を加える前に、まずウェブサイトのパフォーマンスを測定します。
- サイトをプレビューするには、[アプリを表示] を押します。[
全画面表示
。 - Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
- [Lighthouse] タブをクリックします。
- [カテゴリ] リストで [パフォーマンス] がオンになっていることを確認します。
- [Generate report] ボタンをクリックします。
生成された Lighthouse レポートの [クリティカル パスの最大レイテンシ] に、リソースの取得シーケンスが表示されます。
上記の監査では、ウェブフォントがクリティカル リクエスト チェーンの一部であり、最後に取得されます。クリティカル リクエスト チェーンは、ブラウザによって優先され、取得されるリソースの順序を表します。このアプリケーションでは、@font-face ルールを使用してウェブフォント（Pacfico と Pacifico-Bold）が定義され、クリティカル リクエスト チェーンでブラウザによって取得される最後のリソースになります。通常、ウェブフォントは遅延読み込みされます。つまり、重要なリソース（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 を再度実行します。[クリティカル パスの最大レイテンシ] セクションを確認します。
Pacifico-Bold.woff2 がクリティカル リクエスト チェーンからどのように削除されているかに注目してください。アプリケーションの早い段階で取得されます。
プリロードにより、ブラウザはこのファイルを事前にダウンロードする必要があることを認識します。適切に使用しないと、プリロードでは使用されていないリソースに対して不要なリクエストが行われ、パフォーマンスが損なわれる可能性があるので注意してください。