画像最適化A/B計測設計【2025年版】：LCP/INP/CLSとCVRで効果検証する

目的と効果測定の軸

画像最適化はLCPに直結します。本記事は「施策の正当性をA/Bで検証」するための設計と実装を示します。主要KPIは LCP/INP/CLS + CVR（目標行動率）。

割当：クッキーで安定バケット

// middleware.ts
import { NextResponse } from 'next/server';
export const config = { matcher: ['/'] };
export function middleware(req: Request) {
  const url = new URL(req.url);
  const res = NextResponse.next();
  const v = (url.searchParams.get('ab') ?? '') || (req.headers.get('cookie')?.match(/ab=([AB])/i)?.[1]) || (Math.random() < 0.5 ? 'A' : 'B');
  res.cookies.set('ab', v, { path: '/', maxAge: 60*60*24*30 });
  return res;
}

実装：A（ベース）とB（最適化）

// app/page.tsx（概念例）
import Image from 'next/image';

function HeroA() {
  return <Image src="/hero.jpg" alt="" width={1280} height={720} />; // 既定
}

function HeroB() {
  return (
    <Image src="/hero.jpg" alt="" width={1280} height={720} priority sizes="(max-width:768px) 100vw, 1280px" />
  ); // priority + sizes 最適化
}

export default function Page() {
  const variant = typeof document === 'undefined' ? 'A' : (document.cookie.match(/ab=([AB])/i)?.[1] ?? 'A');
  return <main>{variant === 'A' ? <HeroA/> : <HeroB/>}</main>;
}

計測：web-vitalsをA/Bと紐付け

// app/web-vitals.ts
import { onLCP, onINP, onCLS } from 'web-vitals';

function send(kind: string, value: number) {
  const ab = document.cookie.match(/ab=([AB])/i)?.[1] ?? 'A';
  navigator.sendBeacon('/api/metrics', JSON.stringify({ kind, value, ab }));
}

onLCP(m => send('LCP', m.value));
onINP(m => send('INP', m.value));
onCLS(m => send('CLS', m.value));

サンプルサイズ推定（概略）

LCP中央値の差を検出したい場合、正確には分布仮定が必要ですが、近似として平均差のt検定を想定し、必要サンプルを粗く見積もれます。

// 二群平均差のサンプルサイズ近似
function sampleSize(effectMs: number, sdMs = 1200, alpha = 0.05, power = 0.8) {
  const z = (p: number) => Math.sqrt(2) * erfcinv(2 * p); // 近似
  const z1 = z(1 - alpha / 2), z2 = z(power);
  return Math.ceil(2 * Math.pow((sdMs * (z1 + z2)) / effectMs, 2));
}

解析：ダッシュボード指標

• LCP/INP/CLS のp50/p75、CVR、滞在、離脱。
• 端末/ネットワーク別にセグメントし、差分が一貫するかを確認。

まとめと推奨順序

1. 割当を安定化 → 2) ヒーロー画像の priority/sizes → 3) フォーマット自動化（AVIF/WebP） → 4) プリロード最適化 → 5) 結果をA/Bで検証し継続改善。