Google Lighthouse

持续更新中

思维脑图：

Google Lighthouse 是一个开源的自动化工具，用于提高网页的质量。它可以评估网页的性能、可访问性、SEO、最佳实践等多个方面，并提供详细的报告和改进建议。Lighthouse 可以作为 Chrome 开发者工具的一部分使用，也可以通过命令行工具、Node.js 模块、CI 集成等方式运行。

主要功能

1. 性能（Performance）：
   • 评估网页加载速度及响应性，给出综合评分。
   • 提供包括加载时间、交互时间、首次内容渲染（FCP）、首次有意义渲染（FMP）等指标。
2. 可访问性（Accessibility）：
   • 检查网页是否符合可访问性标准（如 WCAG），帮助开发者改善不同用户的访问体验。
   • 提供关于颜色对比、表单标签、可键盘操作等方面的反馈。
3. 最佳实践（Best Practices）：
   • 检查网页是否遵循当前的Web最佳实践，例如 HTTPS 安全连接、HTTP/2 支持、无漏洞的第三方库等。
4. SEO（Search Engine Optimization）：
   • 检查页面的 SEO 评分，帮助开发者了解页面是否对搜索引擎友好，包括元数据、标题、链接结构、网站地图等方面。
5. PWA（Progressive Web App）：
   • 评估网页是否符合渐进式网页应用（PWA）的标准，包括是否能够离线使用、加载速度、Web App 安装等。

如何使用

1. 通过 Chrome DevTools：
   • 在 Chrome 浏览器中，右键点击页面，选择“检查”打开开发者工具，然后切换到“Lighthouse”标签页，点击“生成报告”即可。
2. 通过命令行：
   • 首先需要用npm安装lighthouse ，npm install -g lighthouse
   • 使用 Lighthouse 的命令行工具 (lighthouse <url>)，例如lighthouse https://example.com，可以生成详细的报告并导出为 HTML 或 JSON 格式。
3. CI 集成：
   • Lighthouse 也可以集成到持续集成流程中，以便在每次代码变更后自动运行，帮助开发者及时发现和修复性能或可访问性问题。

生成的报告

• 每个报告包括一个综合评分（从 0 到 100），并详细列出每个领域的分数。
• 根据评分，Lighthouse 会给出优化建议，帮助开发者了解如何提升网页的质量。

优点

• 易于使用：通过浏览器工具即可运行，操作简单。
• 自动化：帮助开发者快速检测和修复潜在问题。
• 详细报告：提供具体的改进建议和具体的性能指标数据，帮助开发者优化网站。

Google Lighthouse 是开发者优化网站质量和性能的重要工具，能够帮助网站提升用户体验和搜索引擎排名。