web-quality-audit

Web 质量审查

基于 Google Lighthouse 审计进行全面质量审查。涵盖性能、无障碍性、SEO 和最佳实践，共检查 150 多项指标。

工作原理

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：

• 唯一的 title 标签。 长度为 50–60 个字符，并包含主要关键词。
• Meta 描述。 长度为 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 模式：

• 不使用干扰性插屏。 尤其是在移动设备上。
• 清晰地请求权限。 仅在需要时请求，并提供上下文。
• 不使用误导性按钮。 按钮应言行一致。

严重级别

级别	描述	操作
严重	安全漏洞、完全失效	立即修复
高	核心 Web 指标未达标、严重的无障碍障碍	发布前修复
中	性能优化机会、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...

快速检查清单

每次部署前

• 核心 Web 指标通过
• 没有无障碍错误（axe/Lighthouse）
• 没有控制台错误
• HTTPS 正常工作
• 存在 Meta 标签

每周审查

• 在 Search Console 中检查问题
• 查看核心 Web 指标趋势
• 更新依赖项
• 使用屏幕阅读器进行测试

每月深入检查

• 完整的 Lighthouse 审计
• 性能分析
• 与真实用户一起进行无障碍审计
• SEO 关键词审查

参考资料

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

• 性能优化
• 核心 Web 指标
• 无障碍
• SEO
• 最佳实践