Chrome Lighthouse 是一个开源的自动化工具，集成在 Chrome 开发者工具中，主要用于帮助开发者改进网页质量。它通过一系列审计规则，对网页的性能、可访问性、最佳实践、SEO 和 PWA（渐进式网页应用）等方面进行全面分析，并提供优化建议。以下是它的主要功能和用途： --- ### **1. 性能分析（Performance）** - **核心指标评分**：生成 0-100 分的性能评分，基于以下关键指标： - **First Contentful Paint (FCP)**：首次内容绘制时间。 - **Time to Interactive (TTI)**：页面达到完全可交互的时间。 - **Speed Index**：页面内容加载速度的视觉衡量。 - **Largest Contentful Paint (LCP)**：最大内容绘制时间。 - **Cumulative Layout Shift (CLS)**：累计布局偏移（衡量视觉稳定性）。 - **Total Blocking Time (TBT)**：总阻塞时间（衡量主线程阻塞程度）。 - **优化建议**：提供减少加载时间、优化资源加载顺序、压缩资源等具体建议。 --- ### **2. 可访问性（Accessibility）** - **无障碍审计**：检查网页是否符合 **WCAG（Web Content Accessibility Guidelines）** 标准。 - **常见问题检测**： - 元素对比度不足（如文字与背景色对比）。 - 缺失的 ARIA 标签或属性。 - 表单控件缺少标签。 - 非文本内容（如图片）缺少替代文本。 - **优化建议**：帮助开发者提升残障用户（如视障人士）的访问体验。 --- ### **3. 最佳实践（Best Practices）** - **代码与安全规范**：检查是否遵循现代 Web 开发的最佳实践，例如： - 正确使用 HTML、CSS 和 JavaScript。 - 是否启用了 HTTPS。 - 是否避免了已弃用的 API。 - 是否设置了正确的视口（viewport）以支持响应式设计。 - **用户体验建议**：如避免侵入性弹窗、确保页面可缓存等。 --- ### **4. SEO 优化（Search Engine Optimization）** - **搜索引擎友好性检查**： - 页面元标签（如 `