ウェブフォントをプリロードして読み込み速度を改善

この Codelab では、rel="preload" を使用してウェブフォントをあらかじめ読み込み、スタイル設定されていないテキストのフラッシュ(FOUT)を除去する方法について説明します。

最適化を追加する前に、まずウェブサイトのパフォーマンスを測定します。

  1. サイトをプレビューするには、[アプリを表示] を押してから、[全画面表示] 全画面表示 を押します。
  2. Ctrl+Shift+J(Mac の場合は Command+Option+J)キーを押して DevTools を開きます。
  3. [Lighthouse] タブをクリックします。
  4. [カテゴリ] リストで [パフォーマンス] チェックボックスがオンになっていることを確認します。
  5. [レポートを生成] ボタンをクリックします。

生成された Lighthouse レポートの [最大クリティカル パス レイテンシ] に、リソースの取得順序が表示されます。

ウェブフォントがクリティカル リクエスト チェーンに含まれている。

上記の監査では、ウェブフォントは重要なリクエスト チェーンの一部であり、最後に取得されます。クリティカル リクエスト チェーンは、ブラウザによって優先され、フェッチされるリソースの順序を表します。このアプリケーションでは、ウェブフォント(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 をもう一度実行します。[最大クリティカル パス レイテンシ] セクションを確認します。

Pacifico-Bold ウェブフォントがプリロードされ、重要なリクエスト チェーンから削除

Pacifico-Bold.woff2 がクリティカル リクエスト チェーンから削除されていることに注目してください。アプリの早い段階でフェッチされます。

Pacifico-Bold ウェブフォントがプリロードされている

プリロードを使用すると、ブラウザは、このファイルを早めにダウンロードする必要があることを認識します。プリロードを正しく使用しないと、使用されていないリソースに対して不要なリクエストが行われ、パフォーマンスが低下する可能性があります。