プログレッシブエンハンスメントとパフォーマンスバジェット
プログレッシブエンハンスメントとパフォーマンスバジェットを組み合わせて、高速で耐障害性のあるWebサイトを構築。最小限のHTML体験から始め、バジェット制約内でCSSとJavaScriptで強化。
Tooling
詳細な説明
プログレッシブエンハンスメントとパフォーマンスバジェット
プログレッシブエンハンスメントは、最小限で機能的なHTML体験から始めて、強化されたCSSとJavaScriptを段階的に追加する開発哲学です。パフォーマンスバジェットと組み合わせると、高速でアクセシブルで耐障害性のあるWebサイトを構築するための強力なフレームワークが生まれます。
強化レイヤー
| レイヤー | 目的 | バジェットへの影響 |
|---|---|---|
| HTML | コンテンツ、構造、フォーム | 15-30 KB（最小限） |
| CSS | ビジュアルデザイン、レイアウト | 20-60 KB（価値を追加） |
| JavaScript | インタラクティビティ、動的機能 | 50-400 KB（最高コスト） |
バジェットティア
各強化レベルのバジェットティアを定義：
| ティア | バジェット | 体験 |
|---|---|---|
| コア（JSなし） | 50 KB | コンテンツ読了可、フォーム動作、リンクナビゲーション |
| エンハンスド（軽量JS） | 150 KB | スムーズアニメーション、フォームバリデーション、遅延画像 |
| フル（全JS） | 400 KB | クライアントサイドルーティング、オフラインサポート、リッチインタラクション |
2G接続のユーザーはコア体験（高速、機能的）。4Gユーザーはエンハンスド。WiFiユーザーはフル。
各ティアのテスト
JavaScriptを無効にしてサイトをテストし、以下を確認：
- すべてのコンテンツが表示される
- ナビゲーションが機能する
- フォームが正しく送信される
- 画像に適切なalt属性がある
- 真っ白なページにならない
フレームワークサポート
| フレームワーク | PE対応 | 備考 |
|---|---|---|
| Astro | 優秀 | アイランドアーキテクチャ、デフォルトでJS不要 |
| 11ty | 優秀 | 静的出力、JSを明示的に追加 |
| Next.js (SSR/SSG) | 良好 | サーバーレンダリング、ハイドレーションでJSを追加 |
| Remix | 良好 | プログレッシブエンハンスメント組み込み |
| Create React App | 不良 | クライアントのみ、すべてにJSが必要 |
ユースケース
パフォーマンスバジェットを伴うプログレッシブエンハンスメントは、多様なオーディエンスにサービスを提供するサイトに理想的です — 地方の2G接続ユーザーからギガビットWiFiのユーザーまで。政府のWebサイト、バンキングポータル、教育プラットフォームは、アクセシビリティと信頼性がナイスツーハブではなく要件であるため、このアプローチの恩恵を受けます。バジェットティアにより、コア体験は常に高速でありながらリッチな機能は対応可能なデバイスと接続で利用可能になります。