SKILL.md
readonly只读
name
web-quality-audit
description
全面的网页质量审计，涵盖性能、可访问性、SEO 和最佳实践。当被要求“审计我的网站”、“检查网页质量”、“运行 Lighthouse 审计”、“检查页面质量”或“优化我的网站”时使用。
网页质量审计
基于 Google Lighthouse 审计的全面质量审查。涵盖性能、可访问性、SEO 和最佳实践，共 150 多项检查。
Lighthouse v13 说明（2025 年 10 月+）。 Lighthouse 已将性能类别从逐项机会审计迁移到性能洞察审计（公告）。本技能此前引用的若干单项审计名称——First Meaningful Paint、No Document Write、Uses Passive Event Listeners、Uses Rel Preload——已被移除或合并。底层的建议未变，仍然适用；只是报告格式发生了变化。与 CLS 相关的审计（“布局偏移”、“非合成动画”、“未指定尺寸的图片”）现已合并为单个
cls-culprits-insight，图片审计合并为image-delivery-insight。将较旧的 Lighthouse JSON 输出视为超集，而非矛盾。
工作原理
- 分析提供的代码/项目，查找质量问题
- 按严重程度分类（严重、高、中、低）
- 提供具体、可操作的建议
- 包含修复的代码示例
审计类别
性能（典型问题的 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 站点地图。 列出所有重要页面。提交到 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 问题。
用户体验模式：
- 无侵入性插页广告。 尤其是在移动端。
- 清晰的权限请求。 仅在需要时请求，并附上上下文。
- 无误导按钮。 按钮按其所写执行。
严重级别
| 级别 | 描述 | 操作 |
|---|---|---|
| 严重 | 安全漏洞、完全失败 | 立即修复 |
| 高 | 核心网页指标失败、主要无障碍障碍 | 上线前修复 |
| 中 | 性能机会、SEO 改进 | 在冲刺内修复 |
| 低 | 次要优化、代码质量 | 方便时修复 |
审计输出格式
执行审计时，将发现结果结构化为：
## 审计结果
### 严重问题（发现 X 个）
- **[类别]** 问题描述。文件：`path/to/file.js:123`
- **影响：** 为何重要
- **修复：** 具体代码更改或建议
### 高优先级（发现 X 个）
...
### 总结
- 性能：X 个问题（Y 个严重）
- 可访问性：X 个问题（Y 个严重）
- SEO：X 个问题
- 最佳实践：X 个问题
### 推荐优先级
1. 首先修复此问题，因为...
2. 然后处理...
3. 最后优化...
快速检查清单
每次部署前
- [ ] 核心网页指标通过
- [ ] 无可访问性错误（axe/Lighthouse）
- [ ] 无控制台错误
- [ ] HTTPS 正常工作
- [ ] 元标签存在
每周审查
- [ ] 检查 Search Console 中的问题
- [ ] 审查核心网页指标趋势
- [ ] 更新依赖项
- [ ] 使用屏幕阅读器测试
每月深度检查
- [ ] 完整 Lighthouse 审计
- [ ] 性能分析
- [ ] 与真实用户进行可访问性审计
- [ ] SEO 关键词审查
参考
有关特定领域的详细指南，请参阅：
