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 cache-aside、提示词缓存、HTTP 缓存标头
查询与数据获取	2	高	TanStack Query 预取、乐观更新、回滚
可持续性	1	中	页面体积预算、懒加载、优化格式、深色模式

共计：9 个类别中的 23 条规则

Core Web Vitals

Google 的 Core Web Vitals 及其 2026 年更严格的阈值。

规则	文件	关键模式
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	使用 TanStack Virtual 处理含 100 项以上的列表

懒加载

使用 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、摇树优化、性能预算

大模型推理

使用 vLLM、量化和推测解码实现高性能大模型推理。

规则	文件	关键模式
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 缓存和大模型提示词缓存，降低成本并提升性能。

规则	文件	关键模式
Redis 和后端	rules/caching-redis.md	Cache-aside、write-through、失效、缓存击穿预防
HTTP 和提示词	rules/caching-http.md	HTTP 缓存标头、大模型提示词缓存、语义缓存

查询与数据获取

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
图片格式	AVIF，回退到 WebP（体积减少 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、hero、preload、priority、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 解决的问题：

• 将页面体积预算控制在 1 MB 以下
• 消除自动播放视频和占用资源较多的装饰性动画
• 提供优化后的图像格式（AVIF/WebP）
• 实施基于游标的分页，避免过度获取数据

llm-inference

关键词： vllm、quantization、speculative-decoding、inference、throughput 解决的问题：

• 使用 vLLM 部署大模型以用于生产环境
• 根据硬件选择量化方法
• 使用推测解码加速生成

上游已覆盖的内容（请勿重述）

这些主题过去会在此技能的参考资料、检查清单和示例中重复说明。现在它们归一方来源所有；请查阅这些来源，不要在此处重新添加教程。删减后保留的 ork 特有基准要求和经验教训位于 references/ork-delta.md。

主题	一方来源
Core Web Vitals 机制、审核检查清单、前后对比示例	技能：web-perf / cloudflare:web-perf（Chrome DevTools MCP）；https://web.dev/vitals/
使用 web-vitals 库进行真实用户监控	技能：web-perf；https://github.com/GoogleChrome/web-vitals
Next.js Image 组件、v16 图像配置默认值、图像 CDN 加载器	技能：vercel:nextjs + vercel:next-upgrade；https://nextjs.org/docs/app/api-reference/components/image
图像格式选择和优化检查清单	技能：vercel:nextjs；https://web.dev/learn/images
React Compiler 迁移、记忆化逃逸机制、状态就近放置	技能：vercel-react-best-practices；https://react.dev/learn/react-compiler
React DevTools Profiler 工作流、渲染审核	技能：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、打包分析器）	技能：web-perf；https://github.com/benfred/py-spy
Redis 和 HTTP 缓存策略模式	技能：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。