用途
Web Quality Audit 用于对网页或项目进行综合质量审查,其审查标准基于 Google Lighthouse 审计,覆盖性能、无障碍、SEO 和最佳实践四大类别,共包含 150 多项检查。当用户提出“audit my site”“review web”等需求时,可使用该技能。
主要能力
该技能会分析所提供的代码或项目中的质量问题,按严重程度(Critical、High、Medium、Low)对发现的问题进行分类,提供具体可执行的建议,并包含修复用的代码示例。
性能(通常占问题的 40%)
Core Web Vitals 是良好页面体验的必过项:
- LCP(Largest Contentful Paint)< 2.5s。最大的可见元素必须快速渲染。优化图片、字体和服务器响应时间。
- INP(Interaction to Next Paint)< 200ms。用户交互必须感觉即时。减少 JavaScript 执行时间,拆分长任务。
- CLS(Cumulative Layout Shift)< 0.1。内容不得跳动。为图片、嵌入内容和广告设置明确尺寸。
资源优化:
- 压缩图片。使用 WebP/AVIF 并提供回退方案。通过 srcset 提供尺寸正确的图片。
- 最小化 JavaScript。移除未使用代码。使用代码分割。延迟非关键脚本。
- 优化 CSS。提取关键 CSS。移除未使用样式。避免 @import。
- 高效字体。使用 font-display: swap。预加载关键字体。按需子集化字符。
加载策略:
- 预连接来源。为第三方域名添加 <link rel="preconnect">。
- 预加载关键资源。LCP 图片、字体和首屏 CSS。
- 懒加载首屏以下内容。图片、iframe 和重型组件。
- 有效缓存。静态资源使用长缓存 TTL。带哈希文件使用不可变缓存。
无障碍(通常占问题的 30%)
可感知:
- 文本替代。每个 <img> 都有有意义的 alt 文本。装饰性图片使用 alt=""。
- 颜色对比度。普通文本最低 4.5:1,大文本 3:1(WCAG AA)。
- 不单独依赖颜色。在颜色指示之外使用图标、图案或文本。
- 字幕和文字稿。视频有字幕。音频有文字稿。
可操作:
- 键盘可访问。所有功能均可通过键盘使用。无键盘陷阱。
- 焦点可见。所有交互元素有清晰的焦点指示。
- 跳转链接。为键盘用户提供“跳转到主要内容”。
- 充足时间。用户可延长时间限制。无自动推进内容且无控件。
可理解:
- 页面语言。在 <html> 上设置 lang 属性。
- 一致的导航。各页面导航结构相同。
- 错误识别。表单错误清晰描述并与字段关联。
- 标签和说明。所有表单输入都有相关标签。
健壮性:
- 有效 HTML。无重复 ID。元素正确嵌套。
- 正确使用 ARIA。优先使用原生元素。ARIA 角色与行为匹配。
- 名称、角色、值。交互元素具有可访问名称和正确角色。
SEO(通常占问题的 15%)
可抓取性:
- 有效的 robots.txt。不阻止重要资源。
- XML 站点地图。列出所有重要页面。已提交到 Search Console。
- 规范 URL。防止重复内容问题。
- 重要页面无 noindex。检查 meta robots 和响应头。
页面内 SEO:
- 唯一标题标签。50-60 个字符。包含主要关键词。
- Meta 描述。150-160 个字符。有吸引力且唯一。
- 标题层级。单个 <h1>。逻辑标题结构。
- 描述性链接文本。不要用“click here”或“read more”。
技术 SEO:
- 移动友好。响应式设计。点击目标 ≥ 48px。
- HTTPS。需要安全连接。
- 快速加载。性能直接影响排名。
- 结构化数据。用于富媒体摘要的 JSON-LD(Article、Product、FAQ 等)。
最佳实践(通常占问题的 15%)
安全:
- 全站 HTTPS。无混合内容。启用 HSTS。
- 无漏洞库。保持依赖更新。
- CSP 响应头。内容安全策略防止 XSS。
- 不暴露 source map。在生产构建中。
现代标准:
- 无废弃 API。替换 document.write、同步 XHR 等。
- 有效 doctype。使用 <!DOCTYPE html>。
- 声明字符集。<meta charset="UTF-8"> 作为 <head> 中第一个元素。
- 无浏览器错误。控制台干净。无 CORS 问题。
UX 模式:
- 无侵入式插页。尤其在移动端。
- 清晰的权限请求。仅在需要时请求,并附上下文。
- 无误导性按钮。按钮行为与描述一致。
严重程度
| 级别 | 描述 | 行动 |
|---|---|---|
| Critical | 安全漏洞、完全失败 | 立即修复 |
| High | Core Web Vitals 失败、重大无障碍障碍 | 发布前修复 |
| Medium | 性能机会、SEO 改进 | 冲刺内修复 |
| Low | 次要优化、代码质量 | 方便时修复 |
使用方式
执行审计时,按以下结构组织发现的问题:
Audit results
Critical issues (X found)
- [Category] Issue description. File:
path/to/file.js:123- Impact: Why this matters
- Fix: Specific code change or recommendation
High priority (X found)
...
Summary
- Performance: X issues (Y critical)
- Accessibility: X issues (Y critical)
- SEO: X issues
- Best Practices: X issues
Recommended priority
- First fix this because...
- Then address...
- Finally optimize...
快速检查清单
每次部署前:
- Core Web Vitals 通过
- 无无障碍错误(axe/Lighthouse)
- 无控制台错误
- HTTPS 正常工作
- Meta 标签存在
每周审查:
- 检查 Search Console 问题
- 审查 Core Web Vitals 趋势
- 更新依赖
- 使用屏幕阅读器测试
每月深入检查:
- 完整 Lighthouse 审计
- 性能分析
- 与真实用户进行无障碍审计
- SEO 关键词审查
适用场景
适用于需要对网站或 Web 项目进行综合质量审查的场景,包括部署前检查、定期质量回顾、性能与无障碍问题排查、SEO 优化评估等。
限制
该技能的具体安装方式、运行环境要求、是否收费、支持平台等信息暂未提供。