name: 网页质量审计 description: 全面的网页质量审计，涵盖性能、可访问性、SEO和最佳实践。使用时当被要求“审计我的网站”、“审查网页质量”、“运行Lighthouse审计”、“检查页面质量”或“优化我的网站”。 license: MIT metadata: author: web-quality-skills version: ‘1.0’
网页质量审计
基于Google Lighthouse审计的全面质量审查。覆盖性能、可访问性、SEO和最佳实践，超过150项检查。
工作原理
- 分析提供的代码/项目以发现质量问题
- 按严重性分类发现的问题（关键、高、中、低）
- 提供具体的、可操作的建议
- 包括修复的代码示例
审计类别
性能（典型问题的40%）
核心Web指标 — 必须通过以获得良好的页面体验：
- 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站点地图。 列出所有重要页面。提交到Search Console。
- 规范URL。 防止重复内容问题。
- 重要页面无noindex。 检查meta robots和头部。
页面SEO：
- 唯一的标题标签。 50-60字符。包含主要关键词。
- 元描述。 150-160字符。有吸引力且唯一。
- 标题层次结构。 单个
<h1>。逻辑标题结构。 - 描述性链接文本。 不是“点击这里”或“阅读更多”。
技术SEO：
- 移动友好。 响应式设计。点击目标≥48px。
- HTTPS。 需要安全连接。
- 快速加载。 性能直接影响排名。
- 结构化数据。 用于富片段的JSON-LD（文章、产品、FAQ等）。
最佳实践（典型问题的15%）
安全：
- 处处HTTPS。 无混合内容。启用HSTS。
- 无漏洞库。 保持依赖项更新。
- CSP头部。 内容安全策略以防止XSS。
- 无暴露源映射。 在生产构建中。
现代标准：
- 无弃用API。 替换
document.write、同步XHR等。 - 有效文档类型。 使用
<!DOCTYPE html>。 - 声明字符集。
<meta charset="UTF-8">作为<head>中的第一个元素。 - 无浏览器错误。 清洁控制台。无CORS问题。
UX模式：
- 无侵入性插页广告。 尤其是在移动设备上。
- 清晰的权限请求。 仅在需要时询问，并附带上下文。
- 无误导按钮。 按钮做它们所说的事情。
严重性级别
| 级别 | 描述 | 行动 |
|---|---|---|
| 关键 | 安全漏洞、完全失败 | 立即修复 |
| 高 | 核心Web指标失败、主要可访问性障碍 | 在发布前修复 |
| 中 | 性能机会、SEO改进 | 在迭代中修复 |
| 低 | 次要优化、代码质量 | 方便时修复 |
审计输出格式
执行审计时，结构化发现如下：
## 审计结果
### 关键问题（找到X个）
- **[类别]** 问题描述。文件：`path/to/file.js:123`
- **影响：** 为什么这很重要
- **修复：** 具体的代码更改或建议
### 高优先级（找到X个）
...
### 摘要
- 性能：X个问题（Y个关键）
- 可访问性：X个问题（Y个关键）
- SEO：X个问题
- 最佳实践：X个问题
### 推荐优先级
1. 首先修复这个因为...
2. 然后处理...
3. 最后优化...
快速检查清单
每次部署前
- [ ] 核心Web指标通过
- [ ] 无可访问性错误（axe/Lighthouse）
- [ ] 无控制台错误
- [ ] HTTPS工作
- [ ] 元标签存在
每周审查
- [ ] 检查Search Console中的问题
- [ ] 审查核心Web指标趋势
- [ ] 更新依赖项
- [ ] 用屏幕阅读器测试
每月深入审查
- [ ] 完整Lighthouse审计
- [ ] 性能分析
- [ ] 与真实用户进行可访问性审计
- [ ] SEO关键词审查
参考
有关具体领域的详细指南：