Menu

inlineCss

使用方法

<head>内にCSSをインライン化する実験的なサポートです。このフラグが有効になっている場合、通常<link>タグを生成する箇所では、代わりに<style>タグが生成されます。

next.config.ts
TypeScript
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など）：TailwindCSSのようなユーティリティファーストのフレームワークでは、ページに必要なスタイルのサイズはデザインの複雑さに対して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>タグを使用します
  • この機能は開発モードでは利用できず、本番ビルドでのみ動作します