web-quality-audit

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Web quality audit

网页质量审计

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

基于Google Lighthouse审计的全面质量评估，涵盖性能、可访问性、SEO及最佳实践四大维度，包含150+项检查内容。

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

分析提供的代码/项目，识别质量问题
按严重程度（Critical、High、Medium、Low）分类问题
提供具体、可落地的修复建议
附带修复示例代码

Audit categories

审计维度

Performance (40% of typical issues)

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

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.

Core Web Vitals —— 是良好页面体验的必备指标：

LCP（Largest Contentful Paint）< 2.5秒。页面最大可见元素需快速渲染。优化图片、字体及服务器响应时间。
INP（Interaction to Next Paint）< 200毫秒。用户交互需即时响应。减少JavaScript执行时间，拆分长任务。
CLS（Cumulative Layout Shift）< 0.1。页面内容不得随意跳动。为图片、嵌入内容及广告设置明确尺寸。

资源优化：

压缩图片。使用WebP/AVIF格式并提供降级方案。通过
```
srcset
```
提供适配尺寸的图片。
精简JavaScript。移除未使用代码，采用代码分割，延迟加载非关键脚本。
优化CSS。提取关键CSS，移除未使用样式，避免使用
```
@import
```
。
高效字体加载。使用
```
font-display: swap
```
，预加载关键字体，仅包含所需字符子集。

加载策略：

预连接第三方源。为第三方域名添加
```
<link rel="preconnect">
```
。
预加载关键资源。LCP图片、字体及首屏CSS。
懒加载首屏以下内容。图片、iframe及重型组件。
高效缓存。为静态资源设置长缓存TTL，为哈希文件启用不可变缓存。

Accessibility (30% of typical issues)

可访问性（占典型问题的30%）

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.

可感知性：

文本替代方案。每个
```
<img>
```
标签需包含有意义的
```
alt
```
文本。装饰性图片使用
```
alt=""
```
。
色彩对比度。普通文本最低对比度为4.5:1，大文本为3:1（符合WCAG AA标准）。
不单独依赖颜色。搭配图标、图案或文本作为颜色标识的补充。
字幕与转录。视频需配字幕，音频需提供文字转录。

可操作性：

键盘可访问。所有功能均可通过键盘操作，无键盘陷阱。
焦点可见。所有交互元素需有清晰的焦点指示器。
跳转链接。为键盘用户提供「跳转到主内容」的链接。
充足操作时间。用户可延长时间限制，无自动推进内容（需提供控制按钮）。

可理解性：

页面语言设置。在
```
<html>
```
标签上设置
```
lang
```
属性。
导航一致性。所有页面采用相同的导航结构。
错误标识。表单错误需清晰描述，并关联到对应字段。
标签与说明。所有表单输入框需关联对应标签。

健壮性：

有效HTML。无重复ID，元素嵌套正确。
正确使用ARIA。优先使用原生元素，ARIA角色需与实际行为匹配。
名称、角色、值。交互元素需具备可访问名称及正确角色。

SEO (15% of typical issues)

SEO（占典型问题的15%）

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

可抓取性：

有效的robots.txt。不得阻止重要资源。
XML站点地图。包含所有重要页面，并提交至Search Console。
规范URL。避免重复内容问题。
重要页面无noindex标签。检查meta robots及响应头。

页面SEO：

唯一标题标签。长度为50-60字符，包含核心关键词。
Meta描述。长度为150-160字符，具备吸引力且唯一。
标题层级。单个
```
<h1>
```
标签，层级结构逻辑清晰。
描述性链接文本。避免使用「点击这里」或「阅读更多」。

技术SEO：

移动端友好。响应式设计，点击目标尺寸≥48px。
HTTPS协议。需使用安全连接。
加载速度快。性能直接影响排名。
结构化数据。使用JSON-LD实现富文本片段（文章、产品、FAQ等）。

Best practices (15% of typical issues)

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

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.

安全：

全站HTTPS。无混合内容，启用HSTS。
无易受攻击的依赖库。保持依赖项更新。
CSP头。配置Content Security Policy防止XSS攻击。
生产环境不暴露Source Map。

现代标准：

无废弃API。替换
```
document.write
```
、同步XHR等。
有效文档类型。使用
```
<!DOCTYPE html>
```
。
声明字符编码。
```
<meta charset="UTF-8">
```
需放在
```
<head>
```
的第一个元素位置。
无浏览器错误。控制台无报错，无CORS问题。

UX模式：

无侵入式弹窗。移动端尤其需注意。
清晰的权限请求。仅在必要时请求权限，并提供上下文说明。
无误导性按钮。按钮功能需与描述一致。

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

级别	描述	操作
Critical	安全漏洞、完全功能故障	立即修复
High	Core Web Vitals不达标、主要可访问性障碍	上线前修复
Medium	性能优化机会、SEO改进空间	迭代周期内修复
Low	次要优化、代码质量问题	方便时修复

Audit output format

审计输出格式

When performing an audit, structure findings as:

markdown

undefined

执行审计时，需按以下结构整理结果：

markdown

undefined

Audit results

审计结果

Critical issues (X found)

Critical（严重）问题（共发现X个）

[Category] Issue description. File:
```
path/to/file.js:123
```
- Impact: Why this matters
- Fix: Specific code change or recommendation

[分类] 问题描述。文件：
```
path/to/file.js:123
```
- 影响： 该问题的重要性
- 修复方案： 具体代码修改或建议

High priority (X found)

High（高优先级）问题（共发现X个）

...

Summary

总结

Performance: X issues (Y critical)
Accessibility: X issues (Y critical)
SEO: X issues
Best Practices: X issues

性能：X个问题（其中Y个为严重级别）
可访问性：X个问题（其中Y个为严重级别）
SEO：X个问题
最佳实践：X个问题

Recommended priority

Quick checklist

快速检查清单

Before every deploy

每次部署前

Weekly review

每周回顾

Monthly deep dive

月度深度检查

References

参考文档

For detailed guidelines on specific areas:

Performance Optimization
Core Web Vitals
Accessibility
SEO
Best Practices

如需特定领域的详细指南：

性能优化
Core Web Vitals
可访问性
SEO
最佳实践",