フロントエンドLighthouse CIを導入し、Webアプリケーションの継続的なパフォーマンス監視を行う方法を解説します。最適な速度と優れたユーザー体験を実現しましょう。
フロントエンドLighthouse CI：Webアプリケーションの継続的パフォーマンス監視
今日の急速に変化するデジタル環境において、ウェブサイトのパフォーマンスは最も重要です。読み込みが遅かったり、最適化が不十分なウェブサイトは、ユーザーの不満、エンゲージメントの低下、そして最終的にはビジネスへの悪影響につながる可能性があります。そこで登場するのがLighthouse CIです。このガイドでは、Lighthouse CIを導入して継続的なパフォーマンス監視を行う方法を順を追って説明し、パフォーマンスのボトルネックをユーザーに影響が及ぶ前に積極的に特定し、対処できるようにします。
Lighthouse CIとは？
Lighthouse CIは、継続的インテグレーションおよび継続的デリバリー（CI/CD）パイプラインにシームレスに統合できる、オープンソースの自動パフォーマンステストツールです。GoogleのLighthouse監査ツールを活用して、ウェブサイトのパフォーマンス、アクセシビリティ、SEO、ベストプラクティスに関する実用的なインサイトを提供します。Lighthouse CIをワークフローに組み込むことで、ウェブサイトのパフォーマンスを継続的に監視し、リグレッションを追跡し、すべてのコード変更がより良いユーザーエクスペリエンスに貢献することを保証できます。Lighthouse CIは特定のクラウドプロバイダーに縛られず、さまざまなセットアップで使用できます。例えば、Github Actions、Jenkins、CircleCIなどのサービス上のDockerコンテナ内で実行できます。
なぜLighthouse CIを使用するのか？
Lighthouse CIを導入することには、多くのメリットがあります。
- パフォーマンスリグレッションの早期発見： 新しいコード変更によって生じたパフォーマンスの問題を、本番環境に到達する前に特定します。
- ウェブサイトのパフォーマンス向上： 速度、アクセシビリティ、SEOのためにウェブサイトを最適化する方法に関する実用的なインサイトを得られます。
- ユーザーエクスペリエンスの強化： 訪問者を引きつけ続ける、より速く、より使いやすいウェブサイトを提供します。
- 直帰率の低下： 読み込み時間を最適化して、ユーザーの不満を減らし、サイトからの離脱を防ぎます。
- コンバージョン率の向上： ウェブサイトが速くなると、一般的にコンバージョン率が高まり、ビジネス成果が向上します。
- パフォーマンステストの自動化： パフォーマンステストをCI/CDパイプラインに統合し、継続的な監視を実現します。
- データ駆動型の意思決定： 具体的なパフォーマンス指標とインサイトに基づいて、最適化の取り組みを行います。
- 長期的なパフォーマンストラッキング： ウェブサイトのパフォーマンスを時系列で監視し、トレンドを特定し、最適化の影響を測定します。
Lighthouse CIの主な機能
- 自動監査： CI/CDプロセスの一部としてLighthouse監査を自動的に実行します。
- パフォーマンスバジェット： パフォーマンスバジェットを設定し、ウェブサイトが許容可能なパフォーマンス閾値内に収まるようにします。
- リグレッション追跡： パフォーマンスのリグレッションを時系列で追跡し、原因となったコード変更を特定できます。
- 実用的なインサイト： ウェブサイトのパフォーマンスを改善する方法に関する実用的な推奨事項を含む詳細なレポートを提供します。
- カスタマイズ可能な設定： 特定のニーズや要件に合わせてLighthouse CIを設定できます。
- CI/CDツールとの統合： Jenkins、CircleCI、GitHub Actions、GitLab CIなどの一般的なCI/CDツールとシームレスに統合します。
- オープンソース： Lighthouse CIはオープンソースプロジェクトであり、無料で使用・変更できます。
Lighthouse CIのセットアップ：ステップバイステップガイド
以下は、プロジェクトにLighthouse CIをセットアップするための包括的なガイドです。
1. Lighthouse CI CLIのインストール
まず、npmまたはyarnを使用してLighthouse CIコマンドラインインターフェース（CLI）をグローバルにインストールする必要があります。
npm install -g @lhci/cli
yarn global add @lhci/cli
2. Lighthouse CIの設定
プロジェクトのルートにlighthouserc.jsファイルを作成して、Lighthouse CIを設定します。このファイルは、監査するURL、アサーションルール、およびその他の設定オプションを定義します。
以下は、基本的なlighthouserc.jsファイルの例です。
module.exports = {
ci:
{
collect: {
url: ['http://localhost:3000', 'http://localhost:3000/about']
},
assert: {
preset: 'lighthouse:recommended'
},
upload: {
target: 'temporary-public-storage'
},
},
};
説明：
collect.url: Lighthouseによって監査されるURLを指定します。この例では、localhost:3000で実行されているウェブサイトのホームページと「about」ページを監査しています。これを*あなたの*プロジェクトに関連するURL（ステージング環境などを含む）に置き換えることを忘れないでください。assert.preset:lighthouse:recommendedプリセットを使用します。これは、Lighthouseの推奨事項に基づいた事前定義済みのアサーションセットを適用します。これは良い出発点ですが、必要に応じてこれらのアサーションをカスタマイズできます。upload.target: Lighthouse CIの結果がアップロードされる場所を設定します。temporary-public-storageはテストや開発には便利ですが、本番環境では通常、より永続的なストレージソリューション（後述）を使用します。
3. CI/CDパイプラインへのLighthouse CIの統合
次のステップは、Lighthouse CIをCI/CDパイプラインに統合することです。具体的な手順はCI/CDプロバイダーによって異なりますが、一般的なプロセスは、Lighthouse CIコマンドを実行するスクリプトをCI/CD設定に追加することです。
GitHub Actionsを使用した例：
リポジトリに.github/workflows/lighthouse-ci.ymlという名前のファイルを作成し、以下の内容を記述します。
name: Lighthouse CI
on:
push:
branches: [main]
pull_request:
jobs:
lighthouse:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: '16.x'
- name: Install dependencies
run: npm ci
- name: Run Lighthouse CI
run: |
npm install -g @lhci/cli@0.11.x
lhci autorun
説明：
on.push.branches:mainブランチへのプッシュ時にワークフローをトリガーします。on.pull_request: プルリクエスト時にワークフローをトリガーします。jobs.lighthouse.runs-on: ジョブで使用するオペレーティングシステムを指定します（この場合はUbuntu）。steps: ジョブで実行されるステップを定義します。actions/checkout@v3: リポジトリをチェックアウトします。actions/setup-node@v3: Node.jsをセットアップします。npm ci: 依存関係をインストールします。Run Lighthouse CI: Lighthouse CIコマンドを実行します。npm install -g @lhci/cli@0.11.x: Lighthouse CI CLIをグローバルにインストールします。*重要*：常に特定のバージョンを固定することが推奨されます。lhci autorun: Lighthouse CIを「autorun」モードで実行します。これにより、監査の収集、パフォーマンスバジェットのアサート、結果のアップロードが自動的に行われます。
CI/CD統合に関する重要な考慮事項：
- サーバーの起動：
lhci autorunを実行する前に、ウェブサーバーが実行されていることを確認してください（例：npm start）。サーバーをバックグラウンドで起動するためのステップをCI/CD設定に追加する必要があるかもしれません。 - データベースマイグレーション： アプリケーションがデータベースに依存している場合、Lighthouse CIを実行する*前*に、CI/CDプロセスの一部としてデータベースマイグレーションが実行されるようにしてください。
- 環境変数： アプリケーションが環境変数を必要とする場合、これらがCI/CD環境で適切に設定されていることを確認してください。
4. Lighthouse CIの実行
これで、mainブランチに変更をプッシュするか、プルリクエストを作成するたびに、Lighthouse CIワークフローが自動的に実行されます。結果はGitHub Actionsのインターフェースで確認できます。
5. Lighthouse CIの結果の表示
Lighthouse CIの結果は、lighthouserc.jsファイルで指定された場所（例：temporary-public-storage）にアップロードされます。CI/CDの出力に提供されるリンクをたどることで、これらの結果にアクセスできます。これらの結果は、ウェブサイトのパフォーマンス、アクセシビリティ、SEO、ベストプラクティスに関する詳細な情報を提供します。
アサーションとパフォーマンスバジェットの設定
Lighthouse CIでは、アサーションとパフォーマンスバジェットを設定して、ウェブサイトがパフォーマンス目標を確実に満たすようにすることができます。アサーションは、特定のパフォーマンス指標（例：First Contentful Paint、Largest Contentful Paint）を事前定義された閾値と比較するルールです。パフォーマンスバジェットは、さまざまなパフォーマンス指標の許容限度を定義します。
以下は、lighthouserc.jsファイルでアサーションを設定する方法の例です。
module.exports = {
ci: {
collect: {
url: ['http://localhost:3000']
},
assert: {
assertions: {
'first-contentful-paint': ['warn', { maxNumericValue: 2000 }],
'largest-contentful-paint': ['warn', { maxNumericValue: 2500 }],
'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
'total-blocking-time': ['warn', { maxNumericValue: 500 }],
'categories:performance': ['warn', { minScore: 0.9 }],
'categories:accessibility': ['error', { minScore: 0.8 }],
}
},
upload: {
target: 'temporary-public-storage'
},
}
};
説明：
first-contentful-paint: First Contentful Paint (FCP) の警告閾値を2000msに設定します。largest-contentful-paint: Largest Contentful Paint (LCP) の警告閾値を2500msに設定します。cumulative-layout-shift: Cumulative Layout Shift (CLS) の警告閾値を0.1に設定します。total-blocking-time: Total Blocking Time (TBT) の警告閾値を500msに設定します。categories:performance: 全体のパフォーマンスカテゴリスコアの警告閾値を0.9に設定します。categories:accessibility: 全体のアクセシビリティカテゴリスコアのエラー閾値を0.8に設定します。
アサーションレベル：
off: アサーションを無効にします。warn: アサーションが失敗した場合に警告を表示します。error: アサーションが失敗した場合にLighthouse CIの実行を失敗させます。
アサーションのカスタマイズ：
特定のニーズに合わせてアサーションをカスタマイズできます。例えば、重要なパフォーマンス指標に対してより厳しい閾値を設定したり、アプリケーションに関連しないアサーションを無効にしたりすることができます。
Lighthouse CIのアップロード先の選択
lighthouserc.jsファイルのupload.targetオプションは、Lighthouse CIの結果がアップロードされる場所を指定します。temporary-public-storageターゲットはテストや開発には便利ですが、データが永続的ではないため、本番環境には適していません。
以下は、代替のアップロード先です。
- Lighthouse CIサーバー： 本番環境で推奨されるアプローチは、Lighthouse CIサーバーを使用することです。Lighthouse CIサーバーは、Lighthouse CI結果の永続的なストレージソリューションと、データを表示・分析するためのユーザーインターフェースを提供します。さまざまなクラウドプロバイダーにデプロイしたり、独自のインフラでホストしたりできます。
- Google Cloud Storage： Lighthouse CIの結果をGoogle Cloud Storageバケットにアップロードできます。これは、データを保存するための費用対効果が高く、スケーラブルなソリューションです。
- Amazon S3： Google Cloud Storageと同様に、Lighthouse CIの結果をAmazon S3バケットにアップロードできます。
Lighthouse CIサーバーのセットアップ：
Lighthouse CIサーバーのセットアップには、以下の手順が含まれます。
- Lighthouse CIサーバーのインストール： npmまたはyarnを使用してLighthouse CIサーバーをインストールできます。
- データベースの設定： Lighthouse CIサーバーはデータを保存するためにデータベースが必要です。PostgreSQL、MySQL、SQLiteなど、さまざまなデータベースを使用できます。
.envファイルでデータベース接続設定を構成します。 - Lighthouse CIサーバーの起動：
lhci serverコマンドを使用してLighthouse CIサーバーを起動します。 - Lighthouse CI CLIがサーバーを使用するように設定：
lighthouserc.jsファイルを更新して、Lighthouse CIサーバーをアップロード先として使用するようにします。
npm install -g @lhci/server
yarn global add @lhci/server
module.exports = {
ci: {
collect: {
url: ['http://localhost:3000']
},
assert: {
preset: 'lighthouse:recommended'
},
upload: {
target: 'lhci',
serverBaseUrl: 'http://your-lhci-server.com',
token: 'YOUR_LHCI_TOKEN'
},
}
};
http://your-lhci-server.comをあなたのLighthouse CIサーバーのURLに、YOUR_LHCI_TOKENをプロジェクトのアクセストークンに置き換えてください。
Lighthouse CIを使用するためのベストプラクティス
Lighthouse CIを最大限に活用するために、以下のベストプラクティスに従ってください。
- すべてのコード変更でLighthouse CIを実行する： Lighthouse CIをCI/CDパイプラインに統合し、すべてのコード変更で監査を実行します。これにより、パフォーマンスのリグレッションを早期に発見できます。
- パフォーマンスバジェットを設定する： パフォーマンスバジェットを定義して、ウェブサイトが許容可能なパフォーマンス閾値内に収まるようにします。
- パフォーマンスのトレンドを監視する： ウェブサイトのパフォーマンスを時系列で追跡し、トレンドを特定し、最適化の影響を測定します。
- 最適化の取り組みに優先順位を付ける： 最も重要なパフォーマンス指標の最適化にまず集中します。
- 実世界のデータを使用する： 最適化の取り組みに実世界のデータを取り入れます。例えば、Google Analyticsを使用して、ユーザーが最も頻繁に訪れるページを特定できます。
- 実機でテストする： 実世界の条件下でウェブサイトが良好に動作することを確認するために、実機でテストします。
- Lighthouse CIの結果を定期的にレビューする： Lighthouse CIの結果を定期的に確認し、特定されたパフォーマンスの問題に対処するための措置を講じます。
- 画像を最適化する： 品質を損なうことなくファイルサイズを削減するために画像を最適化します。ImageOptim (macOS)、TinyPNG、ImageKitなどのツールが役立ちます。
- CSSとJavaScriptを最小化する： CSSとJavaScriptファイルを最小化して、サイズを削減します。UglifyJSやCSSNanoなどのツールがこれに役立ちます。
- ブラウザキャッシュを活用する： ブラウザキャッシュを活用して、ウェブサイトがサーバーに行うリクエストの数を減らします。
- コンテンツデリバリーネットワーク（CDN）を使用する： CDNを使用して、ウェブサイトのコンテンツを世界中のサーバーに配信します。これにより、異なる地理的な場所にいるユーザーの読み込み時間が改善されます。CloudflareやAmazon CloudFrontなどのサービスが人気のあるCDNです。
- 画面外の画像を遅延読み込みする： 画面にすぐに表示されない画像に対して遅延読み込み（lazy loading）を実装します。これにより、初期ページの読み込み時間が大幅に改善されます。簡単な遅延読み込みには
loading="lazy"属性を使用できます。 - レンダリングをブロックするリソースを排除する： ページのレンダリングを妨げているリソースを特定し、排除します。これには、重要なCSSをインライン化し、重要でないCSSとJavaScriptを遅延させることが含まれることがよくあります。
- JavaScriptの実行時間を短縮する： JavaScriptコードをプロファイリングして、実行の遅い関数を特定し、最適化します。コード分割やツリーシェイキングなどの技術が、ダウンロードおよび実行が必要なJavaScriptの量を減らすのに役立ちます。
高度なLighthouse CIテクニック
Lighthouse CIの基本に慣れたら、パフォーマンス監視をさらに強化するためのいくつかの高度なテクニックを探求できます。
- カスタムLighthouse監査： アプリケーションに関連する特定のパフォーマンスの問題をテストするために、カスタムLighthouse監査を作成できます。
- ヘッドレスChromeの設定： 特定のデバイスエミュレーションやネットワークスロットリング設定を使用するようにヘッドレスChromeを設定します。
- 監視ツールとの統合： Lighthouse CIを既存の監視ツール（例：New Relic、Datadog）と統合して、ウェブサイトのパフォーマンスのより包括的なビューを得ます。
- ビジュアルリグレッションテスト： Lighthouse CIをビジュアルリグレッションテストツールと組み合わせて、パフォーマンスに影響を与える可能性のある視覚的な変更を検出します。
グローバルなオーディエンス向けのLighthouse CI：国際的なウェブサイトに関する考慮事項
グローバルなオーディエンスを対象とするウェブサイトでLighthouse CIを使用する場合、以下を考慮してください。
- 複数の場所からテストする： サーバーの応答時間はユーザーの場所によって大きく異なる場合があります。CDN（コンテンツデリバリーネットワーク）を使用し、国際的なユーザーのパフォーマンスのより正確な状況を把握するために、異なる地理的地域からLighthouse CI監査を実行することを検討してください。一部のCI/CDプロバイダーは、ランナーの地理的な場所を指定するオプションを提供しています。
- ネットワーク状況を考慮する： ネットワーク速度と遅延は世界中で大きく異なります。Lighthouse CI監査中にさまざまなネットワーク状況をシミュレートして、さまざまな制約下でウェブサイトがどのように動作するかを理解します。Lighthouseでは、3Gのような低速接続をシミュレートしてネットワーク接続をスロットリングできます。
- コンテンツのローカライズ： ローカライズされたコンテンツが適切に最適化されていることを確認します。これには、異なる言語や文字セットに対する画像の最適化や、表示の問題を避けるための適切なエンコーディングが含まれます。
- フォントの読み込み： 異なる言語に対するフォントの読み込みを最適化します。フォント読み込み中にテキストが表示されなくなるのを防ぐために、font-display: swapの使用を検討してください。
- サードパーティスクリプト： サードパーティスクリプトは、特にネットワーク接続が遅い地域のユーザーにとって、パフォーマンスに大きな影響を与える可能性があるため、注意が必要です。サードパーティスクリプトのパフォーマンスを定期的に監査し、非同期読み込みや重要なスクリプトのセルフホスティングを検討してください。
- モバイル最適化： 世界の多くの地域でモバイル利用が普及しています。ウェブサイトがモバイルデバイス向けに最適化されていること、およびLighthouse CI監査にモバイル固有のテストが含まれていることを確認してください。
一般的なLighthouse CIの問題のトラブルシューティング
Lighthouse CIを使用する際に遭遇する可能性のある一般的な問題と、そのトラブルシューティング方法を以下に示します。
- Lighthouse CIが「タイムアウト」エラーで失敗する： ウェブサイトの読み込みに時間がかかりすぎる場合や、Lighthouse CIがウェブサイトに接続できない場合に発生することがあります。
lighthouserc.jsファイルのタイムアウト値を増やすか、ウェブサイトのサーバーログでエラーを確認してみてください。 - Lighthouse CIが一致しない結果を報告する： Lighthouseの結果は、ネットワーク状況やその他の要因により、実行ごとにわずかに異なる場合があります。より安定した平均値を得るために、複数の監査を実行してください。
- Lighthouse CIが結果のアップロードに失敗する：
upload.targetの設定を確認し、Lighthouse CIサーバーが実行中でアクセス可能であることを確認してください。また、正しいアクセストークンが設定されていることを確認してください。 - Lighthouse CIが予期しないパフォーマンスリグレッションを報告する： リグレッションが検出される前に行われたコード変更を調査します。Lighthouse CIレポートを使用して、どの特定のパフォーマンス指標が悪化したかを特定し、それらの領域に最適化の取り組みを集中させます。
結論
フロントエンドLighthouse CIは、Webアプリケーションの継続的なパフォーマンス監視のための強力なツールです。Lighthouse CIをCI/CDパイプラインに統合することで、パフォーマンスの問題を積極的に特定して対処し、ウェブサイトが最適なユーザーエクスペリエンスを提供することを保証できます。世界中のユーザーに最高の体験を提供するために、セットアップ、アサーションルール、テスト場所をグローバルなオーディエンスに合わせて調整することを忘れないでください。
このガイドで概説した手順とベストプラクティスに従うことで、ウェブサイトのパフォーマンスを大幅に向上させ、直帰率を減らし、コンバージョン率を高め、最終的にビジネス目標を達成することができます。今日からLighthouse CIを導入し、Webアプリケーションの可能性を最大限に引き出しましょう。