performance

パフォーマンス

フロントエンド、バックエンド、LLM 推論のための包括的なパフォーマンス最適化パターンです。

クイックリファレンス

カテゴリ	ルール	影響	使用するタイミング
Core Web Vitals	4	重大	2026 年のしきい値に基づく LCP、INP、CLS の最適化
レンダリングの最適化	3	高	React Compiler、メモ化、仮想化
遅延読み込み	3	高	コード分割、ルート分割、プリロード
画像の最適化	2	高	AVIF/WebP 形式、レスポンシブ画像
プロファイリングとバックエンド	3	中	React DevTools、py-spy、バンドル分析
LLM 推論	3	中	vLLM、量子化、投機的デコーディング
キャッシュ	2	高	Redis のキャッシュ・アサイド、プロンプトキャッシュ、HTTP キャッシュヘッダー
クエリとデータ取得	2	高	TanStack Query のプリフェッチ、楽観的更新、ロールバック
サステナビリティ	1	中	ページ容量の予算、遅延読み込み、最適化された形式、ダークモード

全 9 カテゴリにわたる 23 のルール

Core Web Vitals

2026 年のより厳しいしきい値に対応する、Google の Core Web Vitals です。

ルール	ファイル	主なパターン
LCP の最適化	rules/cwv-lcp.md	ヒーロー画像のプリロード、SSR、fetchpriority="high"
INP の最適化	rules/cwv-inp.md	scheduler.yield、useTransition、requestIdleCallback
INP の高度な最適化	rules/cwv-inp-advanced.md	レイアウトスラッシング、サードパーティスクリプト、rAF パターン
CLS の防止	rules/cwv-cls.md	明示的な寸法、aspect-ratio、font-display

2026 年のしきい値

指標	現在の良好な値	2026 年の良好な値
LCP	<= 2.5s	<= 2.0s
INP	<= 200ms	<= 150ms
CLS	<= 0.1	<= 0.08

レンダリングの最適化

React 19 以降の React レンダリングパフォーマンスパターンです。

ルール	ファイル	主なパターン
React Compiler	rules/render-compiler.md	自動メモ化、「Memo」バッジによる確認
手動メモ化	rules/render-memo.md	useMemo/useCallback による回避策、状態のコロケーション
仮想化	rules/render-virtual.md	100 件以上のリストに対する TanStack Virtual

遅延読み込み

React.lazy と Suspense を使ったコード分割と遅延読み込みです。

ルール	ファイル	主なパターン
React.lazy + Suspense	rules/loading-lazy.md	コンポーネントの遅延読み込み、エラーバウンダリー
ルート分割	rules/loading-splitting.md	React Router 7.x、Vite の手動チャンク
プリロード	rules/loading-preload.md	ホバー時のプリフェッチ、modulepreload ヒント

画像の最適化

最新の Web アプリケーション向けの、本番環境での画像最適化です。

ルール	ファイル	主なパターン
形式の選択	rules/images-formats.md	AVIF/WebP、品質 75-85、picture 要素
レスポンシブ画像	rules/images-responsive.md	sizes プロパティ、アートディレクション、CDN ローダー

Next.js の Image コンポーネントの使用法と v16 の画像設定のデフォルトは、ファーストパーティの対象です。詳しくは、以下の「上流での対応（再記述しない）」を参照してください。

プロファイリングとバックエンド

プロファイリングツールとバックエンド最適化パターンです。

ルール	ファイル	主なパターン
React のプロファイリング	rules/profiling-react.md	DevTools Profiler、フレームグラフ、レンダリング回数
バックエンドのプロファイリング	rules/profiling-backend.md	py-spy、cProfile、memory_profiler、フレームグラフ
バンドル分析	rules/profiling-bundle.md	vite-bundle-visualizer、ツリーシェイキング、パフォーマンス予算

LLM 推論

vLLM、量子化、投機的デコーディングによる高性能な LLM 推論です。

ルール	ファイル	主なパターン
vLLM のデプロイ	rules/inference-vllm.md	PagedAttention、連続バッチ処理、テンソル並列処理
量子化	rules/inference-quantization.md	AWQ、GPTQ、FP8、INT8 の手法選択
投機的デコーディング	rules/inference-speculative.md	N-gram、ドラフトモデル、1.5～2.5 倍のスループット

キャッシュ

コスト削減とパフォーマンス向上のための、バックエンドの Redis キャッシュと LLM プロンプトキャッシュです。

ルール	ファイル	主なパターン
Redis とバックエンド	rules/caching-redis.md	キャッシュアサイド、ライトスルー、無効化、スタンピード防止
HTTP とプロンプト	rules/caching-http.md	HTTP キャッシュヘッダー、LLM プロンプトキャッシュ、セマンティックキャッシュ

クエリとデータ取得

