Webフォントをプリロードして読み込み速度を向上させる

このコードラボでは、rel="preload"を使用してWebフォントをプリロードし、スタイルが設定されていないテキストのちらつき(FOUT)を取り除く方法を説明します。

測定 #

まずは最適化の追加の前に、Webサイトのパフォーマンスを測定しましょう。1. To preview the site, press View App. Then press Fullscreen fullscreen. 1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.

  1. Click the Lighthouse tab.
  2. Make sure the Performance checkbox is selected in the Categories list.
  3. Click the Generate report button.

生成されるLighthouseレポートには、Maximum critical path latencyの下にリソースのフェッチ順が表示されます。

Webフォントがクリティカルリクエストチェーンに存在します。

上記の監査では、Webフォントはクリティカルリクエストチェーンの一部であり、最後にフェッチされています。クリティカルリクエストチェーンは、ブラウザが優先順位を付けてフェッチするリソースの順序を表します。このアプリケーションでは、Webフォント(PacficoとPacifico-Bold)は、@font-faceルールで定義されており、クリティカルリクエストチェーンでブラウザがフェッチする最後のリソースとなっています。通常、Webフォントは遅延読み込みされるため、クリティカルリソース(CSS、JS)がダウンロードされるまで読み込まれません。

アプリケーションでフェッチされたリソースの順序は次のとおりです。

Webフォントは遅延読み込みされます。

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のWebフォントがプリロードされ、クリティカルリクエストチェーンから削除されています

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

Pacifico-Bold Webフォントはプリロードされています

preloadを使用すると、ブラウザはこのファイルを早期にダウンロードする必要があることを認識します。preloadが正しく使用されていない場合、使用されていないリソースが不要に要求されてしまうため、パフォーマンスが低下する可能性があることに注意しておくことが重要です。

最終更新: 記事を改善する