网站质量审计工具 - 基于Lighthouse的全面性能、SEO、无障碍访问检查与优化建议

web-quality-audit by davila7/claude-code-templates

151 周安装量

24,200 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/davila7/claude-code-templates --skill web-quality-audit

性能优化 SEO 测试

🇨🇳中文介绍

网站质量审计

基于 Google Lighthouse 审计的全面质量审查。涵盖 150 多项检查，包括性能、无障碍访问、SEO 和最佳实践。

工作原理

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

审计类别

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

核心 Web 指标 — 必须通过才能获得良好的页面体验：

LCP（最大内容绘制）< 2.5 秒。 最大的可见元素必须快速渲染。优化图像、字体和服务器响应时间。
INP（下一次绘制交互）< 200 毫秒。 用户交互必须感觉即时。减少 JavaScript 执行时间并拆分长任务。
CLS（累积布局偏移）< 0.1。 内容不得跳动。为图像、嵌入内容和广告设置明确的尺寸。

资源优化：

压缩图像。 使用 WebP/AVIF 格式并提供回退方案。通过 srcset 提供正确尺寸的图像。
最小化 JavaScript。 移除未使用的代码。使用代码分割。延迟非关键脚本。
优化 CSS。 提取关键 CSS。移除未使用的样式。避免使用 @import。
高效字体。 使用 font-display: swap。预加载关键字体。子集化到所需字符。

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

无障碍访问（约占典型问题的 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。 检查元机器人标签和标头。

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

移动友好。 响应式设计。点击目标 ≥ 48px。
HTTPS。 需要安全连接。
快速加载。 性能直接影响排名。
结构化数据。 用于富媒体摘要的 JSON-LD（文章、产品、常见问题解答等）。

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

全面使用 HTTPS。 没有混合内容。启用 HSTS。
没有易受攻击的库。 保持依赖项更新。
CSP 标头。 内容安全策略以防止 XSS。
不暴露源映射。 在生产构建中。

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

用户体验模式：

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

级别	描述	操作
严重	安全漏洞，完全失败	立即修复
高	核心 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 关键词审查

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

🇺🇸English

Web quality audit

Comprehensive quality review based on Google Lighthouse audits. Covers Performance, Accessibility, SEO, and Best Practices across 150+ checks.

How it works

Analyze the provided code/project for quality issues
Categorize findings by severity (Critical, High, Medium, Low)
Provide specific, actionable recommendations
Include code examples for fixes

Audit categories

Performance (40% of typical issues)

Core Web Vitals — Must pass for good page experience:

LCP (Largest Contentful Paint) < 2.5s. The largest visible element must render quickly. Optimize images, fonts, and server response time.
INP (Interaction to Next Paint) < 200ms. User interactions must feel instant. Reduce JavaScript execution time and break up long tasks.
CLS (Cumulative Layout Shift) < 0.1. Content must not jump around. Set explicit dimensions on images, embeds, and ads.

Resource Optimization:

Compress images. Use WebP/AVIF with fallbacks. Serve correctly sized images via srcset.
Minimize JavaScript. Remove unused code. Use code splitting. Defer non-critical scripts.
Optimize CSS. Extract critical CSS. Remove unused styles. Avoid @import.
Efficient fonts. Use font-display: swap. Preload critical fonts. Subset to needed characters.

Loading Strategy:

Preconnect to origins. Add <link rel="preconnect"> for third-party domains.
Preload critical assets. LCP images, fonts, and above-fold CSS.
Lazy load below-fold content. Images, iframes, and heavy components.
Cache effectively. Long cache TTLs for static assets. Immutable caching for hashed files.

Accessibility (30% of typical issues)

Perceivable:

Text alternatives. Every <img> has meaningful alt text. Decorative images use alt="".
Color contrast. Minimum 4.5:1 for normal text, 3:1 for large text (WCAG AA).
Don't rely on color alone. Use icons, patterns, or text alongside color indicators.
Captions and transcripts. Video has captions. Audio has transcripts.

Operable:

Keyboard accessible. All functionality available via keyboard. No keyboard traps.
Focus visible. Clear focus indicators on all interactive elements.
Skip links. Provide "Skip to main content" for keyboard users.
Sufficient time. Users can extend time limits. No auto-advancing content without controls.

Understandable:

Page language. Set lang attribute on <html>.
Consistent navigation. Same navigation structure across pages.
Error identification. Form errors clearly described and associated with fields.
Labels and instructions. All form inputs have associated labels.

Robust:

Valid HTML. No duplicate IDs. Properly nested elements.
ARIA used correctly. Prefer native elements. ARIA roles match behavior.
Name, role, value. Interactive elements have accessible names and correct roles.

SEO (15% of typical issues)

Crawlability:

Valid robots.txt. Doesn't block important resources.
XML sitemap. Lists all important pages. Submitted to Search Console.
Canonical URLs. Prevent duplicate content issues.
No noindex on important pages. Check meta robots and headers.

On-Page SEO:

Unique title tags. 50-60 characters. Primary keyword included.
Meta descriptions. 150-160 characters. Compelling and unique.
Heading hierarchy. Single <h1>. Logical heading structure.
Descriptive link text. Not "click here" or "read more".

Technical SEO:

Mobile-friendly. Responsive design. Tap targets ≥ 48px.
HTTPS. Secure connection required.
Fast loading. Performance directly impacts ranking.
Structured data. JSON-LD for rich snippets (Article, Product, FAQ, etc.).

Best practices (15% of typical issues)

Security:

HTTPS everywhere. No mixed content. HSTS enabled.
No vulnerable libraries. Keep dependencies updated.
CSP headers. Content Security Policy to prevent XSS.
No exposed source maps. In production builds.

Modern Standards:

No deprecated APIs. Replace document.write, synchronous XHR, etc.
Valid doctype. Use <!DOCTYPE html>.
Charset declared. <meta charset="UTF-8"> as first element in <head>.
No browser errors. Clean console. No CORS issues.

UX Patterns:

No intrusive interstitials. Especially on mobile.
Clear permission requests. Only ask when needed, with context.
No misleading buttons. Buttons do what they say.

Severity levels

Level	Description	Action
Critical	Security vulnerabilities, complete failures	Fix immediately
High	Core Web Vitals failures, major a11y barriers	Fix before launch
Medium	Performance opportunities, SEO improvements	Fix within sprint
Low	Minor optimizations, code quality	Fix when convenient

Audit output format

When performing an audit, structure findings as:

## 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...

Quick checklist

Before every deploy

Core Web Vitals passing
No accessibility errors (axe/Lighthouse)
No console errors
HTTPS working
Meta tags present

Weekly review

Check Search Console for issues
Review Core Web Vitals trends
Update dependencies
Test with screen reader

Monthly deep dive

Full Lighthouse audit
Performance profiling
Accessibility audit with real users
SEO keyword review

References

For detailed guidelines on specific areas:

Weekly Installs

Repository

davila7/claude-…emplates

GitHub Stars

22.6K

First Seen

Feb 3, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

codex85

opencode84

gemini-cli83

github-copilot83

kimi-cli81

amp81

Schema标记专家指南：结构化数据实现与SEO优化，提升富媒体搜索结果

31,900 周安装