開発ワークフローにLighthouse CIを統合し、フロントエンドのパフォーマンステストを自動化する方法を解説。コミットごとにウェブサイトの速度、アクセシビリティ、SEOを向上させましょう。
フロントエンドパフォーマンステスト：Lighthouse CIを統合し、継続的な改善を実現
今日のデジタル環境において、ウェブサイトのパフォーマンスは最も重要です。読み込み時間が遅い、アクセシビリティに問題がある、SEOが不十分であるといった問題は、ユーザーエクスペリエンスに大きな影響を与え、ひいてはビジネスの成果にも影響を及ぼします。フロントエンドのパフォーマンステストは、現代のソフトウェア開発ライフサイクルにおいて不可欠な部分となり、ウェブサイトやウェブアプリケーションが、世界中のユーザーにとって高速で信頼性が高く、使いやすいものであることを保証します。この記事では、強力なオープンソースツールであるLighthouse CIを継続的インテグレーション（CI）パイプラインに統合し、フロントエンドのパフォーマンステストを自動化して継続的な改善を推進する方法について詳しく解説します。
なぜフロントエンドのパフォーマンステストが重要なのか？
Lighthouse CIに深く入る前に、なぜフロントエンドのパフォーマンステストが極めて重要なのかを理解しましょう：
- ユーザーエクスペリエンス： 高速で応答性の高いウェブサイトは、より良いユーザーエクスペリエンスを提供し、エンゲージメントの向上と直帰率の低下につながります。例えば、日本の東京にいる潜在顧客が、読み込みの遅いEコマースサイトで商品を購入しようとしていると想像してみてください。彼らはそのサイトを離れ、代替手段を探す可能性が高いでしょう。
- SEOランキング： Googleのような検索エンジンは、ウェブサイトの速度とパフォーマンスをランキング要因として考慮します。より速いウェブサイトは検索結果で上位に表示される傾向があり、より多くのオーガニックトラフィックをもたらします。GoogleのCore Web Vitalsイニシアチブは、Largest Contentful Paint (LCP)、First Input Delay (FID)、Cumulative Layout Shift (CLS)といった要素のSEOにおける重要性を強調しています。
- アクセシビリティ： パフォーマンスの改善は、多くの場合、障害を持つユーザーにとってのアクセシビリティ向上につながります。最適化されたコードや画像は、スクリーンリーダーに頼るユーザーや、帯域幅が限られているユーザーの体験を向上させることができます。
- コンバージョン率： より速いウェブサイトは、コンバージョン率に直接影響を与える可能性があります。ページの読み込み時間がわずか1秒遅れるだけで、コンバージョンが大幅に減少することが研究で示されています。インドのムンバイにいるユーザーがフライトを予約しようとしていると考えてみてください。予約プロセスが遅いと、彼らは購入を断念し、競合他社を選ぶ可能性があります。
- リソースの最適化： パフォーマンステストは、リソースを最適化できる領域を特定するのに役立ち、サーバーインフラストラクチャや帯域幅の使用量に関するコスト削減につながります。
Lighthouse CIの紹介
Lighthouse CIは、CI/CDパイプラインとシームレスに統合できるように設計された、オープンソースの自動化ツールです。これはGoogleが開発した人気の監査ツールであるLighthouseを実行し、ウェブサイトのパフォーマンス、アクセシビリティ、SEO、ベストプラクティス、プログレッシブウェブアプリ（PWA）への準拠に関する洞察を提供します。Lighthouse CIは以下のことを支援します：
- パフォーマンス監査の自動化： コミットやプルリクエストごとにLighthouse監査を自動的に実行します。
- パフォーマンスの経時的な追跡： パフォーマンスメトリクスを時系列で監視し、リグレッションを早期に特定します。
- パフォーマンスバジェットの設定： パフォーマンスバジェットを定義し、それを超えた場合はビルドを失敗させます。
- CI/CDシステムとの統合： GitHub Actions, GitLab CI, CircleCI, Jenkinsなどの一般的なCI/CDシステムと統合します。
- パフォーマンス問題に関する共同作業： Lighthouseレポートを共有し、チームと協力してパフォーマンス問題を解決します。
Lighthouse CIのセットアップ
以下は、プロジェクトにLighthouse CIをセットアップするためのステップバイステップガイドです：
1. Lighthouse CIのインストール
npmまたはyarnを使用してLighthouse CI CLIをグローバルにインストールします：
npm install -g @lhci/cli
yarn global add @lhci/cli
2. Lighthouse CIの設定
プロジェクトのルートディレクトリにlighthouserc.jsファイルを作成して、Lighthouse CIを設定します。以下は設定例です：
module.exports = {
ci:
{
collect:
{
url: ['http://localhost:3000', 'http://localhost:3000/about'],
startServerCommand: 'npm start',
numberOfRuns: 3,
},
assert:
{
assertions:
{
'categories:performance': ['warn', { minScore: 0.9 }],
'categories:accessibility': ['error', { minScore: 1 }],
'categories:best-practices': ['warn', { minScore: 0.9 }],
'categories:seo': ['warn', { minScore: 0.9 }],
'categories:pwa': ['off'],
'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
'largest-contentful-paint': ['warn', { maxNumericValue: 4000 }],
'total-blocking-time': ['warn', { maxNumericValue: 200 }],
'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
},
},
upload:
{
target: 'temporary-redirect',
},
},
};
この設定を分解してみましょう：
collect.url: 監査するURLの配列です。この例ではホームページとaboutページを監査します。ウェブサイトのすべての重要なページを、異なるユースケースを考慮して含めるべきです。例えば、Eコマースサイトであれば、ホームページ、商品一覧ページ、商品詳細ページ、そしてチェックアウトプロセスが含まれるかもしれません。collect.startServerCommand: 開発サーバーを起動するコマンドです。Lighthouse CIがローカル開発環境に対して実行する必要がある場合に必要です。collect.numberOfRuns: 各URLに対してLighthouse監査を実行する回数です。複数の監査を実行することで、ネットワーク条件の変動やその他の要因を緩和するのに役立ちます。assert.assertions: Lighthouseの監査結果を検証するための一連のアサーションです。各アサーションはメトリクスまたはカテゴリとしきい値を指定します。しきい値を満たさない場合、ビルドは失敗します。この例では、パフォーマンス、アクセシビリティ、ベストプラクティス、SEOカテゴリのしきい値を設定しています。また、First Contentful Paint (FCP)、Largest Contentful Paint (LCP)、Total Blocking Time (TBT)、Cumulative Layout Shift (CLS)といった特定のメトリクスに対するしきい値も設定しています。upload.target: Lighthouseレポートをどこにアップロードするかを指定します。temporary-redirectはレポートを一時的なストレージ場所にアップロードし、アクセスするためのURLを提供します。他の選択肢として、Lighthouse CIサーバーやGoogle Cloud Storage、Amazon S3などのクラウドストレージソリューションを使用する方法があります。
3. CI/CDシステムとの統合
次のステップは、Lighthouse CIをCI/CDパイプラインに統合することです。以下はGitHub Actionsと統合する方法の例です：
リポジトリに.github/workflows/lighthouse.ymlファイルを作成します：
name: Lighthouse CI
on:
push:
branches: [main]
pull_request:
jobs:
lighthouse:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: '16'
- name: Install Dependencies
run: npm ci
- name: Run Lighthouse CI
run: | npm run build
lhci autorun
このワークフローは以下のステップを実行します：
- コードをチェックアウトします。
- Node.jsをセットアップします。
- 依存関係をインストールします。
- Lighthouse CIを実行します。このステップでは、まずアプリケーションをビルドし（
npm run build）、次にlhci autorunを実行します。これによりLighthouse監査が実行され、設定されたしきい値に対して結果がアサートされます。
特定のCI/CDシステムとプロジェクトの要件に合わせて、このワークフローを適応させてください。例えば、GitLab CIを使用している場合は、同様のステップを持つ.gitlab-ci.ymlファイルを設定します。
4. Lighthouse CIの実行
変更をコミットし、リポジトリにプッシュします。CI/CDパイプラインが自動的にLighthouse CIを実行します。いずれかのアサーションが失敗するとビルドも失敗し、開発者に貴重なフィードバックを提供します。Lighthouse CIレポートは、CI/CDシステムから提供されるURLで利用可能になります。
高度な設定とカスタマイズ
Lighthouse CIは、幅広い設定オプションとカスタマイズの可能性を提供します。以下はいくつかの高度な機能です：
1. Lighthouse CIサーバーの使用
Lighthouse CIサーバーは、パフォーマンスメトリクスを時系列で追跡し、プロジェクトを管理し、パフォーマンス問題について共同作業するための中央集権的なダッシュボードを提供します。Lighthouse CIサーバーを使用するには、インスタンスをセットアップし、lighthouserc.jsファイルを設定してレポートをサーバーにアップロードする必要があります。
まず、サーバーをデプロイします。Docker、Heroku、AWSやGoogle Cloudのようなクラウドプロバイダーなど、さまざまなデプロイオプションが利用可能です。サーバーのデプロイに関する詳細な手順については、Lighthouse CIのドキュメントを参照してください。
サーバーが稼働したら、lighthouserc.jsファイルを更新してサーバーを指すようにします：
module.exports = {
ci:
{
collect: {
url: ['http://localhost:3000'],
startServerCommand: 'npm start',
},
assert: {
assertions: {
'categories:performance': ['warn', { minScore: 0.9 }],
},
},
upload:
{
target: 'lhci',
serverBaseUrl: 'YOUR_LHCI_SERVER_URL',
token: 'YOUR_LHCI_SERVER_TOKEN',
},
},
};
YOUR_LHCI_SERVER_URLをあなたのLighthouse CIサーバーのURLに、YOUR_LHCI_SERVER_TOKENをサーバーによって生成されたトークンに置き換えてください。このトークンは、CIパイプラインをサーバーで認証します。
2. パフォーマンスバジェットの設定
パフォーマンスバジェットは、特定のメトリクスに対する許容可能な閾値を定義します。Lighthouse CIでは、パフォーマンスバジェットを設定し、それらのバジェットを超えた場合にビルドを失敗させることができます。これはパフォーマンスリグレッションを防ぎ、ウェブサイトが許容可能なパフォーマンス範囲内に留まることを保証するのに役立ちます。
lighthouserc.jsファイル内のassert.assertionsプロパティを使用してパフォーマンスバジェットを定義できます。例えば、First Contentful Paint (FCP)のパフォーマンスバジェットを設定するには、次のアサーションを追加します：
'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
このアサーションは、FCPが2500ミリ秒を超えた場合にビルドを失敗させます。
3. Lighthouse設定のカスタマイズ
Lighthouse CIでは、特定のニーズに合わせてLighthouseの設定をカスタマイズできます。以下のような様々なLighthouse設定を構成できます：
onlyAudits: 実行する監査のリストを指定します。skipAudits: スキップする監査のリストを指定します。throttling: 異なるネットワーク条件をシミュレートするために、ネットワークスロットリング設定を構成します。formFactor: エミュレートするフォームファクタ（デスクトップまたはモバイル）を指定します。screenEmulation: 画面エミュレーション設定を構成します。
Lighthouseの設定をカスタマイズするには、lhci autorunコマンドに--config-pathフラグを渡し、カスタムLighthouse設定ファイルを指し示します。設定オプションの完全なリストについては、Lighthouseのドキュメントを参照してください。
4. 認証が必要なページの監査
認証が必要なページを監査するには、少し異なるアプローチが必要です。監査を実行する前にLighthouse CIに認証方法を提供する必要があります。これはクッキーを使用するか、ログインプロセスをスクリプト化することで実現できます。
一般的なアプローチの1つは、--extra-headersフラグを使用して認証クッキーをLighthouse CIに渡すことです。クッキーは、ウェブサイトにログインした後、ブラウザの開発者ツールから取得できます。
あるいは、Puppeteerスクリプトを使用してログインプロセスを自動化し、その後で認証済みページに対してLighthouse監査を実行することもできます。このアプローチはより柔軟性があり、複雑な認証シナリオに対応できます。
Lighthouse CIによるフロントエンドパフォーマンステストのベストプラクティス
Lighthouse CIの利点を最大限に活用するために、以下のベストプラクティスに従ってください：
- Lighthouse CIを定期的に実行する： Lighthouse CIをCI/CDパイプラインに統合し、コミットやプルリクエストごとに監査を自動的に実行します。これにより、パフォーマンスリグレッションが早期に検出され、迅速に対処されます。
- 現実的なパフォーマンスバジェットを設定する： 挑戦的でありながら達成可能なパフォーマンスバジェットを定義します。最初は控えめなバジェットから始め、ウェブサイトのパフォーマンスが向上するにつれて徐々に厳しくしていきます。ページの複雑さや重要性に応じて、異なるタイプのページに異なるバジェットを設定することを検討してください。
- 主要なメトリクスに焦点を当てる： ユーザーエクスペリエンスとビジネス成果に最も影響を与える主要なパフォーマンスメトリクスを優先します。GoogleのCore Web Vitals（LCP, FID, CLS）は良い出発点です。
- パフォーマンス問題を調査し、対処する： Lighthouse CIがパフォーマンス問題を特定した場合、それらを徹底的に調査し、適切な解決策を実装します。Lighthouseレポートを使用して問題の根本原因を特定し、最も影響の大きい修正を優先します。
- パフォーマンスを時系列で監視する： パフォーマンスメトリクスを時系列で追跡し、トレンドとパターンを特定します。Lighthouse CIサーバーや他の監視ツールを使用してパフォーマンスデータを可視化し、改善の余地がある領域を特定します。
- チームを教育する： チームがフロントエンドパフォーマンスの重要性とLighthouse CIの効果的な使用方法を理解していることを確認します。彼らのスキルと知識を向上させるためのトレーニングとリソースを提供します。
- グローバルなネットワーク状況を考慮する： パフォーマンスバジェットを設定する際には、世界のさまざまな地域のネットワーク状況を考慮してください。インターネット速度が遅い地域のユーザーは、速い地域のユーザーとは異なる体験をする可能性があります。テスト中にさまざまなネットワーク状況をシミュレートするツールを使用してください。
- 画像を最適化する： 画像の最適化はフロントエンドパフォーマンスの重要な側面です。ImageOptim、TinyPNGなどのツールやオンラインコンバーターを使用して、品質を損なうことなく画像を圧縮・最適化します。JPEGやPNGなどの従来のフォーマットよりも優れた圧縮率と品質を提供するWebPのような現代的な画像フォーマットを使用します。ビューポートにすぐに表示されない画像には遅延読み込み（lazy loading）を実装します。
- コードを縮小・圧縮する： ファイルサイズを削減するために、HTML、CSS、JavaScriptコードを縮小（minify）します。UglifyJS、Terserなどのツールやオンラインミニファイアを使用します。転送されるファイルのサイズをさらに削減するために、サーバーでGzipまたはBrotli圧縮を有効にします。
- ブラウザのキャッシングを活用する： 画像、CSS、JavaScriptファイルなどの静的アセットに対して適切なキャッシュヘッダーを設定するようにサーバーを構成します。これにより、ブラウザはこれらのアセットをキャッシュし、繰り返しダウンロードするのを避けることができます。
結論
Lighthouse CIを開発ワークフローに統合することは、高性能で、アクセシブルで、SEOに強いウェブサイトを構築するための重要なステップです。フロントエンドのパフォーマンステストを自動化し、パフォーマンスを時系列で追跡することで、パフォーマンス問題を早期に特定して対処し、ユーザーエクスペリエンスを向上させ、ビジネスの成果を推進することができます。Lighthouse CIを取り入れ、継続的なパフォーマンス改善を開発プロセスの中心的な価値観にしましょう。ウェブサイトのパフォーマンスは一度きりの努力ではなく、絶え間ない注意と最適化を必要とする継続的なプロセスであることを忘れないでください。場所やデバイスに関係なく、すべてのユーザーにシームレスな体験を保証するために、文化的および地域的な要因を考慮してください。この記事で概説したベストプラクティスに従うことで、あなたのウェブサイトが世界中のユーザーに高速で信頼性が高く、楽しい体験を提供できるようにすることができます。