CSS配信戦略の比較

戦略 HTTPリクエスト ブロッキング 重複 外部配信 メモリ効率
inline 0 なし あり 最適 低
link 1 (キャッシュ) あり なし 要設定 中
link-preload 1 (並列) 軽減 なし 不可 中
adoptable 0 Hydration時 なし JS必須 高

各戦略のデモ

1. inline

✓ 自己完結、外部配信向き

✗ CSSが重複

<style>...</style> x 2回

2. link

✓ ブラウザキャッシュ

✗ レンダリングブロッキング

<link href="..."> x 2回
HTTP Request: 1回 (キャッシュ)

3. link-preload

✓ 並列ロード

✗ 親ページのコントロール必要

<head>
  <link rel="preload" href="..." as="style">
</head>
...
<template>
  <link rel="stylesheet" href="...">
</template>

4. adoptable

✓ メモリ効率最高

✗ Hydration必須、FOUC可能性

CSSStyleSheet オブジェクト: 1個
採用したShadow DOM: 2個

推奨フロー

┌─────────────────────────────────────────────────────────────────────────────┐
│ ユースケース判定フロー                                                       │
└─────────────────────────────────────────────────────────────────────────────┘

 開始
   │
   ▼
 外部サイトに埋め込む？ ──Yes──► inline (自己完結が重要)
   │
   No
   │
   ▼
 親ページをコントロールできる？ ──No──► link (キャッシュ効く)
   │
   Yes
   │
   ▼
 大量のコンポーネントを使う？ ──Yes──► adoptable (メモリ効率重視)
   │
   No
   │
   ▼
 link-preload (バランス型)

ロード状況

計測中...