フォントの最適化

デスクトップのウェブページの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>