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技能作用典型触发语web-quality-audit全站综合质量审计150 检查项审计一下我的网站performance加载速度、运行时性能优化加快我的站点core-web-vitalsLCP / INP / CLS 专项优化修复 LCP 问题accessibilityWCAG 2.2 可访问性审计做个 a11y 审查seo搜索优化、结构化数据让页面 SEO 就绪best-practices安全头、现代 API、代码质量做安全审计快速上手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 的三个指标展开这是影响搜索排名的关键指标含义良好需改进差LCP最大内容绘制加载速度≤ 2.5s2.5s–4s 4sINP交互到下一次绘制响应性≤ 200ms200ms–500ms 500msCLS累计布局偏移视觉稳定≤ 0.10.1–0.25 0.25 注意Google 按75 分位统计即 75% 的页面访问都要达到良好才算达标。各框架的最佳实践映射web-quality-skills 是框架无关的但 README 内置了主流框架的速查映射这是它跨框架通用的核心价值技术栈推荐优化手段React / Next.jsnext/image、React.lazy()、Suspense、useCallback/useMemoVue / Nuxtnuxt/image、异步组件、v-once、计算属性Svelte / SvelteKit{#await}、svelte:image、响应式语句AstroImage组件、部分水合partial hydration、视图过渡纯 HTML原生懒加载、picture、preconnect 提示也就是说同一份技能写 React 项目时给出 Next.js 的建议写 Svelte 项目时给出 SvelteKit 的建议——优化标准统一落地方式适配。性能优化关注的重点performance 技能 覆盖的关键方向适合新手按顺序排查服务器响应TTFB 目标 800ms优先用 CDN 与缓存关键渲染路径内联首屏 CSS、延迟非关键样式JavaScript删除未用代码、路由级代码分割、defer/async加载图片WebP/AVIF 格式、正确尺寸、视口外懒加载字体font-display: swap、预加载关键字体缓存静态资源长 TTL带哈希文件名启用不可变缓存LCP 单指标的完整排查手册时间线图解、逐条优化方案见 references/LCP.md。用自然语言触发技能安装后直接用日常语言描述任务即可例如审计这个页面的网页质量问题优化性能并修复 Core Web Vitals审查可访问性并给出改进建议让这篇文章页 SEO 就绪AI 会自动匹配对应技能输出按严重级别分类的发现Critical / High / Medium / Low和带代码示例的修复建议格式定义在 web-quality-audit 技能 中。质量底线值得背下来的性能预算web-quality-audit 内置了一份推荐的性能预算表可以直接作为项目验收标准资源类型预算页面总重量 1.5 MBJavaScript压缩后 300 KBCSS压缩后 100 KB首屏图片 500 KB字体 100 KB第三方脚本 200 KBLighthouse 分数目标性能 ≥ 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.mdCodex 安装指南· LICENSEMIT 协议【免费下载链接】web-quality-skillsAgent Skills for optimizing web quality based on Lighthouse and Core Web Vitals.项目地址: https://gitcode.com/gh_mirrors/we/web-quality-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考