コンテンツにスキップ
設定next.config.jsinlineCss

inlineCss

この機能は現在実験的であり、変更される可能性があります。本番環境での使用は推奨されません。お試しいただき、GitHubでフィードバックをお寄せください。

使用方法

<head>へのCSSのインライン化の実験的サポート。このフラグが有効になると、通常<link>タグを生成するすべての場所で、代わりに生成された<style>タグが使用されます。

next.config.ts
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    inlineCss: true,
  },
}
 
export default nextConfig

トレードオフ

インラインCSSを使用する場合

インラインCSSはいくつかのシナリオで有益です

  • 初回訪問者: CSSファイルはレンダリングブロックリソースであるため、インライン化により初回訪問者が経験する初期ダウンロードの遅延がなくなり、ページ読み込みパフォーマンスが向上します。

  • パフォーマンス指標: CSSファイルへの追加のネットワークリクエストを削除することで、インライン化はFirst Contentful Paint (FCP) およびLargest Contentful Paint (LCP) などの主要な指標を大幅に改善できます。

  • 低速接続: 各リクエストがかなりの遅延を追加する低速ネットワークのユーザーにとって、インラインCSSはネットワーク往復を削減することで、顕著なパフォーマンス向上を提供できます。

  • アトミックCSSバンドル（例：Tailwind）: Tailwind CSSのようなユーティリティファーストフレームワークでは、ページに必要なスタイルのサイズは、デザインの複雑さに対してO(1)であることがよくあります。これにより、現在のページのスタイル全体が軽量でページサイズとともに増加しないため、インライン化が魅力的な選択肢となります。Tailwindスタイルをインライン化することで、ペイロードを最小限に抑え、追加のネットワークリクエストの必要性をなくし、パフォーマンスをさらに向上させることができます。

インラインCSSを使用しない場合

インラインCSSはパフォーマンスに大きなメリットをもたらしますが、最善の選択ではないシナリオもあります。

  • 大規模なCSSバンドル: CSSバンドルが大きすぎる場合、インライン化するとHTMLのサイズが大幅に増加し、Time to First Byte (TTFB) が遅くなり、低速接続のユーザーにとってはパフォーマンスが悪化する可能性があります。

  • 動的またはページ固有のCSS: スタイルが非常に動的であったり、異なるCSSセットを使用するページがあるアプリケーションでは、インライン化すると、すべてのページの完全なCSSを繰り返しインライン化する必要があるため、冗長性と肥大化につながる可能性があります。

  • ブラウザキャッシュ: 訪問者がサイトに頻繁に戻る場合、外部CSSファイルはブラウザがスタイルを効率的にキャッシュできるようにし、後続の訪問でのデータ転送を削減します。CSSをインライン化すると、このメリットはなくなります。

これらのトレードオフを慎重に評価し、サイトのニーズに合わせた最良の結果を得るために、クリティカルCSS抽出やハイブリッドアプローチなどの他の戦略とインライン化を組み合わせることを検討してください。

知っておくと良いこと:

この機能は現在実験的であり、いくつかの既知の制限があります。

  • CSSのインライン化はグローバルに適用され、ページごとに設定することはできません。
  • スタイルは初期ページロード中に重複します。SSR用の<style>タグ内とRSCペイロード内です。
  • 静的レンダリングされたページにナビゲートする場合、重複を避けるために、スタイルはインラインCSSではなく<link>タグを使用します。
  • この機能は開発モードでは利用できず、本番ビルドでのみ機能します。