Core Web Vitalsを実際に直す — LCP・INP・CLSを数字で下げる順序

// web-vitals v4 — attribution ビルドを使えば「何が」遅かったのかまで一緒に来る
import { onLCP, onINP, onCLS, onTTFB } from 'web-vitals/attribution'

function send(metric) {
  const body = JSON.stringify({
    name: metric.name,
    value: Math.round(metric.value),
    rating: metric.rating, // good | needs-improvement | poor
    nav_type: metric.navigationType,
    path: location.pathname,
    // デバイスを区別せずに合算すると何も診断できない
    device: matchMedia('(max-width: 768px)').matches ? 'mobile' : 'desktop',
    conn: navigator.connection?.effectiveType,
    attribution: metric.attribution,
  })
  navigator.sendBeacon('/rum/vitals', body)
}

onLCP(send)
onINP(send)
onCLS(send)
onTTFB(send)

import { onLCP } from 'web-vitals/attribution'

onLCP(({ value, attribution: a }) => {
  console.table({
    TTFB: Math.round(a.timeToFirstByte),
    'リソース読込遅延': Math.round(a.resourceLoadDelay),
    'リソース読込時間': Math.round(a.resourceLoadDuration),
    'レンダー遅延': Math.round(a.elementRenderDelay),
    合計: Math.round(value),
    要素: a.target,
  })
})
// ┌──────────────────┬───────┐
// │ TTFB             │   412 │
// │ リソース読込遅延 │  1180 │  <-- 犯人
// │ リソース読込時間 │   340 │
// │ レンダー遅延     │    96 │
// │ 合計             │  2028 │
// └──────────────────┴───────┘

curl -s -o /dev/null \
  -w 'dns:%{time_namelookup}s  tcp:%{time_connect}s  tls:%{time_appconnect}s  ttfb:%{time_starttransfer}s  total:%{time_total}s\n' \
  https://shop.example.com/products/12345
# dns:0.021s  tcp:0.043s  tls:0.118s  ttfb:0.412s  total:0.588s

# キャッシュに当たったかどうかも一緒に見る — CDNミスはTTFBのよくある原因だ
curl -sI https://shop.example.com/products/12345 | grep -iE 'cache|age|server-timing'
# cache-control: public, max-age=0, s-maxage=300
# age: 0
# x-cache: MISS
# server-timing: db;dur=284, render;dur=96

<!-- ヒーロー画像: マークアップに置き、優先度を上げ、lazy は絶対に掛けない -->
<img
  src="/hero-1200.avif"
  srcset="/hero-800.avif 800w, /hero-1200.avif 1200w, /hero-1600.avif 1600w"
  sizes="(max-width: 768px) 100vw, 1200px"
  width="1200"
  height="675"
  fetchpriority="high"
  decoding="async"
  alt="夏シーズンの新商品"
/>

<!-- フォールバック: 本当にマークアップに置けないなら preload でスキャナーの代わりをする -->
<link
  rel="preload"
  as="image"
  href="/hero-1200.avif"
  imagesrcset="/hero-800.avif 800w, /hero-1200.avif 1200w"
  imagesizes="(max-width: 768px) 100vw, 1200px"
  fetchpriority="high"
/>

# どのリソースがLCPの前に帯域を持っていったのかを見る
npx lighthouse https://shop.example.com/ \
  --only-audits=largest-contentful-paint-element,render-blocking-resources,third-party-summary \
  --output=json --output-path=./lh.json --quiet

node -e "
const r = require('./lh.json');
for (const it of r.audits['third-party-summary'].details.items.slice(0, 5))
  console.log(it.entity.padEnd(28), Math.round(it.blockingTime) + 'ms blocking', Math.round(it.transferSize / 1024) + 'KB');
"
# Google Tag Manager        412ms blocking 148KB
# Intercom                  288ms blocking 231KB
# Hotjar                    134ms blocking  92KB

@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/pretendard-subset.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  /* ハングル完成形 + ASCII だけをサブセットに — フォント全体は数 MB になる */
  unicode-range: U+0020-007E, U+AC00-D7A3;
}

