web-quality-audit

# Web 质量审计 基于 Google Lighthouse 审计的全面质量审查。涵盖性能、可访问性、SEO 和 150 多项最佳实践检查。 ## 工作原理 1. 分析提供的代码/项目以发现质量问题 2. 按严重程度（严重、高、中、低）对发现的问题进行分类 3. 提供具体的、可操作的建议 4. 包含修复的代码示例 ## 审计类别 ### 性能 (典型问题的 40%) **核心 Web 指标 (Core Web Vitals)** — 必须通过以获得良好的页面体验： * **LCP (最大内容渲染时间) < 2.5s。** 最大的可见元素必须快速渲染。优化图片、字体和服务器响应时间。 * **INP (交互到下一次绘制延迟) < 200ms。** 用户交互必须感觉即时。减少 JavaScript 执行时间并拆分长任务。 * **CLS (累积布局偏移) < 0.1。** 内容不能跳动。为图片、嵌入内容和广告设置明确的尺寸。 **资源优化：** * **压缩图片。** 使用 WebP/AVIF 并提供回退方案。通过 `srcset` 提供正确尺寸的图片。 * **最小化 JavaScript。** 移除未使用的代码。使用代码拆分。延迟加载非关键脚本。 * **优化 CSS。** 提取关键 CSS。移除未使用的样式。避免使用 `@import`。 * **高效字体。** 使用 `font-display: swap`。预加载关键字体。仅保留所需字符的子集。 **加载策略：** * **预连接源 (Preconnect)。** 为第三方域名添加 ``。 * **预加载关键资源。** LCP 图片、字体和首屏 CSS。 * **延迟加载首屏下方内容。** 图片、iframe 和重型组件。 * **有效缓存。** 静态资源使用较长的缓存 TTL。哈希文件使用不可变缓存。 ### 可访问性 (典型问题的 30%) **可感知性：** * **文本替代。** 每个 `` 都有有意义的 `alt` 文本。装饰性图片使用 `alt=""`。 * **色彩对比度。** 普通文本至少 4.5:1，大文本 3:1 (WCAG AA 标准)。 * **不要仅依赖颜色。** 在颜色指示器旁边使用图标、图案或文本。 * **字幕和转录。** 视频有字幕。音频有转录。 **可操作性：** * **键盘可访问。** 所有功能均可通过键盘使用。没有键盘陷阱。 * **焦点可见。** 所有交互元素都有清晰的焦点指示器。 * **跳过链接。** 为键盘用户提供“跳过主要内容”链接。 * **充足的时间。** 用户可以延长时限。没有控件的情况下，内容不得自动推进。 **可理解性：** * **页面语言。** 在 `` 上设置 `lang` 属性。