inlineCss

使用方法

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

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はネットワーク往復を減らすことで顕著なパフォーマンス向上をもたらします。
Atomic 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ペイロード内の2回

静的にレンダリングされたページにナビゲートする場合、重複を避けるためにインラインCSSではなく<link>タグが使用されます

この機能は開発モードでは利用できず、プロダクションビルドでのみ動作します

使用方法

トレードオフ

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

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

On this page