企业官网建设流程全解析

React、Vue、Svelte、Astro 都能用！web-quality-skills 跨框架网页性能优化实战详解

【免费下载链接】web-quality-skillsAgent Skills for optimizing web quality based on Lighthouse and Core Web Vitals.项目地址: https://gitcode.com/gh_mirrors/we/web-quality-skills

如果你正在用 React、Vue、Svelte 或 Astro 开发网站，一定会关心网页性能优化和 Core Web Vitals 指标。web-quality-skills 是一个开源的 AI Agent 技能集合，基于 Google Lighthouse 审计标准，帮你自动检查并优化网站性能、可访问性、SEO 和最佳实践。它完全跨框架——不管你用什么前端技术栈，同一套标准、同一个技能包直接可用。

为什么需要 web-quality-skills：慢网站的隐性成本

一个加载超过 4 秒的页面，用户流失率会显著上升；而性能指标还是 Google 搜索排名的因素之一。手动优化通常要面对上百条检查项：LCP、图片压缩、字体加载、缓存策略、meta 标签……web-quality-skills 把150+ 次 Lighthouse 审计经验沉淀成了 AI 能直接执行的技能，你只需用自然语言描述需求即可。

它是什么：给 AI 编码助手装上的"网页质量技能包"

简单来说，web-quality-skills 遵循 Agent Skills 规范 文件定义，包含触发条件、检查规则和修复示例。

项目提供 6 个开箱即用的技能，目录结构清晰，详见 AGENTS.md：

快速上手：3 步完成安装

第 1 步：一行命令安装

npx skills add addyosmani/web-quality-skills

第 2 步：手动复制（备选方案）

cp -r skills/* ~/.claude/skills/

第 3 步：在 Codex 中安装（v0.122+ 支持）

codex plugin marketplace add addyosmani/web-quality-skills

本地克隆方式也可以，克隆地址：https://gitcode.com/gh_mirrors/we/web-quality-skills，本地安装与排障细节见 docs/codex-setup.md。

安装后无需额外配置——技能会根据你的请求描述自动激活。

实战详解：跨框架的网页性能优化怎么用

核心指标：先记住这三个数

所有优化都围绕 Core Web Vitals 的三个指标展开，这是影响搜索排名的关键：

💡 注意：Google 按75 分位统计，即 75% 的页面访问都要达到"良好"才算达标。

各框架的最佳实践映射

web-quality-skills 是框架无关的，但 README 内置了主流框架的速查映射，这是它"跨框架通用"的核心价值：

也就是说：同一份技能，写 React 项目时给出 Next.js 的建议，写 Svelte 项目时给出 SvelteKit 的建议——优化标准统一，落地方式适配。

性能优化关注的重点

performance 技能 覆盖的关键方向，适合新手按顺序排查：

1. 服务器响应：TTFB 目标 < 800ms，优先用 CDN 与缓存
2. 关键渲染路径：内联首屏 CSS、延迟非关键样式
3. JavaScript：删除未用代码、路由级代码分割、defer/async加载
4. 图片：WebP/AVIF 格式、正确尺寸、视口外懒加载
5. 字体：font-display: swap、预加载关键字体
6. 缓存：静态资源长 TTL，带哈希文件名启用不可变缓存

LCP 单指标的完整排查手册（时间线图解、逐条优化方案）见 references/LCP.md。

用自然语言触发技能

安装后，直接用日常语言描述任务即可，例如：

• "审计这个页面的网页质量问题"
• "优化性能并修复 Core Web Vitals"
• "审查可访问性并给出改进建议"
• "让这篇文章页 SEO 就绪"

AI 会自动匹配对应技能，输出按严重级别分类的发现（Critical / High / Medium / Low）和带代码示例的修复建议，格式定义在 web-quality-audit 技能 中。

质量底线：值得背下来的性能预算

web-quality-audit 内置了一份推荐的性能预算表，可以直接作为项目验收标准：

Lighthouse 分数目标：性能 ≥ 90、可访问性 100、最佳实践 ≥ 95、SEO ≥ 95。

此外，技能还附带了只读的 HTML 质量分析脚本，输出结构化 JSON，方便接入 CI 流程；WCAG 参考清单在 references/WCAG.md。

总结：一份跨框架的网页质量"军火库"

web-quality-skills 的价值在于三点：

• ✅跨框架：React、Vue、Svelte、Astro、纯 HTML 一套标准全搞定
• ✅即装即用：一行命令安装到 Claude Code / Codex / Cursor，自然语言触发
• ✅标准可量化：150+ 检查项、明确的性能预算和分数目标，优化结果可衡量

不管你是新手还是资深开发者，把它装进 AI 编码助手，网页性能优化就从"凭经验"变成了"照标准执行"。

延伸阅读：README.md（完整功能与阈值表）· docs/codex-setup.md（Codex 安装指南）· LICENSE（MIT 协议）

【免费下载链接】web-quality-skillsAgent Skills for optimizing web quality based on Lighthouse and Core Web Vitals.项目地址: https://gitcode.com/gh_mirrors/we/web-quality-skills