SVGスプライトのブラウザキャッシュ戦略

SVGスプライトのブラウザキャッシュ

適切なキャッシュ設定により、SVGスプライトは最初のページ読み込み後に事実上無料になります。スプライトファイルの効果的なキャッシュ設定方法を説明します。

Cache-Controlヘッダー

外部SVGスプライトファイルには、コンテンツベースのファイル名と組み合わせた積極的なキャッシュを設定します：

Cache-Control: public, max-age=31536000, immutable

• public — CDNとプロキシのキャッシュを許可
• max-age=31536000 — 1年間（365日）キャッシュ
• immutable — ページリロード時でも再検証しないようブラウザに通知

コンテンツハッシュ

ファイル名にファイルコンテンツのハッシュを含めます（例：sprite.a1b2c3d4.svg）。アイコンを追加または変更するとハッシュが変更され、キャッシュをバイパスする新しいURLが作成されます。

CDNキャッシュ

CDN（CloudFront、Cloudflare、Fastly）を使用する場合、CDNがCache-Controlヘッダーを尊重すること、SVGコンテンツタイプが圧縮用に設定されていること、スプライトが異なるサブドメインにある場合はCORSヘッダーが存在することを確認してください。

Service Workerキャッシュ

プログレッシブWebアプリでは、Service Workerでスプライトをキャッシュしてオフラインでもアイコンを利用可能にします。

インライン vs 外部キャッシュ

インラインスプライトは個別にキャッシュできません — HTMLドキュメントの一部です。これが主要なトレードオフです：インラインスプライトはすべてのページ読み込みでゼロレイテンシーですがページ間キャッシュはなし、外部スプライトは1回のダウンロードコストがありますがその後のページではキャッシュされます。