inlineCss

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

使用法

CSSを<head>内にインライン化する実験的なサポートです。このフラグを有効にすると、通常<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のインライン化はネットワークのラウンドトリップを削減することで、顕著なパフォーマンス向上をもたらすことができます。
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>タグが使用されます。

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