SuperAPI AI 工具集

web-quality-audit

测试与质量

查看项目

更新于 10-15 15:31

技能介绍

用途

Web Quality Audit 用于对网页或项目进行综合质量审查,其审查标准基于 Google Lighthouse 审计,覆盖性能、无障碍、SEO 和最佳实践四大类别,共包含 150 多项检查。当用户提出“audit my site”“review web”等需求时,可使用该技能。

主要能力

该技能会分析所提供的代码或项目中的质量问题,按严重程度(Critical、High、Medium、Low)对发现的问题进行分类,提供具体可执行的建议,并包含修复用的代码示例。

性能(通常占问题的 40%)

Core Web Vitals 是良好页面体验的必过项:

  • LCP(Largest Contentful Paint)< 2.5s。最大的可见元素必须快速渲染。优化图片、字体和服务器响应时间。
  • INP(Interaction to Next Paint)< 200ms。用户交互必须感觉即时。减少 JavaScript 执行时间,拆分长任务。
  • CLS(Cumulative Layout Shift)< 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 个字符。包含主要关键词。
  • Meta 描述。150-160 个字符。有吸引力且唯一。
  • 标题层级。单个 <h1>。逻辑标题结构。
  • 描述性链接文本。不要用“click here”或“read more”。

技术 SEO:

  • 移动友好。响应式设计。点击目标 ≥ 48px。
  • HTTPS。需要安全连接。
  • 快速加载。性能直接影响排名。
  • 结构化数据。用于富媒体摘要的 JSON-LD(Article、Product、FAQ 等)。

最佳实践(通常占问题的 15%)

安全:

  • 全站 HTTPS。无混合内容。启用 HSTS。
  • 无漏洞库。保持依赖更新。
  • CSP 响应头。内容安全策略防止 XSS。
  • 不暴露 source map。在生产构建中。

现代标准:

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

UX 模式:

  • 无侵入式插页。尤其在移动端。
  • 清晰的权限请求。仅在需要时请求,并附上下文。
  • 无误导性按钮。按钮行为与描述一致。

严重程度

级别 描述 行动
Critical 安全漏洞、完全失败 立即修复
High Core Web Vitals 失败、重大无障碍障碍 发布前修复
Medium 性能机会、SEO 改进 冲刺内修复
Low 次要优化、代码质量 方便时修复

使用方式

执行审计时,按以下结构组织发现的问题:

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 正常工作
  • Meta 标签存在

每周审查:

  • 检查 Search Console 问题
  • 审查 Core Web Vitals 趋势
  • 更新依赖
  • 使用屏幕阅读器测试

每月深入检查:

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

适用场景

适用于需要对网站或 Web 项目进行综合质量审查的场景,包括部署前检查、定期质量回顾、性能与无障碍问题排查、SEO 优化评估等。

限制

该技能的具体安装方式、运行环境要求、是否收费、支持平台等信息暂未提供。