プリフェッチと楽観的更新のための TanStack Query v5 パターンです。

ルール	ファイル	主なパターン
プリフェッチ	rules/query-prefetching.md	ホバー時のプリフェッチ、ルートローダー、queryOptions、Suspense
楽観的更新	rules/query-optimistic.md	楽観的ミューテーション、ロールバック、キャッシュの無効化

サステナビリティ

二酸化炭素排出量とエネルギー使用量を削減するためのデジタルサステナビリティパターンです。

ルール	ファイル	主なパターン
サステナビリティ UX	rules/sustainability-ux.md	ページ容量の予算、AVIF/WebP、遅延読み込み、ダークモード

ローカルプロファイリングのターゲット

ローカルアプリのプロファイリング（Lighthouse、Core Web Vitals、バンドル分析）では、安定した自己説明的なターゲットとして Portless の名前付き URL を使用します。

# Discover services
portless list
# app → app.localhost (port 3000)

# Profile with agent-browser (preferred for visual metrics)
agent-browser open "https://app.localhost"
agent-browser profiler start
agent-browser wait --load networkidle
agent-browser profiler stop /tmp/profile.json

# Lighthouse via agent-browser
agent-browser open "https://app.localhost"
agent-browser screenshot /tmp/perf-baseline.png

# Or direct Lighthouse CLI
npx lighthouse https://app.localhost --output=json --output-path=/tmp/lighthouse.json

名前付き URL は再起動後も安定しており、パフォーマンスレポートを見れば内容が分かります。npm i -g portless で Portless をインストールしてください。

クイックスタートの例

// LCP: Priority hero image with SSR
import Image from 'next/image';

export default async function Page() {
  const data = await fetchHeroData();
  return (
    <Image
      src={data.heroImage}
      alt="Hero"
      priority
      placeholder="blur"
      sizes="100vw"
      fill
    />
  );
}

主な判断事項

判断事項	推奨事項
メモ化	React Compiler に任せます（2026 年のデフォルト）
100 件以上のリスト	TanStack Virtual を使用します
画像形式	WebP フォールバック付き AVIF（30～50％小型化）
LCP コンテンツ	SSR/SSG を使用し、クライアント側では取得しません
コード分割	ほとんどのアプリではルート単位、重いウィジェットではコンポーネント単位
プリフェッチ戦略	ナビゲーションリンクはホバー時、コンテンツはビューポート内
量子化	4 ビットには AWQ、H100/H200 には FP8
バンドルの予算	リグレッション防止のため、CI で失敗させます

よくある間違い

1. LCP コンテンツをクライアント側で取得する（レンダリングが遅れる）
2. 明示的な寸法のない画像（CLS が発生する）
3. LCP 画像を遅延読み込みする（最大コンテンツの描画が遅れる）
4. イベントハンドラー内で重い計算を行う（INP を悪化させる）
5. レイアウトがずれるアニメーション（代わりに transform を使用する）
6. 5KB 未満の小さなコンポーネントを遅延読み込みする（オーバーヘッドが削減効果を上回る）
7. 遅延読み込みするコンポーネントにエラーバウンダリーがない
8. キャリブレーションデータなしで GPTQ を使用する
9. 実際のワークロードパターンをベンチマークしない
10. ラボ環境でしか測定しない（RUM が必要）

関連スキル

• ork:react-server-components-framework - サーバー優先のレンダリング
• ork:vite-advanced - ビルドの最適化
• browser-tools - agent-browser + Portless によるビジュアルプロファイリング
• caching - レスポンスのキャッシュ戦略
• ork:monitoring-observability - 本番環境の監視とアラート
• ork:database-patterns - クエリとインデックスの最適化
• ork:llm-integration - Ollama によるローカル推論

機能の詳細

lcp-optimization

キーワード: LCP、largest-contentful-paint、ヒーロー、プリロード、優先度、SSR 解決する課題:

• ヒーロー画像の読み込みを最適化する
• 重要なコンテンツをサーバーでレンダリングする
• LCP リソースをプリロードして優先する

inp-optimization

キーワード: INP、インタラクション、応答性、長時間タスク、transition、yield 解決する課題:

• scheduler.yield で長時間タスクを分割する
• useTransition で緊急性の低い更新を遅延させる
• イベントハンドラーのパフォーマンスを最適化する

cls-prevention

キーワード: CLS、レイアウトシフト、寸法、アスペクト比、font-display 解決する課題:

• 動的コンテンツ用のスペースを確保する
• フォントのちらつきや画像のポップインを防ぐ
• アニメーションに transform を使用する

react-compiler

キーワード： react-compiler, auto-memo, memoization, React 19 解決する課題：

• 自動メモ化を有効にする
• 手動メモ化が必要な箇所を特定する
• コンパイラが動作していることを確認する

virtualization

