用途
Web Quality Audit 用于对网页或项目进行综合质量审查，审查标准基于 Google Lighthouse 审计。它覆盖性能、无障碍（Accessibility）、SEO 和最佳实践四大类别，包含 150 多项检查。当被要求“审计我的站点”“审查网页质量”等任务时使用。
工作方式
- 分析提供的代码或项目，查找质量问题。
- 按严重程度对发现的问题分类：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>，逻辑清晰的标题结构。
- 描述性链接文本，不用“点击这里”或“阅读更多”。
技术 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 关键词审查
参考
针对特定领域的详细指南：Performance Optimization、Core Web Vitals、Accessibility、SEO、Best Practices。