動画LQIPとポスター設計：高速初期表示の最短戦略
TL;DR: 初期“空白 + レイアウトジャンプ”を排除 するため (1) 固定 aspect-ratio 枠 (2) 支配色 or ぼかし超低解像度静止画 (3) 視認直前条件 preload の三層で 心理的待ち時間 を削減。巨大 poster / 自動 preload 乱用は LCP 帯域競合と INP 劣化を招く。LQIP は 900B 以下 / 解像関係の判読性確保 / フェード 150–250ms を指標とする。
1. 課題定義
- 動画読み込み遅延時の 空白・ジャンプ による LCP/CLS/INP 悪化
- poster の過剰サイズが 初期帯域占有 し CSS/フォント遅延
- 再生直前のデコード待ちにより 操作遅延(入力遅延)
- 異なる回線条件下でプレースホルダ品質統一が困難
2. プレースホルダ タクソノミー
支配色単色
最小バイト。内容推測性低。アスペクト維持と背景溶け込みに最適。
Blur LQIP
形状/コントラスト推測が可能。フェード切替で違和感最小。
Dominant Palette グラデ
2–3色線形グラデで雰囲気保持。Blur 生成コスト回避。
Vector/SVG Silhouette
抽象化が効く説明アニメ系で有効。生成コスト高。
3. 実装パターン (Next.js)
<!-- 1) 枠と LQIP 背景 -->
<div class="video-shell aspect-video relative bg-[--dominant] overflow-hidden rounded">
<div class="absolute inset-0 opacity-100 transition-opacity duration-200"
style="background-image:url(data:image/jpeg;base64,/9j...);background-size:cover;filter:blur(12px);transform:scale(1.05);"></div>
<video class="relative opacity-0 transition-opacity duration-200 will-change-opacity"
preload="metadata" playsinline muted controls
poster="data:image/jpeg;base64,/9j...">
</video>
</div>
<!-- 2) IntersectionObserver で条件 preload -->
observer.observe(shell, { rootMargin: '150px' });
// 可視手前で link[rel=preload as=video] を動的挿入
フェードは oncanplay で動画へ opacity-100 クラス付与し LQIP div を opacity-0。
4. 生成パイプライン
- ffmpeg で代表フレーム抽出:
ffmpeg -i in.mp4 -vf "select=eq(n\\,X)" -vframes 1 frame.jpg - ImageMagick で縮小 + ぼかし:
convert frame.jpg -resize 56x -blur 0x6 tiny.jpg - Dominant color 抽出:
convert frame.jpg -scale 1x1! -format %[pixel:p{0,0}] info: - base64 化 & JSON へ格納 (ビルド時生成)
- 再利用数 ≥ 8 であれば sprite (blur hash / tiny gradient) 併用検討
5. パフォーマンス計測
- LCP: poster/LQIP が LCP 候補にならないよう fold 内巨大画像を避ける
- INP: 再生クリック→再生開始の input delay を RUM でサンプリング
- Transfer: initial 2s バイト総量 & ネットワーク優先度競合
- Decode Time: PerformanceObserver + playback start の差分
- Abandon Rate: click 前離脱率 (LQIP 品質不足の兆候)
6. アクセシビリティ
- 動画は autoplay しない (ユーザ制御優先)
aria-labelか<figcaption>で文脈説明- 高コントラストモードで blur 背景が読みにくい場合に境界 overlay
- Reduced Motion 設定でフェード duration 短縮 (prefers-reduced-motion)
7. 失敗パターンと対策
高品質 poster 直接埋め込み
初期 200KB+ ネットワーク競合。→ 低解像度 LQIP + 遅延本体取得。
Blur 過剰 (半径 > 16)
色面化し内容推測性が失われる。→ 半径 6–10 で十分。
IntersectionObserver rootMargin 0
視認直後開始で操作遅延。→ 120–180px 手前。
長フェード (>400ms)
体感遅延増大。→ 150–250ms 以内。
8. チェックリスト
- aspect-ratio でレイアウト確保
- LQIP ≤ 900B / JPEG Q25〜35
- 支配色抽出済 (背景色定義)
- 条件 preload (rootMargin 150px)
- フェード 150–250ms / prefers-reduced-motion 対応
- 再生遅延計測 (INP 寄与)
- LCP 候補化していない
9. FAQ
- BlurHash / AVIF 超小を使う価値?
- 画像点数が多く再利用されるならキャッシュ効率で有利。単発動画では処理コストとサイズ差が小さい。
- Poster を外し背景のみは?
- 意味推測性が低下しクリック率低下の可能性。テキスト/アイコン重ねで補強する手法も。
公開日: 2025-09-06編集: gazou-compressor.jp