損失管理型ストリーミングスロットリング 2025 — AVIF/HEIC帯域制御と品質SLO
公開: 2025年9月29日 · 読了目安: 5 分 · 著者: Unified Image Tools 編集部
AVIF や HEIC といった高圧縮フォーマットは劇的な帯域削減を実現する一方、再圧縮や CDN の遅延で品質が劣化しやすくなります。特に数万規模の同時アクセスでは、ストリーミングの帯域を制御しながら品質 SLO (Service Level Objective) を守ることが求められます。本稿では、損失管理を意識したストリーミングスロットリングの実装、品質モニタリング、ロールバック戦略を Web コーダー向けに解説します。
TL;DR
- スロットリングポリシー:
max_bandwidth = (region_bandwidth × 0.8) - priority_traffic
で算出し、スロットをHD
,SD
,Fallback
の 3 段階に割り当て。 - 品質SLOの設定: Δ SSIM < 0.03、Δ VMAF < 2、Δ LCP < 120ms を閾値とし、逸脱時に即座に品質ダウンシフト。
- Adaptive Payload: HTTP/2 Push は廃止し、Priority Hints と
Accept
ネゴシエーションでフォーマットを切り替え。 - シグナルルーティング: Edge ログから
loss_bucket
を収集し、SRE が Prometheus で監視。閾値を超えたら自動で JPEG/PNG に降格。 - CI/CD 統合: image-quality-budgets-ci-gates を使って、ビルド時に ΔSSIM, ΔPSNR を測定。影響が高い更新はアラート。
スロットリングアーキテクチャ
レイヤ | 役割 | ツール | 主要メトリクス |
---|---|---|---|
Edge Rate Limiter | 帯域スロット制御 | Cloudflare WAF / Fastly Compute@Edge | x-loss-bucket , throughput |
Origin Controller | フォーマット切替 | Lambda@Edge / Cloudflare Workers | Accept 判定、SLO ステータス |
Quality Monitor | 品質SLO監視 | performance-guardian, Grafana | ΔSSIM, ΔVMAF, Error Rate |
CI Gate | 事前検証 | image-quality-budgets-ci-gates | ΔPSNR, ΔLCP |
帯域スロット計算
// edge/throttle.ts
export function assignSlot({ regionBandwidth, priorityTraffic, currentUsers }: {
regionBandwidth: number
priorityTraffic: number
currentUsers: number
}) {
const max = Math.max(0, regionBandwidth * 0.8 - priorityTraffic)
const perUser = max / Math.max(currentUsers, 1)
if (perUser >= 350_000) return 'HD' // AVIF 2x
if (perUser >= 180_000) return 'SD' // WebP fallback
return 'Fallback' // JPEG progressive
}
Edgeでのフォーマット切替
// workers/image-router.js
addEventListener('fetch', event => {
event.respondWith(handle(event.request))
})
async function handle(request) {
const slot = assignSlot(await getRegionMetrics(request))
const accept = request.headers.get('Accept') || ''
if (slot === 'HD' && accept.includes('image/avif')) {
return fetchAsset(request, 'avif')
}
if (slot !== 'Fallback' && accept.includes('image/heic')) {
return fetchAsset(request, 'heic')
}
return fetchAsset(request, 'jpeg')
}
fetchAsset
では Cache-Control
をスロットごとに変え、低品質版を短めにキャッシュします。
品質モニタリング
performance-guardian のエージェントから、フィールドデータを集めて品質 SLO を監視します。
sendToGuardian('image_quality', {
deltaSSIM,
deltaVMAF,
slot,
userAgent,
throughput: navigator.connection?.downlink || 0,
lcp: getCurrentLCP()
})
Grafana では以下の SLO を定義します。
slo:
name: image-delivery-loss
target: 99.5
window: 7d
indicator:
ratio:
success_metric: sum(rate(image_quality_good[5m]))
total_metric: sum(rate(image_quality_total[5m]))
image_quality_good
は ΔSSIM, ΔVMAF が閾値内であるイベント数です。SLO 違反時には自動で slot = Fallback
を強制します。
ビルド時の品質検証
image-quality-budgets-ci-gates の設定例です。
{
"budgets": [
{
"pattern": "public/images/**/*.avif",
"compareWith": "baseline",
"thresholds": {
"ssim": 0.03,
"vmaf": 2,
"psnr": 1.5
}
}
]
}
CI では差分が閾値を超えた場合にビルドを停止し、Slack に通知します。
ロールバック戦略
- 自動ロールバック:
slot = HD
の失敗率が 30% を超えたら、即座にSD
に降格し、2 分ごとに再判定。 - ヒューマンレビュー: 品質チームが 画像比較スライダー のリンクを確認し、視覚的に問題がないか評価。
- CDN purge: Fallback 選択後は
surrogate-key
を使って問題のあるバリエーションをパージ。
AB テストとユーザー影響
ストリーミングスロットリングは UX に影響するため、AB テストで検証します。
指標 | 目的 | 計測ツール |
---|---|---|
コンバージョン率 | 画質低下が売上に与える影響 | GA4 / Snowplow |
再訪率 | ユーザーの満足度 | Mixpanel |
サポート問い合わせ件数 | 品質低下に関する苦情 | Zendesk |
チェックリスト
- [ ] スロット割当に地域帯域・優先トラフィックが反映されている
- [ ] ΔSSIM / ΔVMAF のフィールドデータが収集されている
- [ ] SLO アラートが SRE に通知される
- [ ] CI で AVIF/HEIC の品質差分が検出される
- [ ] ロールバック時の CDN パージ手順が自動化されている
- [ ] AB テストで UX 指標が監視されている
まとめ
損失管理型のストリーミングスロットリングは、帯域節約と品質保証の両立に不可欠です。リアルタイムの帯域メトリクスと品質 SLO を組み合わせ、フォーマット切替やロールバックを自動化することで、大規模トラフィック下でも安定した画像体験を提供できます。Web コーダーは、配信実装と監視基盤をセットで設計し、品質劣化を早期に検知・是正する体制を整えましょう。
関連ツール
関連記事
Service Worker画像プリフェッチ予算管理 2025 — Priority RulesとINP健全化の実践
Service Workerでの画像プリフェッチを数値管理し、INPや帯域を悪化させずにLCPを改善するための設計ガイド。Priority Hints、Background Sync、Network Information APIの統合手法を解説。
WASMビルドパイプラインで画像最適化を自動化 2025 — esbuildとLightning CSSの統合レシピ
WASM対応ビルドチェーンで画像の派生生成・検証・署名を自動化する実装パターン。esbuild、Lightning CSS、Squoosh CLI を統合し、CI/CDで耐障害性を確保する方法を整理。
画像圧縮 完全戦略 2025 ─ 画質を守りつつ体感速度を最適化する実践ガイド
Core Web Vitals と実運用に効く最新の画像圧縮戦略を、用途別の具体的プリセット・コード・ワークフローで徹底解説。JPEG/PNG/WebP/AVIF の使い分け、ビルド/配信最適化、トラブル診断まで網羅。
CDNサービスレベル監査 2025 — 画像配信SLAを可視化する監査基盤
マルチCDN環境で画像SLAを証明するための監査アーキテクチャ。計測指標、証跡収集、ベンダー交渉に使えるレポーティング手法を紹介。
Core Web Vitals 実践モニタリング 2025 — エンタープライズ案件のSREチェックリスト
エンタープライズ規模のWeb制作チームがCore Web Vitalsを継続監視するためのSRE運用テンプレート。SLO設計、メトリクス収集、インシデント対応まで包括的に解説します。
Edge画像配信オブザーバビリティ 2025 — Web制作会社のSLO設計と運用手順
Edge CDNとブラウザでの画像配信品質を観測するためのSLO設計、計測ダッシュボード、アラート運用をWeb制作会社向けに詳解。Next.jsとGraphQLを使った実装例付き。