フォントの最適化

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