lighthouse ci

ライトハウスCI

概要

Lighthouse CI は、Lighthouse の結果に対する継続的な実行、保存、取得、アサートを可能な限り簡単に行うためのツール スイートです。

クイックスタート

一般的なプロジェクト構成の GitHub アクションを開始するには、次のファイルを GitHub リポジトリに追加します。他のプロバイダーやセットアップに関するより完全なウォークスルーと手順については、「はじめに」ガイドに従ってください。

.github/workflows/ci.yml

 name : CI
on : [push]
jobs :
  lighthouseci :
    runs-on : ubuntu-latest
    steps :
      - uses : actions/checkout@v3
      - uses : actions/setup-node@v3
        with :
          node-version : 18
      - run : npm install && npm install -g @lhci/[email protected]
      - run : npm run build
      - run : lhci autorun

特徴

• すべての PR と一緒に Lighthouse レポートを入手します。
• アクセシビリティ、SEO、オフライン サポート、パフォーマンスのベスト プラクティスにおける後退を防ぎます。
• パフォーマンス指標と Lighthouse スコアを長期にわたって追跡します。
• スクリプトと画像のパフォーマンス バジェットを設定して維持します。
• Lighthouse を何度も実行して差異を減らします。
• サイトの 2 つのバージョンを比較して、個々のリソースの改善と低下を見つけます。

ドキュメント

すでに継続的インテグレーションに精通しており、既存のプロセスがある場合は、「はじめに」から始めてください。

継続的インテグレーションに慣れていない場合は、「CI の概要」から始めてください。

• CI の概要
• はじめる
• 建築
• トラブルシューティング / FAQ
• 構成
• サーバ
• バージョン管理ポリシー

関連するコミュニティ プロジェクト

コミュニティによって作成された Lighthouse CI を使用するプロジェクトのコレクション。オープンソース プロジェクトで Lighthouse CI を使用している場合は、PR を開いてここに追加してください。

• Lighthouse CI GitHub Action - GitHub Actions を使用してすべての PR で Lighthouse CI を自動的に実行します。インフラストラクチャは必要ありません。

• Lighthouse CI スターター サンプル - ゼロから始めるときにテンプレートとして使用できる最小限のサンプル リポジトリは、create-react-app を使用した初心者向けのクイックスタート ガイドを提供します。

• Lighthouse CI 比較アクション - 現在のコミット実行を祖先コミットと比較し、相違点を含むオブジェクトと、さまざまな目的に使用できるマークダウン テーブルを作成する Lighthouse CI Github アクション。

コミュニティガイド

Lighthouse CI の使用に関してコミュニティによって作成された非公式のブログ投稿、チュートリアル、ガイドのコレクション。プロジェクトで Lighthouse CI を使用するためのガイドを作成した場合は、PR を開いてここに追加してください。

注:これは公式ドキュメントではありません。続行する前に、Lighthouse CI に慣れ、「はじめに」を読むことをお勧めします。

• 静的 Web サイトジェネレーター用に Lighthouse CI を統合する - Lighthouse CI と Gatsby、Jekyll などの静的 Web サイトジェネレーターの統合に関する記事。
• Google Lighthouse 監査の自動化と結果の Azure へのアップロード - この記事では、Web サイトに対して実行するように Lighthouse CI を構成し、ローカルと Azure の両方で実行されている Lighthouse CI サーバーの Docker コンテナーに結果をアップロードする方法について説明します。

貢献する

lighthouse-ci への貢献を歓迎します。始めるには、貢献ガイドをお読みください。