前端后端LLM性能优化指南：核心Web指标、渲染、懒加载、缓存与推理

performance by yonatangross/orchestkit

104 周安装量

141 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/yonatangross/orchestkit --skill performance

AI/机器学习前端优化性能优化

🇨🇳中文介绍

性能

涵盖前端、后端和 LLM 推理的综合性能优化模式。

快速参考

类别	规则	影响	使用时机
核心 Web 指标	4	关键	针对 2026 年阈值的 LCP、INP、CLS 优化
渲染优化	3	高	React 编译器、记忆化、虚拟化
懒加载	3	高	代码分割、路由分割、预加载
图片优化	3	高	Next.js Image、AVIF/WebP、响应式图片
性能分析与后端	3	中	React DevTools、py-spy、打包分析
LLM 推理	3	中	vLLM、量化、推测解码

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

规则	文件	关键模式
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

规则	文件	关键模式
React 编译器	`rules/render-compiler.md`	自动记忆化、"Memo" 徽章验证
手动记忆化	`rules/render-memo.md`	useMemo/useCallback 逃生舱、状态共置
虚拟化	`rules/render-virtual.md`	对 100+ 项列表使用 TanStack Virtual

规则	文件	关键模式
React.lazy + Suspense	`rules/loading-lazy.md`	组件懒加载、错误边界
路由分割	`rules/loading-splitting.md`	React Router 7.x、Vite 手动分块
预加载	`rules/loading-preload.md`	悬停预取、modulepreload 提示

规则	文件	关键模式
Next.js Image	`rules/images-nextjs.md`	Image 组件、priority、blur placeholder
格式选择	`rules/images-formats.md`	AVIF/WebP、质量 75-85、picture 元素
响应式图片	`rules/images-responsive.md`	sizes 属性、艺术指导、CDN 加载器

性能分析与后端

性能分析工具和后端优化模式。

规则	文件	关键模式
React 性能分析	`rules/profiling-react.md`	DevTools Profiler、火焰图、渲染计数
后端性能分析	`rules/profiling-backend.md`	py-spy、cProfile、memory_profiler、火焰图
打包分析	`rules/profiling-bundle.md`	vite-bundle-visualizer、tree shaking、性能预算

使用 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、核心 Web 指标、打包分析）时，使用 Portless 命名 URL 以获得稳定、自文档化的目标：

# 发现服务
portless list
# app → app.localhost:1355 (port 3000)

# 使用 agent-browser 进行分析（推荐用于视觉指标）
agent-browser open "http://app.localhost:1355"
agent-browser profiler start
agent-browser wait --load networkidle
agent-browser profiler stop /tmp/profile.json

# 通过 agent-browser 使用 Lighthouse
agent-browser open "http://app.localhost:1355"
agent-browser screenshot /tmp/perf-baseline.png

# 或直接使用 Lighthouse CLI
npx lighthouse http://app.localhost:1355 --output=json --output-path=/tmp/lighthouse.json

命名 URL 在重启后保持稳定，并在性能报告中具有自文档化特性。使用 npm i -g portless 安装 Portless。

// LCP：具有 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 编译器处理（2026 年默认）
100+ 项列表	使用 TanStack Virtual
图片格式	AVIF 并回退到 WebP（缩小 30-50%）
LCP 内容	SSR/SSG，绝不使用客户端获取
代码分割	大多数应用按路由，重型组件按组件
预取策略	导航链接悬停时预取，内容进入视口时预取
量化	4 位使用 AWQ，H100/H200 使用 FP8
打包预算	在 CI 中设置硬性失败以防止回退

客户端获取 LCP 内容（延迟渲染）
图片没有显式尺寸（导致 CLS）
懒加载 LCP 图片（延迟最大绘制）
在事件处理程序中进行繁重计算（阻塞 INP）
导致布局偏移的动画（改用 transform）
懒加载小于 5KB 的微小组件（开销大于节省）
懒加载组件缺少错误边界
在没有校准数据的情况下使用 GPTQ
未对实际工作负载模式进行基准测试
仅在实验室环境中测量（需要真实用户监控）

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、largest-contentful-paint、hero、preload、priority、SSR 解决的问题：

优化首屏图片加载
服务器渲染关键内容
预加载并优先处理 LCP 资源

关键词： INP、interaction、responsiveness、long-task、transition、yield 解决的问题：

