フォントの最適化

デスクトップ向けウェブページの82%がウェブフォントを使用しています。カスタムフォントは、サイトのブランディング、デザイン、クロスブラウザ/デバイス間の一貫性にとって重要です。しかし、ウェブフォントの使用がパフォーマンスの低下を招いてはいけません。

Next.jsには自動ウェブフォント最適化機能が組み込まれており、ビルド時にフォントCSSをインライン化することで、フォント宣言を取得するための余分なラウンドトリップを排除します。これにより、First Contentful Paint (FCP) と Largest Contentful Paint (LCP) が改善されます。

以下は、Next.jsがフォントを最適化する前後の例です。

最適化前は、追加のネットワークリクエストが必要でした:

<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />

最適化後、Next.jsはフォントCSSを自動的にインライン化します:

<style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face{font-family:'Inter';font-style:normal; }
</style>