Lighthouse CIおよびGitHubアクションによる継続的なパフォーマンス分析

無料のオープンソースツールであるLighthouseは、Webサイトのパフォーマンス、アクセシビリティ、プログレッシブWebアプリメトリック、SEOなどを包括的に評価します。 Chrome Devtools "Lighthouse"タブを介して最も簡単にアクセスできます。テストを実行した後にレポートを生成し、パブリックまたは認証ステータスに関係なくWebページ分析を簡素化します。非クローム/クロムユーザーは、コマンドライン監査にLighthouseのWebインターフェイス（パブリックページのみ）またはノードCLIを利用できます。

ただし、手動テストは非効率的です。 Lighthouse CIは、シームレスに連続統合に統合され、インラインプルリクエストフィードバックを提供し、パフォーマンスのしきい値に基づいて故障アラートをビルドします。パフォーマンス、SEO、アクセシビリティ、オフライン機能、ベストプラクティスへのコードの変更、パフォーマンス予算の実施、および時間の経過に伴うメトリックの変化の追跡を分析します。

このガイドでは、ローカル灯台CIのセットアップとGitHubアクションの統合について詳しく説明しています（ただし、Travis CI、Gitlab CI、Circle CIもサポートしています）。

地元の灯台CIセットアップ

開始する前に、node.js v10 lts以降があり、Google Chrome（Stable）があることを確認してください。灯台CI CLIをグローバルにインストールします。

 NPMインストール-G @LHCI/CLI

lhci --helpを使用して、利用可能なコマンド（執筆時点で8つ）を探索します。

構成ファイル（ .lighthouserc.js ）、環境変数、またはCLIフラグ（優先順位で）を使用して、構成は柔軟です。このガイドでは、構成ファイルを使用します。

プロジェクトのルートでlighthouserc.jsを作成します（gitトラッキングが想定されます。それ以外の場合は、ビルドコンテキストに環境変数を使用します）。

この基本的な構成は、静的なWebサイトのLighthouseレポートを収集し、それらを一時的なパブリックストレージにアップロードします。

 // lighthouserc.js
module.exports = {
  CI：{
    集める： {
      staticdistdir： './public'、
    }、
    アップロード： {
      ターゲット：「一時的な公共の貯蔵」、
    }、
  }、
};

カスタムサーバーを必要とするプロジェクトには、 startServerCommandとurlを使用してください。

 module.exports = {
  CI：{
    集める： {
      StartServerCommand： 'npm run server'、
      url：['http：// localhost：4000/']、
    }、
    アップロード： {
      ターゲット：「一時的な公共の貯蔵」、
    }、
  }、
};

サーバーコマンドが実行され、サーバーの準備が検出されます（デフォルト：10秒のタイムアウト）。 startServerReadyPatternとstartServerReadyTimeoutでパターンとタイムアウトをカスタマイズし、 numberOfRunsを使用した実行数をカスタマイズします。

 // lighthouserc.js
module.exports = {
  CI：{
    集める： {
      StartServerCommand： 'npm run server'、
      url：['http：// localhost：4000/']、
      StartServerReadPattern： 'サーバーはポート4000で実行されています'、
      StartServerReadyTimeOut：20000、// Milliseconds
      numberofruns：5、
    }、
    アップロード： {
      ターゲット：「一時的な公共の貯蔵」、
    }、
  }、
};

temporary-public-storageレポートは、Googleクラウドストレージ（一時的、公開可能）にレポートを提供します。代替ストレージオプションについては、ドキュメントを参照してください。

灯台CIを実行：

 LHCI Autorun

出力は、テスト結果を示し、URLをレポートします。

アサーション構成

assertプロパティを使用してテスト結果に基づいてビルド障害を構成することにより、灯台CIを強化します。

 // lighthouserc.js
module.exports = {
  CI：{
    assert：{
      プリセット： '灯台：no-pwa'、
      アサーション：{
        'カテゴリ：パフォーマンス'：['error'、{minscore：0.9}]、
        「カテゴリ：アクセシビリティ」：['Warn'、{minscore：0.9}]、
      }、
    }、
  }、
};

プリセット（ lighthouse:all 、 lighthouse:recommended 、 lighthouse:no-pwa ）は、迅速なアサーション構成を提供します。 assertions Objectまたはbudget.jsonファイルを使用してアサーションをカスタマイズします（performancebudget.ioを介して手動で作成または生成されます）。

GitHubアクションの統合

.github/workflow/lighthouse-ci.yamlを作成して、灯台CIをGitHubアクションと統合します。この例は、HugoのWebサイト用です。必要に応じて適応：

 ＃.github/workflow/lighthouse-ci.yaml
名前：灯台
オン：[プッシュ]
仕事：
  CI：
    runs-on：ubuntu-latest
    ステップ：
       - 名前：チェックアウトコード
        用途：アクション/チェックアウト@V2
        と：
          トークン：$ {{secrets.pat}}
          サブモジュール：再帰
       - 名前：Hugoのセットアップ
        用途：Peaceiris/Actions-Hugo@V2
        と：
          ヒューゴバージョン：「0.76.5」
          拡張：true
       - 名前：ビルドサイト
        実行：ヒューゴ
       - 名前：node.js 15.xを使用します
        使用：アクション/セットアップノード@v2
        と：
          ノードバージョン：15.x
       - 名前：灯台CIを実行します
        実行：|
          NPMインストール-G @LHCI/[電子メール保護]
          LHCI Autorun

このワークフローは、リポジトリ（個人アクセストークンを介してサブモジュールとプライベートリポジトリの処理）をチェックし、Hugoを設定し、サイトを構築し、node.jsをセットアップし、 lhci autorunを実行します。

GitHubステータスチェック

lighthouse ci githubアプリをインストールし、トークンを取得し、リポジトリシークレット（ LHCI_GITHUB_APP_TOKEN ）として追加して、lighthouse ci githubアプリをインストールして、インラインプルリクエストレポートのGithubステータスチェックを構成します。

灯台CIサーバー

プライベートまたは長期のレポートストレージと比較のために、Lighthouse CIサーバーを展開します（HerokuおよびDockerの展開手順はGitHubで入手できます）。

結論

包括的なテストのために構成に複数のURLを含めます（ホームページ、代表的な投稿など）。このガイドは、Lighthouse CIの機能を利用するための基盤を提供します。

以上がLighthouse CIおよびGitHubアクションによる継続的なパフォーマンス分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。