使用 scheduler.yield 拆分长任务
使用 useTransition 延迟非紧急更新
优化事件处理程序性能

关键词： CLS、layout-shift、dimensions、aspect-ratio、font-display 解决的问题：

为动态内容预留空间
防止字体闪烁和图片突然弹出
对动画使用 transform

关键词： react-compiler、auto-memo、memoization、React 19 解决的问题：

启用自动记忆化
识别何时需要手动记忆化
验证编译器是否正常工作

关键词： virtual、TanStack、large-list、scroll、overscan 解决的问题：

高效渲染 100+ 项列表
动态高度虚拟化
窗口滚动模式

关键词： React.lazy、Suspense、code-splitting、dynamic-import 解决的问题：

基于路由的代码分割
带有错误边界的组件懒加载
悬停和视口预取

关键词： next/image、AVIF、WebP、responsive、blur-placeholder 解决的问题：

Next.js Image 组件模式
格式选择和质量设置
响应式尺寸和 CDN 配置

关键词： profiler、flame-graph、py-spy、DevTools、bundle-analyzer 解决的问题：

分析 React 渲染和后端代码
生成和解读火焰图
分析和优化打包大小

关键词： INP、scheduler-yield、layout-thrashing、third-party-scripts、requestAnimationFrame 解决的问题：

使用 scheduler.yield() 拆分长任务
审计并延迟阻塞的第三方脚本
避免事件处理程序中的同步布局抖动
优化表单提交、下拉菜单、手风琴、过滤器

关键词： sustainability、carbon-footprint、page-weight、green-ux、dark-mode、lazy-loading 解决的问题：

强制执行页面重量预算（< 1MB）
消除自动播放视频和繁重的装饰性动画
提供优化的图片格式（AVIF/WebP）
实施基于游标的分页以防止过度获取

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

使用 vLLM 部署 LLM 到生产环境
根据硬件选择量化方法
使用推测解码加速生成

使用 Read("${CLAUDE_SKILL_DIR}/references/<file>") 按需加载：

文件	内容
`rum-setup.md`	真实用户监控
`react-compiler-migration.md`	编译器采用
`tanstack-virtual-patterns.md`	虚拟化模式
`vllm-deployment.md`	生产环境 vLLM 配置
`quantization-guide.md`	方法比较
`cdn-setup.md`	图片 CDN 配置
`cc-prompt-cache-guide.md`	CC 2.1.72 提示词缓存优化，稳定优先的提示词结构

2026 年 2 月 14 日

🇺🇸English

Performance

Comprehensive performance optimization patterns for frontend, backend, and LLM inference.

Quick Reference

Category	Rules	Impact	When to Use
Core Web Vitals	4	CRITICAL	LCP, INP, CLS optimization with 2026 thresholds
Render Optimization	3	HIGH	React Compiler, memoization, virtualization
Lazy Loading	3	HIGH	Code splitting, route splitting, preloading
Image Optimization	3	HIGH	Next.js Image, AVIF/WebP, responsive images
Profiling & Backend	3	MEDIUM	React DevTools, py-spy, bundle analysis
LLM Inference	3	MEDIUM	vLLM, quantization, speculative decoding
Caching	2	HIGH	Redis cache-aside, prompt caching, HTTP cache headers
Query & Data Fetching	2	HIGH	TanStack Query prefetching, optimistic updates, rollback
Sustainability	1	MEDIUM	Page weight budgets, lazy loading, optimized formats, dark mode

Total: 24 rules across 9 categories

Core Web Vitals

Google's Core Web Vitals with 2026 stricter thresholds.

Rule	File	Key Pattern
LCP Optimization	`rules/cwv-lcp.md`	Preload hero, SSR, fetchpriority="high"
INP Optimization	`rules/cwv-inp.md`	scheduler.yield, useTransition, requestIdleCallback
INP Advanced	`rules/cwv-inp-advanced.md`	Layout thrashing, third-party scripts, rAF patterns
CLS Prevention	`rules/cwv-cls.md`	Explicit dimensions, aspect-ratio, font-display

2026 Thresholds

Metric	Current Good	2026 Good
LCP	<= 2.5s	<= 2.0s
INP	<= 200ms	<= 150ms
CLS	<= 0.1	<= 0.08

Render Optimization

React render performance patterns for React 19+.

