1. 基本信息
| 项目 | 内容 | 数据来源 |
|---|---|---|
| 正式名称 | core-web-vitals-addyosmani-web-quality-skills | GitHub 合集仓库子目录名（见下方说明） |
| 所属合集仓库 | addyosmani/web-quality-skills（覆盖 Lighthouse 四大维度的 Agent Skills 合集，共 6 个子技能） | GitHub |
| 作者/维护者 | Addy Osmani（GitHub 用户 addyosmani，现从事 Gemini 与 Google Cloud 相关工作） | GitHub API |
| 来源链接 | https://github.com/addyosmani/web-quality-skills/tree/main/skills/core-web-vitals | — |
| 许可证 | MIT | GitHub API |
| 所属仓库整体 Stars/Forks | 2,612 / 238（该数字属整个合集，不代表本技能自身热度，仅作背景参考） | GitHub API |
| 子技能内容版本 | SKILL.md 内标注 version 1.0，最近一次实质修订 2026-05-07 | 仓库提交历史（路径限定查询） |
| 安装方式 | CLI 一键安装，或 Claude Code / Codex / Gemini CLI 官方插件市场安装 | 官方 README |
项目自述名称为仓库标题“Web Quality Skills”（整个合集），本报告推荐的具体技能在其 SKILL.md 中自称 core-web-vitals，与正式名称含义一致。
2. 功能介绍与亮点
core-web-vitals 是 web-quality-skills 合集中专职优化 Google 三大核心网页指标（LCP、INP、CLS）的子技能，围绕“识别成因 → 给出修复代码”组织内容：
- 三项指标各自拆出独立小节：LCP（最大内容绘制）列出五类常见诱因（TTFB 过慢、渲染阻塞资源、资源加载无优先级提示、客户端渲染延迟、可用 Speculation Rules API 预渲染下一页）；INP（下次绘制交互）拆解“输入延迟+处理时间+呈现延迟”三阶段并给出
scheduler.yield()等现代 API 用法；CLS（累计布局偏移）列出图片无尺寸、广告/iframe 未预留空间、动态插入内容、Web 字体切换、动画属性错误五类成因。 - 每类问题均配“❌ 错误写法 / ✅ 正确写法“代码对比，并附可直接勾选执行的优化清单（checklist）。
- 内含浏览器端调试脚本（
PerformanceObserver定位 LCP 元素、追踪慢交互、追踪布局偏移来源），便于在真实页面上现场定位问题。 - 针对 Next.js、React、Vue/Nuxt 三大框架分别给出对应的速查代码片段。
- 内容对 2026 年最新 Web 平台能力保持同步，如 Speculation Rules API 预渲染、
scheduler.yield()让权调度，均标注浏览器兼容边界（如 Speculation Rules 仅 Chromium 支持）。 - 附独立参考文件
references/LCP.md，SKILL.md 正文保持精简、细节下沉。 - 纯 Markdown 内容，不含任何可执行脚本，安装即用。
3. 适用场景
所属分类：前端与设计
适合需要提升 Google 搜索页面体验评分、修复 Lighthouse/PageSpeed Insights 报告中 LCP、INP、CLS 超标问题的前端开发者，尤其是希望 AI 直接定位具体成因并给出可落地修复代码（而非泛泛的“优化图片”“减小体积”式建议）的场景。不涉及无障碍、SEO 等其他 Web 质量维度（合集内另有独立子技能覆盖）。
4. 跨 Agent 兼容性
| Agent | 结论 | 依据 |
|---|---|---|
| Claude Code | 原生支持 | README 提供官方插件市场安装命令（/plugin marketplace add + /plugin install），技能按命名空间加载 |
| Codex | 原生支持 | README 提供 Codex 插件市场安装命令，技能通过 @ 前缀调用 |
| OpenClaw | 未验证 | 已抓取材料未点名 OpenClaw 适配 |
| Hermes Agent | 未验证 | 已抓取材料未点名 Hermes 适配 |
（README 另提供 Gemini CLI 扩展安装方式与手动复制到技能目录的通用安装法，理论上适用于任何支持 Markdown 技能规范的 Agent，但已抓取材料未点名 OpenClaw / Hermes 的具名验证记录。）
5. 推荐理由
多数性能优化建议止步于“图片再压缩一点”“再懒加载一下”，这个子技能把 Google 官方定义的三项核心指标逐一拆解到诱因层面，每条诱因都配好代码级修复示例与现场调试脚本，还按主流框架给出对应写法，开发者可以直接对照自己的问题类型定位并套用修复方案，而不需要先自行翻译“通用性能建议”到具体代码改动。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 5 | 合集仓库整体 2,612 stars 属整个仓库，不代表本子技能自身热度；本子技能自身尚未检索到专门的第三方 issue/PR 讨论或独立评价 |
| 可用性 | 9 | 纯 Markdown 技能，无需任何 API Key 或付费依赖；CLI 一条命令即可安装，Claude Code / Codex / Gemini CLI 均有官方插件市场支持；内容详尽且拆分出独立参考文件，最近一次实质修订为 2026 年 5 月 |
| 安全性 | 9 | 见下方安全检查清单 |
| 综合评分 | 7.7 | 三项均值 |
安全检查清单：
| 检查项 | 结果 |
|---|---|
| ① Shell 命令与权限范围 | 该子技能目录内仅含 SKILL.md 与一份参考文件 references/LCP.md，不含任何可执行脚本 |
| ② 运行时联网外发 | 无网络请求，纯静态知识与代码模式参考 |
| ③ API Key/凭据 | 不需要任何 API Key 或凭据 |
| ④ 可疑指令排查 | 已抓取 SKILL.md 与参考文件全文，内容均为性能优化知识与代码示例，未发现 prompt injection 或混淆代码迹象 |
| ⑤ 作者/组织信誉 | 作者为知名开发者，公开身份透明，仓库提交历史公开，无刷星迹象 |
| ⑥ License | MIT，条款清晰 |
| ⑦ 最近维护 | 该子技能最近一次内容修订为 2026 年 5 月，合集仓库整体近期仍有持续提交 |
纯提示词/参考文档类技能，无代码执行、无外联、无凭据依赖，各项检查结果良好。
7. 跟同类 Skills 相比的优势
| 对比对象 | 定位 | 与本 skill 的差异 |
|---|---|---|
| web-perf（Cloudflare 官方出品） | 借助 Chrome DevTools MCP 服务器对指定网页做一次性实测审计，产出结构化性能与可访问性评分报告 | 定位是“测量工具”，依赖 MCP 服务器配置才能运行；本 skill 定位是“修复手册”，纯知识参考、零配置，直接给出诱因对应的代码修复方案，两者可先测后修配合使用 |
| vercel-optimize（Vercel 官方出品） | 用 Vercel CLI 拉取真实生产观测数据（调用量、冷启动、Core Web Vitals 等），仅适用于部署在 Vercel 上的 Next.js/SvelteKit 项目 | 强绑定 Vercel 托管平台与生产环境真实数据；本 skill 面向任意框架、任意托管平台的静态代码层修复，不要求项目已上线或部署在特定平台 |
| performance（同合集内综合性能子技能） | 覆盖打包体积、图片、缓存、懒加载等更广泛的整体页面速度优化 | 覆盖面更宽但不专注 Google 官方三项核心指标；本 skill 聚焦 LCP/INP/CLS 三项可被搜索引擎直接采信的指标，诱因拆解更细、修复更有针对性 |
多数“网页性能优化”工具要么是需要额外配置的实测审计工具，要么是笼统的通用建议清单；这个子技能反其道而行，把三项对 Google 搜索排名有直接影响的指标单独拆出，逐条诱因配代码修复对比，兼顾深度与可执行性。
8. 用户评价
该技能目前在第三方平台尚无具名用户评价。
9. 其他补充
web-quality-skills 合集内还包含 accessibility、performance、seo、best-practices、web-quality-audit 等其他子技能，覆盖网页质量的其他维度，可按需单独安装组合使用。
10. 安装使用方式
# 方式一：CLI 一键安装（安装整个合集，含本子技能）
npx skills add addyosmani/web-quality-skills
# 方式二：仅复制本子技能
git clone https://github.com/addyosmani/web-quality-skills /tmp/web-quality-skills
cp -r /tmp/web-quality-skills/skills/core-web-vitals ~/.claude/skills/
# 方式三：Claude Code 插件市场
/plugin marketplace add addyosmani/web-quality-skills
/plugin install web-quality-skills@addy-web-quality-skills
# 方式四：Codex 插件市场
codex plugin marketplace add addyosmani/web-quality-skills安装后无需重启；下次对话中提出“improve Core Web Vitals”“fix LCP”“reduce CLS”“optimize INP”等需求即可自动触发。Claude Code 插件安装后技能会带命名空间前缀（如 /web-quality-skills:core-web-vitals）。
11. 注意事项
- 本 skill 是合集仓库中的一个子目录，安装时需注意只复制
skills/core-web-vitals目录（含 SKILL.md 与references/子目录），不要拆散文件结构。 - Speculation Rules API 预渲染方案仅 Chromium 系浏览器生效，Safari/Firefox 会忽略该脚本（渐进增强，不构成回归）。
- 仅覆盖核心指标这一个 Web 质量维度，无障碍、SEO 等需求需安装合集内的其他子技能。
- 目前仅验证了 Claude Code 与 Codex 平台的官方适配，OpenClaw、Hermes Agent 生态的兼容性尚未验证。