Lighthouse Action 使用教程

Lighthouse Action 使用教程

lighthouse-action 💡🏠 GitHub Action for running @GoogleChromeLabs Lighthouse webpage audits 项目地址: https://gitcode.com/gh_mirrors/li/lighthouse-action

1. 项目介绍

Lighthouse Action 是一个 GitHub Action，用于运行 Google Chrome Labs 的 Lighthouse 网页审计工具。Lighthouse 是一个开源的自动化工具，用于提高网页质量，它提供了性能、可访问性、最佳实践、SEO 和渐进式 Web 应用（PWA）的审计功能。Lighthouse Action 将这些审计功能集成到 GitHub Actions 中，使得开发者可以在 CI/CD 流程中自动执行网页审计，并将结果上传为 GitHub 仓库的工件。

2. 项目快速启动

2.1 安装与配置

首先，确保你已经有一个 GitHub 仓库，并且已经配置了 GitHub Actions。接下来，你可以按照以下步骤快速启动 Lighthouse Action。

2.2 创建 GitHub Actions 工作流

在你的 GitHub 仓库中，创建一个新的 .github/workflows 目录（如果它还不存在），并在其中创建一个新的 YAML 文件，例如 lighthouse-audit.yml。

2.3 添加 Lighthouse Action 到工作流

在 lighthouse-audit.yml 文件中，添加以下内容：

name: Lighthouse Audit

on: [push]

jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Run Lighthouse Audit
        uses: jakejarvis/lighthouse-action@master
        with:
          url: 'https://example.com'  # 替换为你要审计的网页 URL

      - name: Upload results as an artifact
        uses: actions/upload-artifact@master
        with:
          name: lighthouse-report
          path: ./report

2.4 提交并运行

将 lighthouse-audit.yml 文件提交到你的 GitHub 仓库，并推送到远程仓库。GitHub Actions 将会自动触发，运行 Lighthouse 审计，并将结果上传为工件。

3. 应用案例和最佳实践

3.1 应用案例

• 网页性能监控：通过定期运行 Lighthouse 审计，监控网页性能的变化，及时发现并解决性能问题。
• CI/CD 集成：在每次代码推送或合并请求时自动运行 Lighthouse 审计，确保新代码不会引入性能问题。
• 可访问性审计：通过 Lighthouse 的可访问性审计功能，确保网页对所有用户（包括残障用户）都是可访问的。

3.2 最佳实践

• 设置阈值：在未来的版本中，Lighthouse Action 将支持设置审计分数的阈值，建议在生产环境中使用此功能，确保网页质量达到预期标准。
• 定期审计：建议定期运行 Lighthouse 审计，监控网页性能和质量的变化，及时发现并解决问题。
• 结合其他工具：可以将 Lighthouse Action 与其他性能监控工具（如 Google Analytics、New Relic 等）结合使用，全面监控网页性能。

4. 典型生态项目

• Lighthouse CI：Lighthouse CI 是一个用于持续集成和持续部署的 Lighthouse 工具，可以与 Lighthouse Action 结合使用，提供更全面的性能监控和审计功能。
• Google Chrome DevTools：Lighthouse 是 Google Chrome DevTools 的一部分，开发者可以直接在 Chrome 浏览器中使用 Lighthouse 进行网页审计。
• WebPageTest：WebPageTest 是一个开源的网页性能测试工具，可以与 Lighthouse 结合使用，提供更详细的性能分析和优化建议。

通过以上步骤和最佳实践，你可以轻松地将 Lighthouse Action 集成到你的 GitHub 工作流中，提升网页质量和性能。

lighthouse-action 💡🏠 GitHub Action for running @GoogleChromeLabs Lighthouse webpage audits 项目地址: https://gitcode.com/gh_mirrors/li/lighthouse-action