データURIのWebページへのパフォーマンス影響
データURIがページロード時間、Time to First Byte、パース時間、メモリ使用量にどう影響するか測定。ブラウザDevToolsでデータURIパフォーマンスをプロファイリングする方法を学ぶ。
Performance
詳細な説明
データURIパフォーマンスの測定
データURIは外部ファイル読み込みとは異なる複雑なパフォーマンス特性を持ちます。これらの影響を理解することで、アセットをいつインライン化するか情報に基づいた判断ができます。
正のパフォーマンス効果
- レイテンシ削減: 排除された各HTTPリクエストが1ラウンドトリップタイム（RTT）を節約。3Gモバイルネットワークでは200-500ms。
- 接続数削減: TCPとTLSハンドシェイクオーバーヘッドを削減
- DNSルックアップなし: CDNサブドメインにホストされた画像の場合
- アトミック配信: すべてのアセットが単一レスポンスで到着
負のパフォーマンス効果
- ドキュメントサイズ増大: インライン化されたアセットごとに33%増加
- 低いgzip圧縮率: Base64テキストは生のバイナリより20-30%圧縮率が低い
- パース時間増加: ブラウザがHTML/CSS解析中にBase64をデコードする必要がある
- メモリオーバーヘッド: Base64文字列がガベージコレクションまでメモリに残る
- プログレッシブレンダリングなし: 外部画像はプログレッシブにレンダリングできる
実世界のベンチマーク
20個の小さなアイコン（平均1.5 KB）を持つページの場合：
| メトリクス | 外部 | データURI | 差分 |
|---|---|---|---|
| リクエスト数 | 21 | 1 | -20 |
| 転送サイズ | 30 KB + ヘッダー | 42 KB | +40% |
| First Paint | 1200ms | 800ms | -33% |
| 完全読み込み | 1400ms | 800ms | -43% |
ユースケース
チームにWebパフォーマンス最適化提案を発表しており、30個の小さなスプライトをデータURIに変換することがサイトのCore Web Vitalsメトリクスにどう影響するかの具体的なデータが必要な場合。