Webフォントをプリロードして読み込み速度を向上させる
このコードラボでは、rel="preload"を使用してWebフォントをプリロードし、スタイルが設定されていないテキストのちらつき（FOUT）を取り除く方法を説明します。
測定 #
まずは最適化の追加の前に、Webサイトのパフォーマンスを測定しましょう。1. To preview the site, press View App. Then press Fullscreen 
. 1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
- Click the Lighthouse tab.
- Make sure the Performance checkbox is selected in the Categories list.
- Click the Generate report button.
生成されるLighthouseレポートには、Maximum critical path latencyの下にリソースのフェッチ順が表示されます。
上記の監査では、Webフォントはクリティカルリクエストチェーンの一部であり、最後にフェッチされています。クリティカルリクエストチェーンは、ブラウザが優先順位を付けてフェッチするリソースの順序を表します。このアプリケーションでは、Webフォント（PacficoとPacifico-Bold）は、@font-faceルールで定義されており、クリティカルリクエストチェーンでブラウザがフェッチする最後のリソースとなっています。通常、Webフォントは遅延読み込みされるため、クリティカルリソース（CSS、JS）がダウンロードされるまで読み込まれません。
アプリケーションでフェッチされたリソースの順序は次のとおりです。
Webフォントのプリロード #
FOUTを回避するには、すぐに必要なWebフォントはプリロードしておくことができます。このアプリケーションのLink要素をドキュメントのheadに追加してください。
<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がページのヘッダーで使用されているため、さらに早くフェッチできるようにpreloadタグを追加しました。Pacifico.woff2フォントは、展開表示の下にあるテキストのスタイルを設定するフォントであるため、それをプリロードしておく必要はありません。
アプリケーションを再読み込みして、Lighthouseをもう一度実行します。Maximum critical path latencyセクションを確認してください。
Pacifico-Bold.woff2がクリティカルリクエストチェーンからどのように削除されているかに注目してください。アプリケーションの早い段階でフェッチされています。
preloadを使用すると、ブラウザはこのファイルを早期にダウンロードする必要があることを認識します。preloadが正しく使用されていない場合、使用されていないリソースが不要に要求されてしまうため、パフォーマンスが低下する可能性があることに注意しておくことが重要です。