name: web-quality-audit description: 全面的Web质量审计，涵盖性能、可访问性、SEO和最佳实践。在用户要求“审计我的网站”、“审查Web质量”、“运行Lighthouse审计”、“检查页面质量”或“优化我的网站”时使用。 license: MIT metadata: author: web-quality-skills version: “1.0”

Web质量审计

基于Google Lighthouse审计的全面质量审查。覆盖性能、可访问性、SEO和最佳实践，包含150多项检查。

工作原理

分析提供的代码/项目以发现质量问题
按严重性分类发现的问题（关键、高、中、低）
提供具体、可操作的建议
包含修复代码示例

审计类别

性能（占典型问题的40%）

核心网络指标 — 必须通过以获得良好页面体验：

LCP（最大内容绘制）< 2.5秒。 最大的可见元素必须快速渲染。优化图像、字体和服务器响应时间。
INP（交互到下一次绘制）< 200毫秒。 用户交互必须感觉即时。减少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站点地图。 列出所有重要页面。提交到搜索控制台。
规范URL。 防止重复内容问题。
重要页面无noindex。 检查meta robots和头部。

页面SEO：

唯一标题标签。 50-60个字符。包含主要关键词。
元描述。 150-160个字符。引人注目且唯一。
标题层次。 单个<h1>。逻辑标题结构。
描述性链接文本。 不是“点击这里”或“阅读更多”。

技术SEO：

移动友好。 响应式设计。点击目标≥48像素。
HTTPS。 需要安全连接。
快速加载。 性能直接影响排名。
结构化数据。 JSON-LD用于富片段（文章、产品、FAQ等）。

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

安全性：

全面HTTPS。 无混合内容。启用HSTS。
无漏洞库。 保持依赖项更新。
CSP头部。 内容安全策略以防止XSS。
无暴露源映射。 在生产构建中。

现代标准：

无废弃API。 替换document.write、同步XHR等。
有效文档类型。 使用<!DOCTYPE html>。
声明字符集。 <meta charset="UTF-8">作为<head>中第一个元素。
无浏览器错误。 清理控制台。无CORS问题。

UX模式：

无侵入性插页。 尤其是在移动设备上。
清晰权限请求。 仅在需要时请求，并提供上下文。
无误导按钮。 按钮功能与描述一致。

严重性级别

级别	描述	行动
关键	安全漏洞、完全失败	立即修复
高	核心网络指标失败、主要可访问性障碍	启动前修复
中	性能机会、SEO改进	在冲刺中修复
低	次要优化、代码质量	方便时修复

审计输出格式

执行审计时，结构化发现如下：

## 审计结果

### 关键问题（发现X个）
- **[类别]** 问题描述。文件：`path/to/file.js:123`
  - **影响：** 为什么这很重要
  - **修复：** 具体代码更改或建议

### 高优先级（发现X个）
...

### 摘要
- 性能：X个问题（Y个关键）
- 可访问性：X个问题（Y个关键）
- SEO：X个问题
- 最佳实践：X个问题

### 推荐优先级
1. 首先修复这个因为...
2. 然后处理...
3. 最后优化...

快速检查清单

每次部署前

[ ] 核心网络指标通过
[ ] 无可访问性错误（axe/Lighthouse）
[ ] 无控制台错误
[ ] HTTPS工作
[ ] 元标签存在

每周审查

[ ] 检查搜索控制台的问题
[ ] 审查核心网络指标趋势
[ ] 更新依赖项
[ ] 用屏幕阅读器测试

每月深度检查

[ ] 完整Lighthouse审计
[ ] 性能分析
[ ] 可访问性审计与真实用户
[ ] SEO关键词审查

参考

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