Rule	File	Key Pattern
React Compiler	`rules/render-compiler.md`	Auto-memoization, "Memo" badge verification
Manual Memoization	`rules/render-memo.md`	useMemo/useCallback escape hatches, state colocation
Virtualization	`rules/render-virtual.md`	TanStack Virtual for 100+ item lists

Lazy Loading

Code splitting and lazy loading with React.lazy and Suspense.

Rule	File	Key Pattern
React.lazy + Suspense	`rules/loading-lazy.md`	Component lazy loading, error boundaries
Route Splitting	`rules/loading-splitting.md`	React Router 7.x, Vite manual chunks
Preloading	`rules/loading-preload.md`	Prefetch on hover, modulepreload hints

Image Optimization

Production image optimization for modern web applications.

Rule	File	Key Pattern
Next.js Image	`rules/images-nextjs.md`	Image component, priority, blur placeholder
Format Selection	`rules/images-formats.md`	AVIF/WebP, quality 75-85, picture element
Responsive Images	`rules/images-responsive.md`	sizes prop, art direction, CDN loaders

Profiling & Backend

Profiling tools and backend optimization patterns.

Rule	File	Key Pattern
React Profiling	`rules/profiling-react.md`	DevTools Profiler, flamegraph, render counts
Backend Profiling	`rules/profiling-backend.md`	py-spy, cProfile, memory_profiler, flame graphs
Bundle Analysis	`rules/profiling-bundle.md`	vite-bundle-visualizer, tree shaking, performance budgets

LLM Inference

High-performance LLM inference with vLLM, quantization, and speculative decoding.

Rule	File	Key Pattern
vLLM Deployment	`rules/inference-vllm.md`	PagedAttention, continuous batching, tensor parallelism
Quantization	`rules/inference-quantization.md`	AWQ, GPTQ, FP8, INT8 method selection
Speculative Decoding	`rules/inference-speculative.md`	N-gram, draft model, 1.5-2.5x throughput

Caching

Backend Redis caching and LLM prompt caching for cost savings and performance.

Rule	File	Key Pattern
Redis & Backend	`rules/caching-redis.md`	Cache-aside, write-through, invalidation, stampede prevention
HTTP & Prompt	`rules/caching-http.md`	HTTP cache headers, LLM prompt caching, semantic caching

Query & Data Fetching

TanStack Query v5 patterns for prefetching and optimistic updates.

Rule	File	Key Pattern
Prefetching	`rules/query-prefetching.md`	Hover prefetch, route loaders, queryOptions, Suspense
Optimistic Updates	`rules/query-optimistic.md`	Optimistic mutations, rollback, cache invalidation

Sustainability

Digital sustainability patterns for reducing carbon footprint and energy usage.

Rule	File	Key Pattern
Sustainability UX	`rules/sustainability-ux.md`	Page weight budgets, AVIF/WebP, lazy loading, dark mode

Local Profiling Target

When profiling a local app (Lighthouse, Core Web Vitals, bundle analysis), use Portless named URLs for stable, self-documenting targets:

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

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

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

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

Named URLs are stable across restarts and self-documenting in performance reports. Install Portless with npm i -g portless.

Quick Start Example

// 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
    />
  );
}

Key Decisions

Decision	Recommendation
Memoization	Let React Compiler handle it (2026 default)
Lists 100+ items	Use TanStack Virtual
Image format	AVIF with WebP fallback (30-50% smaller)
LCP content	SSR/SSG, never client-side fetch
Code splitting	Per-route for most apps, per-component for heavy widgets
Prefetch strategy	On hover for nav links, viewport for content
Quantization	AWQ for 4-bit, FP8 for H100/H200
Bundle budget	Hard fail in CI to prevent regression

Common Mistakes

Client-side fetching LCP content (delays render)
Images without explicit dimensions (causes CLS)
Lazy loading LCP images (delays largest paint)
Heavy computation in event handlers (blocks INP)
Layout-shifting animations (use transform instead)
Lazy loading tiny components < 5KB (overhead > savings)
Missing error boundaries on lazy components
Using GPTQ without calibration data
Not benchmarking actual workload patterns
Only measuring in lab environment (need RUM)

Related Skills

ork:react-server-components-framework - Server-first rendering
ork:vite-advanced - Build optimization
browser-tools - Visual profiling with agent-browser + Portless
caching - Cache strategies for responses
ork:monitoring-observability - Production monitoring and alerting
ork:database-patterns - Query and index optimization
ork:llm-integration - Local inference with Ollama

