要点：過剰処理の抑制でINP/電力消費を改善。 本ページでは、現場での判断軸/実装/検証までをまとめます。
定義
デバウンス/スロットルは画像最適化を再現可能/自動化するための運用設計です。
なぜ重要か
人手の最適化は再現性が低い。CIで誰がやっても同じ成果を。
実務での活用（判断基準付き）
- CIでSVGO/MozJPEG/Zopfliなどの最適化を一括。
- 命名/指紋でキャッシュをimmutable運用。
- 重い処理はWorker/OffscreenCanvasに移送。
実装例
# 例: GitHub Actionsで画像最適化ワークフロー
name: image-optimize
on: [push]
jobs:
optimize:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- run: npm ci
- run: npm run build:images # svgo / mozjpeg / zopfli 等
検証と失敗例
- 計測軸: ビルド時間/圧縮率/回帰率、CIの再現性。
- 失敗例: エンコーダ更新で画質回帰 / 命名不統一でキャッシュ破壊 / ワーカー未移送でINP悪化。
- 判断軸: CIに差分テスト・**可観測性（メトリクス/ログ）**が備わっている。
チェックリスト
- GitHub Actions等で再現可能なビルドを定義したか
- SVGO/MozJPEG/Zopfli等のバージョン固定と差分検証があるか
- 大量処理はワーカー/バッチでINPを悪化させないか
- 命名や指紋付与でimmutable運用ができているか