Lowe's のウェブサイトは、パフォーマンスが最速の e コマースサイトの 1 つです

Lowe's Site Speed Team は、自動化されたパフォーマンステストとモニタリングシステムを構築することで、pull リクエストをパフォーマンスバジェットに照らしてテストし、本番環境へのパフォーマンスの低下を防ぎました。

Abhimanyu Raibahadur

Ashish Choudhury

Dhilip venkatesh Uvarajan

Dinakar Chandolu

Garima Mimani

Safwan Samla

Lowe's は約 900 億ドルの住宅リフォーム小売業者で、約 2,200 店舗を運営し、30 万人以上の従業員を擁しています。Lowe's Site Speed Team は、本番環境へのパフォーマンスの低下を防ぐ自動テストおよびモニタリングシステムを構築することで、ウェブサイトのパフォーマンスを向上させ、大手小売サイトの中で上位に入ることができました。

問題

サイトスピードチームの目標は、ページ読み込みのパフォーマンスという点で、Lowe's サイトを最速の e コマースサイトの 1 つにすることです。自動化されたテストとモニタリングシステムを構築する前、Lowe's のウェブサイト開発者は本番前環境でパフォーマンスを自動的に測定できませんでした。既存のツールは、本番環境でのみテストを実施しました。その結果、質の低いビルドが本番環境に浸透し、ユーザーエクスペリエンスが低下しました。このような質の低いビルドは、Site Speed チームが検出し、作成者が元に戻すまで、本番環境でそのまま残ります。

解決策

Site Speed チームはオープンソースツールを使用して、本番前環境向けの自動パフォーマンステストおよびモニタリングシステムを構築しました。システムはすべての pull リクエスト（PR）のパフォーマンスを測定し、サイトスピードチームのパフォーマンスバジェットと指標の基準を満たさない場合は、PR の出荷から本番環境への移行を制限します。また、SEO と ADA の遵守状況も測定します。

影響

16 週間にわたって 102 個のビルドをデプロイした 1 チームのサンプルから、自動パフォーマンステストとモニタリングシステムにより、パフォーマンスが標準以下の 32 個のビルドが本番環境に移行されることを阻止しました。

以前は、パフォーマンスの低下を本番環境にリリースしたことをサイトスピードチームに 3 ～ 5 日かかっていましたが、本番前環境で pull リクエストを送信してから 5 分後に、パフォーマンスの問題が自動的にデベロッパーに通知されるようになりました。

パフォーマンス低下のフラグが付けられている pull リクエストの数が減っていることから、コードの品質は時間の経過とともに向上しています。また、サイト速度チームは、サイトの品質を継続的に改善するために、ガバナンスの予算を段階的に削減しています。

一般的に、問題のあるコードの所有権が明確になったことで、エンジニアリングの文化は変わりました。実際に問題を提起した人物が明らかでないため、事後対応的な修正をためらうのではなく、問題のあるコードの所有権を客観的にアトリビューションすることで、先を見越した最適化を行うことができます。

実装

Site Speed Governance（SSG）アプリの中核は Lighthouse CI です。SSG アプリは、Lighthouse を使用して、すべての pull リクエストのページパフォーマンスを検証、監査します。

SSG アプリのプロセス図。この図に示されている手順は、この記事の後半で説明しています。

サイトスピードチームが定義したパフォーマンスバジェットと指標の目標値に達していない場合、SSG アプリはビルドが失敗します。読み込みパフォーマンスだけでなく、SEO、PWA、ユーザー補助も強化します。作成者、審査担当者、SRE チームにステータスをすぐに報告できます。例外が必要な場合にチェックをバイパスするように構成することもできます。

Automated Speed Governance（ASG）のプロセスフロー

Spinnaker

始点。デベロッパーがコードを本番前環境にマージします。

CDN アセットを使用して本番前環境をデプロイする。
デプロイが成功したことを確認します。
Docker コンテナを実行して ASG アプリケーションのビルドを開始するか、通知を送信します（デプロイが失敗した場合）。

Jenkins と Lighthouse

Jenkins で ASG アプリケーションをビルドします。
Chrome と Lighthouse がインストールされているカスタム Docker コンテナを実行します。SSG アプリから lighthouserc.json を pull し、lhci autorun --collect-url=https://example.com を実行します。

Jenkins と SSG アプリ

lhci から assertion-results.json を抽出し、budgets.json の事前定義された予算と比較します。出力をテキストファイルとして保存し、後で比較できるように Nexus にアップロードします。
現在の assertion-results.json と、最後に成功したビルド（Nexus からダウンロード）を比較し、テキストファイルとして保存します。
成功または失敗の情報を含む HTML メールを作成します。
Jenkins を使用して、関連する配布リストにメールを送信します。