/* フォールバックフォントのメトリクスを実際のフォントに合わせてスワップ時の移動をなくす */
@font-face {
  font-family: 'Pretendard Fallback';
  src:
    local('Apple SD Gothic Neo'),
    local('Malgun Gothic');
  size-adjust: 103%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

body {
  font-family: 'Pretendard', 'Pretendard Fallback', sans-serif;
}

import { onINP } from 'web-vitals/attribution'

onINP(({ value, attribution: a }) => {
  console.table({
    入力遅延: Math.round(a.inputDelay),
    処理時間: Math.round(a.processingDuration),
    プレゼンテーション遅延: Math.round(a.presentationDelay),
    合計: Math.round(value),
    対象: a.interactionTarget,
    イベント: a.interactionType,
  })
})
// 入力遅延 34 / 処理時間 268 / プレゼンテーション遅延 92 / 合計 394
// 対象: button.filter-apply

// 悪い例: クリック一度でメインスレッドを380ms掴む
applyButton.addEventListener('click', () => {
  applyFilters(state) //  12ms
  rerenderTable(rows) // 260ms
  syncToServer(state) // 108ms
})

// 良い例: 目に見えるものを先に描き、残りはタスクを分けて譲る
applyButton.addEventListener('click', async () => {
  applyFilters(state)
  showPendingState() // ユーザーがすぐ見るフィードバックだけ同期実行

  await yieldToMain() // ここでブラウザが描画する
  rerenderTable(rows)

  await yieldToMain()
  syncToServer(state) // 画面と無関係な作業は最後に
})

function yieldToMain() {
  // scheduler.yield は譲歩後も優先度を保つので setTimeout より有利だ
  if ('scheduler' in globalThis && 'yield' in scheduler) return scheduler.yield()
  return new Promise((resolve) => setTimeout(resolve, 0))
}

/* 画面外のカードのレイアウトとペイントを飛ばす */
.product-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px; /* スクロールバーのジャンプを防ぐ想定サイズ */
}

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration < 120) continue
    console.warn('long task', Math.round(entry.duration) + 'ms', entry.attribution?.[0]?.name)
  }
}).observe({ type: 'longtask', buffered: true })

<!-- 属性は実際のピクセルサイズ、CSS は表示サイズ — 両方が必要だ -->
<img src="/thumb.avif" width="640" height="360" style="width: 100%; height: auto" alt="商品" />

/* 場所をあらかじめ取る — 広告が出なくても移動はない */
.ad-slot {
  min-height: 250px;
  contain: layout;
}

/* クッキーバナーはフローに入れずオーバーレイで浮かせる */
.cookie-banner {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
}

new PerformanceObserver((list) => {
  for (const shift of list.getEntries()) {
    if (shift.hadRecentInput) continue // ユーザー入力直後の移動は除外される
    for (const src of shift.sources) {
      console.log(shift.value.toFixed(4), src.node, src.previousRect, '→', src.currentRect)
    }
  }
}).observe({ type: 'layout-shift', buffered: true })
// 0.0821 <img class="hero"> DOMRect(0,180,...) → DOMRect(0,412,...)

{
  "ci": {
    "collect": {
      "url": ["https://staging.shop.example.com/", "https://staging.shop.example.com/products/12345"],
      "numberOfRuns": 5,
      "settings": { "preset": "desktop" }
    },
    "assert": {
      "assertions": {
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "total-blocking-time": ["error", { "maxNumericValue": 200 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
        "server-response-time": ["error", { "maxNumericValue": 600 }],
        "resource-summary:script:size": ["error", { "maxNumericValue": 180000 }],
        "resource-summary:image:size": ["warn", { "maxNumericValue": 400000 }],
        "unsized-images": "error",
        "uses-responsive-images": "warn"
      }
    },
    "upload": { "target": "temporary-public-storage" }
  }
}

npx lhci autorun
# ✅  .lighthouseci/ directory writable
# ✅  Configuration file found
# Running Lighthouse 5 time(s) on https://staging.shop.example.com/
# ...
# Checking assertions against 2 URL(s), 5 run(s)
#   ✘  largest-contentful-paint failure  expected <= 2500, found 2884
#      https://staging.shop.example.com/products/12345
# Assertion failed. Exiting with status code 1.

npx size-limit
#   Path: .next/static/chunks/pages/index-*.js
#   Size: 164.2 kB with all dependencies, minified and brotlied
#   Size limit: 180 kB
#
#   Path: .next/static/chunks/pages/products/[id]-*.js
#   Size: 221.4 kB with all dependencies, minified and brotlied
#   Size limit: 180 kB
#   ✘ Size limit has been exceeded by 41.4 kB