Capability Details

lcp-optimization

Keywords: LCP, largest-contentful-paint, hero, preload, priority, SSR Solves:

Optimize hero image loading
Server-render critical content
Preload and prioritize LCP resources

inp-optimization

Keywords: INP, interaction, responsiveness, long-task, transition, yield Solves:

Break up long tasks with scheduler.yield
Defer non-urgent updates with useTransition
Optimize event handler performance

cls-prevention

Keywords: CLS, layout-shift, dimensions, aspect-ratio, font-display Solves:

Reserve space for dynamic content
Prevent font flash and image pop-in
Use transform for animations

react-compiler

Keywords: react-compiler, auto-memo, memoization, React 19 Solves:

Enable automatic memoization
Identify when manual memoization needed
Verify compiler is working

virtualization

Keywords: virtual, TanStack, large-list, scroll, overscan Solves:

Render 100+ item lists efficiently
Dynamic height virtualization
Window scrolling patterns

lazy-loading

Keywords: React.lazy, Suspense, code-splitting, dynamic-import Solves:

Route-based code splitting
Component lazy loading with error boundaries
Prefetch on hover and viewport

image-optimization

Keywords: next/image, AVIF, WebP, responsive, blur-placeholder Solves:

Next.js Image component patterns
Format selection and quality settings
Responsive sizing and CDN configuration

profiling

Keywords: profiler, flame-graph, py-spy, DevTools, bundle-analyzer Solves:

Profile React renders and backend code
Generate and interpret flame graphs
Analyze and optimize bundle size

inp-advanced

Keywords: INP, scheduler-yield, layout-thrashing, third-party-scripts, requestAnimationFrame Solves:

Break long tasks with scheduler.yield()
Audit and defer blocking third-party scripts
Avoid synchronous layout thrashing in event handlers
Optimize form submissions, dropdowns, accordions, filters

sustainability

Keywords: sustainability, carbon-footprint, page-weight, green-ux, dark-mode, lazy-loading Solves:

Enforce page weight budgets (< 1MB)
Eliminate auto-playing videos and heavy decorative animations
Serve optimized image formats (AVIF/WebP)
Implement cursor-based pagination to prevent over-fetching

llm-inference

Keywords: vllm, quantization, speculative-decoding, inference, throughput Solves:

Deploy LLMs with vLLM for production
Choose quantization method for hardware
Accelerate generation with speculative decoding

References

Load on demand with Read("${CLAUDE_SKILL_DIR}/references/<file>"):

File	Content
`rum-setup.md`	Real User Monitoring
`react-compiler-migration.md`	Compiler adoption
`tanstack-virtual-patterns.md`	Virtualization patterns
`vllm-deployment.md`	Production vLLM config
`quantization-guide.md`	Method comparison
`cdn-setup.md`

Weekly Installs

Repository

yonatangross/orchestkit

GitHub Stars

133

First Seen

Feb 14, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode86

codex77

gemini-cli76

github-copilot76

cursor74

claude-code74

AI 代码实施计划编写技能 | 自动化开发任务分解与 TDD 流程规划工具

50,900 周安装

前端后端LLM性能优化指南：核心Web指标、渲染、懒加载、缓存与推理

🇨🇳中文介绍

性能

快速参考

相关 Skills

核心 Web 指标

2026 年阈值

渲染优化

懒加载

图片优化

性能分析与后端

LLM 推理

缓存

查询与数据获取

可持续性

本地性能分析目标

快速开始示例

关键决策

常见错误

相关技能

能力详情

lcp-optimization

inp-optimization

cls-prevention

react-compiler

virtualization

lazy-loading

image-optimization

profiling

inp-advanced

sustainability

llm-inference

参考资料

🇺🇸English

Performance

Quick Reference

Core Web Vitals

2026 Thresholds

Render Optimization

Lazy Loading

Image Optimization

Profiling & Backend

LLM Inference

Caching

Query & Data Fetching

Sustainability

Local Profiling Target

Quick Start Example

Key Decisions

Common Mistakes

Related Skills

Capability Details

lcp-optimization

inp-optimization

cls-prevention

react-compiler

virtualization

lazy-loading

image-optimization

profiling

inp-advanced

sustainability

llm-inference

References

最新 Skills