modern-web-performance-core-web-vitals

id	modern-web-performance
name	Modern Web Performance + Core Web Vitals
description	画像・スクリプト・スタイル・interaction 変更が LCP / INP / CLS / リソースコストに与える影響を suggestion で提示する。
version	0.1.0
category	midstream
phase	midstream
applyTo	["src/**/*.{ts,tsx,js,jsx,html,css}","app/**/*.{ts,tsx,js,jsx,html,css}","components/**/*.{ts,tsx,js,jsx,html,css}","pages/**/*.{ts,tsx,js,jsx,html,css}","styles/**/*.css","public/**/*.html"]
tags	["community","modern-web","performance","core-web-vitals","ui","midstream"]
severity	minor
inputContext	["diff"]
outputKind	["findings","actions"]
modelHint	balanced

Goal / 目的

• フロントエンド差分が LCP / INP / CLS や読み込みコストへ与える影響を、診断可能な形で示す。
• 「測ってない最適化」を促すのではなく、今書かれているコードが既知の遅延・ジャンクパターンかを suggestion として返す。
• 出力は強制ではなく、計測 / プロファイリングの起点を提示する材料にとどめる。

Non-goals / 扱わないこと

• 実測値（Lighthouse / Real-User Metrics）の数値検証。
• bundler 設定や依存ライブラリ選定の議論。
• backend / DB / network 帯域起因のパフォーマンス問題（別エピックの対象）。
• マイクロベンチマーク的な「より速い書き方」の最適化合戦。

False-positive guards / 抑制条件

• すでに loading="lazy" / fetchpriority / decoding 属性などが指定されている画像は指摘しない。
• 既存コードのリファクタを跨ぐ変更（命名変更・型注釈追加）で副作用のない差分は指摘しない。
• A/B テスト・実験コード・dev-only コードと明示されている領域は対象外。
• パフォーマンスポリシーが .river/rules.md や README で明示されている場合はその方針に従う（過剰指摘の抑制）。

Rule / ルール

LCP (Largest Contentful Paint)

• ヒーロー画像 / 主要 visual には fetchpriority="high" と decoding="async" の検討を促す。
• above-the-fold の画像に loading="lazy" が誤って付いていないか確認する。
• リクエスト連鎖（CSS → JS → font → image）が増える変更では preconnect / preload の検討を提案する。
• web font の差し替えでは font-display: swap / 適切な fallback の有無を確認する。

INP (Interaction to Next Paint)

• click / input ハンドラに同期的な重い処理（JSON.parse の大規模ループ、document.querySelectorAll 全 traversal）を追加していないか確認する。
• raf / scroll / resize ハンドラに直接 DOM 操作を入れる差分は throttle / requestIdleCallback / passive listener の検討を提案する。
• React の場合は useMemo / useCallback ではなく、そもそも該当ハンドラが render path に乗らない構造を優先的に検討する。

CLS (Cumulative Layout Shift)

• 画像 / iframe / video / placeholder に明示的な width / height または aspect-ratio を指定する変更を促す。
• 後から injection される広告 / バナー / banner / Toast UI でレイアウトが跳ねないよう min-height や reserved space の確保を検討する。
• web font 切り替えで text reflow が起きる可能性を指摘し、size-adjust / 適切な fallback metrics の検討を提案する。

リソースコスト

• 大きな <img> を縮小表示している場合、レスポンシブ画像 (srcset / sizes) や AVIF / WebP の検討を提案する。
• 新規 npm パッケージを import している差分は、tree-shaking 可否 / バンドルサイズの確認を suggestion で示す（実測値は別レビュー）。
• import … で大きなライブラリを top-level に持ち込む変更には dynamic import の検討余地を伝える。