web-quality-audit

Web 质量审计

基于 Google Lighthouse 审计的全面质量评估，涵盖 150 多项检查中的性能、无障碍访问、SEO 和最佳实践。

工作原理

1. 分析提供的代码／项目，查找质量问题
2. 按严重程度对发现的问题分类（严重、高、中、低）
3. 提供具体、可执行的建议
4. 提供修复问题的代码示例

审计类别

性能（典型问题的 40%）

Core Web Vitals — 良好的页面体验必须满足以下指标：

• LCP（最大内容绘制）< 2.5s。 最大的可见元素必须快速呈现。优化图片、字体和服务器响应时间。
• INP（下一次绘制交互）< 200ms。 用户交互必须感觉即时。减少 JavaScript 执行时间，并将长任务拆分。
• CLS（累积布局偏移）< 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 和 HTTP 标头。

页面 SEO：

• 标题标签应唯一。 长度为 50–60 个字符，并包含主要关键词。
• 元描述。 长度为 150–160 个字符，内容吸引人且各不相同。
• 标题层级。 仅使用一个 <h1>。标题结构应合乎逻辑。
• 链接文本应描述清晰。 不要使用“点击此处”或“阅读更多”。

技术 SEO：

• 适配移动设备。 采用响应式设计。点击目标 ≥ 48px。
• HTTPS。 必须使用安全连接。
• 快速加载。 性能会直接影响排名。
• 结构化数据。 使用 JSON-LD 展示丰富摘要（Article、Product、FAQ 等）。

最佳实践（典型问题的 15%）

安全性：

• 全站使用 HTTPS。 不存在混合内容。启用 HSTS。
• 不使用存在漏洞的库。 保持依赖项更新。
• CSP 标头。 使用内容安全策略防止 XSS。
• 不暴露源映射文件。 生产构建中不暴露。

现代标准：

• 不使用已弃用的 API。 替换 document.write、同步 XHR 等。
• 使用有效的 doctype。 使用 <!DOCTYPE html>。
• 声明字符集。 将 <meta charset="UTF-8"> 作为 <head> 中的第一个元素。
• 不出现浏览器错误。 保持控制台干净。避免 CORS 问题。

UX 模式：

• 不使用侵入式插页广告。 尤其是在移动设备上。
• 清楚说明权限请求。 仅在需要时请求，并说明原因。
• 不使用误导性按钮。 按钮的功能应与其描述一致。

严重级别

级别	描述	处理方式
严重	安全漏洞、完全失效	立即修复
高	Core Web Vitals 未达标、严重的无障碍障碍	发布前修复
中	性能优化机会、SEO 改进	在当前迭代中修复
低	小幅优化、代码质量	方便时修复

审核输出格式

执行审核时，请按以下结构整理问题：

## 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

1. First fix this because...
2. Then address...
3. Finally optimize...

快速检查清单

每次部署前

• Core Web Vitals 达标
• 没有无障碍错误（axe/Lighthouse）
• 没有控制台错误
• HTTPS 正常运行
• 元标签齐全

每周检查

• 检查 Search Console 中的问题
• 查看 Core Web Vitals 趋势
• 更新依赖项
• 使用屏幕阅读器进行测试

每月深入检查

• 完整的 Lighthouse 审核
• 性能分析
• 使用真实用户进行无障碍审核
• SEO 关键词检查

参考资料

有关特定领域的详细指南：

• 性能优化
• Core Web Vitals
• 无障碍
• SEO
• 最佳实践