SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场web-perf-ops

web-perf-ops

前端与建站

查看项目

更新于 10-13 17:14

技能介绍

用途

Web Performance Operations 用于诊断和修复前端页面速度问题，其方法遵循 Core Web Vitals 的评估逻辑：field 数据决定是否存在问题，lab 数据解释原因，每项修复针对失败指标的主要子部分，而不是笼统的“分数”。服务端性能分析、负载测试和后端延迟属于 perf-ops；本技能处理的是浏览器所体验到的性能。

主要能力

  • 以 CrUX p75（PSI field 块、CrUX API、Search Console）或自有 RUM 作为 field 数据来源，区分手机和桌面。无 field 数据时，明确判定为仅 lab 结论。
  • 识别失败的 Core Web Vital 及其子部分：LCP = TTFB | load delay | load duration | render delay；INP = input delay | processing | presentation；CLS = 哪个元素、为什么。
  • 使用 Lighthouse、DevTools Performance 面板、WebPageTest 或 cloudflare:web-perf 技能复现并生成 trace。
  • 修复主要子部分，每次测量只做一个改动。
  • 通过 lab 前后对比（至少 5 次运行的中位数）、发布、field 28 天确认，并用 CI 预算锁定防止回归。

阈值

在页面加载的第 75 百分位评估，移动端和桌面端分别评估，使用相同数值。INP 于 2024-03-12 取代 FID 成为 Core Web Vital。

指标 良好 差 衡量内容 field/lab
LCP <= 2.5 s > 4 s 加载：最大图像/文本块绘制 两者
INP <= 200 ms > 500 ms 响应性：最慢交互到下次绘制 field；lab 仅针对执行的交互（加载代理：TBT）
CLS <= 0.1 > 0.25 视觉稳定性：最大意外偏移突发 两者（lab 仅见加载）
FCP <= 1.8 s > 3 s 首次绘制（诊断，非 CWV） 两者
TTFB <= 800 ms > 1.8 s 服务器+网络（诊断；web.dev 称其为粗略指南） 两者
TBT <= 200 ms > 600 ms 加载期间主线程阻塞（Lighthouse 评分点） 仅 lab

两列之间为“需要改进”。Lighthouse 性能分数是加权 lab 综合分（TBT 30、LCP 25、CLS 25、FCP 10、Speed Index 10），不是 Core Web Vital，也不是排名信号。

使用方式

  1. FIELD：问题真实吗？CrUX p75 或自有 RUM，手机和桌面分开。无 field 数据则说明判定为仅 lab。
  2. METRIC：哪个 CWV 失败，哪个子部分。
  3. LAB：复现以获得 trace，Lighthouse、DevTools、WebPageTest。Lab 解释，field 判定。
  4. FIX：修复主要子部分，每次测量一个改动。
  5. PROVE：lab 前后对比（5 次中位数）→ 发布 → field 28 天确认 → CI 预算锁定。

跳过第 1 步是典型失败：优化用户从未感受到的 Lighthouse 分数，而真正的问题（同意横幅后的 INP、三屏以下的 CLS）在 lab 中不可见。

脚本

  • scripts/triage-vitals.py REPORT.json：评级 Lighthouse / PSI / CrUX 报告，并将每个发现路由到参考文档（第 3 步）。
  • scripts/check-web-perf-facts.py --offline：编辑阈值或文字后，检查 catalog 与 SKILL.md 表格一致性；标记未说明 INP 取代 FID 的 FID 建议。
  • scripts/check-web-perf-facts.py --live：每周新鲜度检查：web-vitals 自身阈值常量、npm 主版本、弃用项、LHCI 捆绑的 Lighthouse。

两个脚本遵循仓库脚本契约：--help 带示例、--json 信封、发现时退出码 10、仅 live 模式源不可达时退出码 7。

Craft CMS 快速对照

手段 影响 陷阱
Blitz 静态缓存（服务器重写，部署后预热） TTFB 包含未生成 transform URL 的页面永不缓存：设置 generateTransformsBeforePageLoad
.with() / .eagerly()（Craft 5） 缓存未命中时的 TTFB Blitz Hints 在 Blitz 5.10 中已退役；手动 eager-load
{% cache %} 不使用 Blitz 时的 TTFB 不要与 Blitz 组合；不会自动对登录用户禁用
Transforms：getImg()、ImageOptimize imgTag()、Imager X LCP、CLS 全局懒加载宏命中 hero；ImageOptimize 无 AVIF
craft-vite critical CSS + modulepreload 渲染延迟、FCP CSS 默认异步：无 critical CSS 会导致 FOUC 和 CLS
SEOmatic 脚本位置、按模板 .include(false)；Formie JS 位置 INP 跟踪脚本仅在 live 渲染：测量生产环境
队列 worker（runQueueAutomatically 关闭） TTFB、INP 默认通过前端页面的额外请求运行作业

适用场景

  • 前端页面速度与 Core Web Vitals 诊断和修复。
  • 区分 field 数据与 lab 数据并确定优先级。
  • 针对 LCP、INP、CLS 的子部分进行修复。
  • 使用 CI 预算和 Lighthouse CI 锁定性能收益。
  • Craft CMS 站点的性能优化。

限制

  • 服务端分析、负载测试、后端延迟属于 perf-ops。
  • Craft 内容建模、Twig、元素查询属于 craftcms-ops。
  • Nginx/Cloudflare 配置语法属于 nginx-ops、cloudflare-ops。
  • CI 工作流加固属于 ci-cd-ops。
  • Laravel Mix/Webpack -> Vite、Vue 2 -> 3 迁移属于 frontend-upgrade-ops。
  • 需 Chrome DevTools MCP 驱动的 lab trace 使用第三方 cloudflare:web-perf 技能（如已安装）。
  • CrUX 为 Chrome 专属；与 RUM 不一致时将 RUM 细分到 Chrome 比较。
  • CrUX 为 28 天滚动窗口，修复后 field 不会立即移动。
  • @lhci/cli 0.15 仍捆绑 Lighthouse 12，断言应使用 metric audits、resource-summary:* 和 *-insight ids，而非 Lighthouse 13 移除的旧 audit ids。
  • @builder.io/partytown 已弃用，现为 @qwik.dev/partytown（仍为 beta）。