キーワード： virtual, TanStack, large-list, scroll, overscan 解決する課題：

• 100 件以上のリストを効率的にレンダリングする
• 動的な高さの仮想化
• ウィンドウスクロールのパターン

lazy-loading

キーワード： React.lazy, Suspense, code-splitting, dynamic-import 解決する課題：

• ルートベースのコード分割
• エラーバウンダリを使ったコンポーネントの遅延読み込み
• ホバー時とビューポート内への表示時にプリフェッチする

image-optimization

キーワード： next/image, AVIF, WebP, responsive, blur-placeholder 解決する課題：

• Next.js Image コンポーネントのパターン
• フォーマットの選択と品質設定
• レスポンシブなサイズ設定と CDN の構成

profiling

キーワード： profiler, flame-graph, py-spy, DevTools, bundle-analyzer 解決する課題：

• React のレンダリングとバックエンドコードのプロファイリング
• フレームグラフの生成と解釈
• バンドルサイズの分析と最適化

inp-advanced

キーワード： INP, scheduler-yield, layout-thrashing, third-party-scripts, requestAnimationFrame 解決する課題：

• scheduler.yield() で長時間タスクを分割する
• ブロッキングするサードパーティスクリプトを監査し、遅延させる
• イベントハンドラー内での同期的なレイアウトスラッシングを避ける
• フォーム送信、ドロップダウン、アコーディオン、フィルターを最適化する

sustainability

キーワード： sustainability, carbon-footprint, page-weight, green-ux, dark-mode, lazy-loading 解決する課題：

• ページ重量の上限（< 1MB）を適用する
• 自動再生動画や負荷の高い装飾アニメーションをなくす
• 最適化された画像フォーマット（AVIF/WebP）を配信する
• カーソルベースのページネーションを実装し、過剰なデータ取得を防ぐ

llm-inference

キーワード： vllm, quantization, speculative-decoding, inference, throughput 解決する課題：

• 本番環境向けに vLLM で LLM をデプロイする
• ハードウェアに適した量子化方式を選択する
• 投機的デコーディングで生成を高速化する

上流のカバレッジ（内容を繰り返さないでください）

これらのトピックは、以前このスキルのリファレンス、チェックリスト、例で繰り返し説明されていました。現在はファーストパーティのソースが扱っているため、ここでチュートリアルを再追加せず、そちらを参照してください。削除後に残った ork 固有の要件と教訓は references/ork-delta.md に記載されています。

トピック	ファーストパーティのソース
Core Web Vitals の仕組み、監査チェックリスト、変更前後の例	skill: web-perf / cloudflare:web-perf（Chrome DevTools MCP）；https://web.dev/vitals/
web-vitals ライブラリを使ったリアルユーザーモニタリング	skill: web-perf；https://github.com/GoogleChrome/web-vitals
Next.js Image コンポーネント、v16 の画像設定のデフォルト、画像 CDN ローダー	skills: vercel:nextjs + vercel:next-upgrade；https://nextjs.org/docs/app/api-reference/components/image
画像フォーマットの選択と最適化チェックリスト	skill: vercel:nextjs；https://web.dev/learn/images
React Compiler への移行、メモ化の回避策、状態の近接配置	skill: vercel-react-best-practices；https://react.dev/learn/react-compiler
React DevTools Profiler のワークフロー、レンダリング監査	skill: vercel-react-best-practices；https://react.dev/reference/react/Profiler
TanStack Virtual のリスト／グリッド仮想化パターン	https://tanstack.com/virtual/latest/docs/introduction
ルートベースのコード分割（React Router、Vite の手動チャンク）	https://reactrouter.com/ および https://vite.dev/guide/build
一般的なプロファイリングのワークフロー（Lighthouse、py-spy、バンドルアナライザー）	skill: web-perf；https://github.com/benfred/py-spy
Redis と HTTP のキャッシュ戦略パターン	skill: upstash-redis-js；https://redis.io/docs/latest/
vLLM のデプロイ、量子化、投機的デコーディング、エッジ推論	https://docs.vllm.ai/
フルスタックのパフォーマンス監査の手順	https://developer.chrome.com/docs/lighthouse/；ork の差分は references/ork-delta.md と examples/orchestkit-performance-wins.md を参照

参考資料

Read("references/<file>") で必要に応じて読み込んでください。

ファイル	内容
ork-delta.md	このスキルに関する OrchestKit の基準、経験則、および独自の判断
cc-prompt-cache-guide.md	CC 2.1.72 のプロンプトキャッシュ最適化と、安定した内容を先頭に置くプロンプト構成
database-optimization.md	記録された監査結果を支える Postgres のインデックス作成と N+1 の修正

実際の本番環境における最適化前後のエビデンス（キャッシュ階層、コスト計算）：examples/orchestkit-performance-wins.md。