Lowe's 웹사이트는 가장 빠른 전자상거래 웹사이트 중 하나입니다.

Lowe's Site Speed Team은 자동화된 성능 테스트 및 모니터링 시스템을 구축하여 성능 예산과 비교하여 요청을 끌어내고 프로덕션으로의 성능 저하를 방지합니다.

Abhimanyu Raibahadur
Abhimanyu Raibahadur
Ashish Choudhury
Ashish Choudhury
Dhilip venkatesh Uvarajan
Dhilip venkatesh Uvarajan
Dinakar Chandolu
Dinakar Chandolu
Garima Mimani
Garima Mimani
Safwan Samla
Safwan Samla

Lowe's는 약 900억 달러에 달하는 주택 개량 소매업체로 약 2,200개의 매장을 운영하고 300,000명이 넘는 직원을 고용하고 있습니다. Lowe's Site Speed Team은 성능 회귀가 프로덕션에 배포되지 않도록 방지하는 자동화된 테스트 및 모니터링 시스템을 빌드하여 웹사이트 성능을 개선하여 소매 사이트 중 상위권에 들 수 있었습니다.

문제

사이트 속도 팀의 목표는 Lowe의 사이트를 페이지 로드 속도 면에서 가장 빠른 전자상거래 사이트 중 하나로 만드는 것입니다. Lowe의 웹사이트 개발자는 자동화된 테스트 및 모니터링 시스템을 빌드하기 전에는 사전 프로덕션 환경에서 성능을 자동으로 측정할 수 없었습니다. 기존 도구는 프로덕션 환경에서만 테스트를 수행했습니다. 그 결과 열악한 빌드가 프로덕션에 배포되어 사용자 환경이 저하됩니다. 이러한 열악한 빌드는 Site Speed팀에서 감지하여 작성자가 되돌릴 때까지 프로덕션 상태로 유지됩니다.

솔루션

사이트 속도 팀은 오픈소스 도구를 사용하여 사전 프로덕션 환경을 위한 자동화된 성능 테스트 및 모니터링 시스템을 구축했습니다. 시스템은 모든 pull 요청 (PR)의 성능을 측정하고 사이트 속도팀의 성능 예산측정항목 기준을 충족하지 않는 경우 PR을 배송에서 프로덕션으로 제한합니다. 또한 시스템에서 검색엔진 최적화 및 ADA 규정 준수를 측정합니다.

영향

자동화된 성능 테스트 및 모니터링 시스템이 16주에 걸쳐 102개의 빌드를 배포한 1개 팀의 샘플에서, 성능이 낮은 32개의 빌드가 프로덕션으로 전환되지 못하도록 했습니다.

이전에는 사이트 속도팀에서 개발자에게 성능 회귀를 프로덕션에 반영했음을 알리는 데 3~5일이 걸렸지만 이제는 사전 프로덕션 환경에서 pull 요청을 제출한 후 5분이 지나면 시스템이 자동으로 성능 문제를 개발자에게 알립니다.

성능 저하로 신고된 pull 요청이 줄어드는 것으로 측정된 결과 시간이 지남에 따라 코드 품질이 개선됩니다. 사이트 속도 팀은 사이트 품질을 지속적으로 개선하기 위해 거버넌스 예산을 점진적으로 줄이고 있습니다.

일반적으로 문제가 있는 코드에 대한 소유권이 명확해짐에 따라 엔지니어링 문화가 바뀌었습니다. 팀은 실제로 누가 문제를 일으켰는지 분명하지 않았기 때문에 사후 수정을 거들기보다는 객관적으로 귀속되는 문제가 있는 코드를 소유하여 사전 최적화를 수행할 수 있습니다.

구현

사이트 속도 거버넌스 (SSG) 앱의 핵심은 Lighthouse CI입니다. SSG 앱은 Lighthouse를 사용하여 모든 pull 요청의 페이지 성능을 검증하고 감사합니다.

SSG 앱의 프로세스 다이어그램(다이어그램에 나와 있는 단계는 도움말 뒷부분에서 설명)입니다.

사이트 속도팀에서 정의한 성능 예산 및 측정항목 타겟에 도달하지 못하면 SSG 앱이 빌드에 실패합니다. 로드 성능뿐만 아니라 검색엔진 최적화, PWA, 접근성까지 지원합니다. 작성자, 검토자, SRE팀에 상태를 즉시 보고할 수 있습니다. 또한 예외가 필요한 경우 검사를 우회하도록 구성할 수도 있습니다.

자동화된 속도 거버넌스 (ASG) 프로세스 흐름

Spinnaker

출발지 개발자가 코드를 사전 프로덕션 환경에 병합합니다.

  1. CDN 애셋으로 사전 프로덕션 환경을 배포합니다.
  2. 배포가 완료되었는지 확인합니다.
  3. Docker 컨테이너를 실행하여 ASG 애플리케이션 빌드를 시작하거나 알림을 보냅니다 (배포 실패 시).

Jenkins 및 Lighthouse

  1. Jenkins로 ASG 애플리케이션을 빌드합니다.
  2. Chrome 및 Lighthouse가 설치된 커스텀 Docker 컨테이너를 실행합니다. SSG 앱에서 lighthouserc.json를 가져오고 lhci autorun --collect-url=https://example.com를 실행합니다.

Jenkins 및 SSG 앱

  1. lhci에서 assertion-results.json를 추출하여 budgets.json의 사전 정의된 예산과 비교합니다. 출력을 텍스트 파일로 저장하고 나중에 비교할 수 있도록 Nexus에 업로드합니다.
  2. 현재 assertion-results.json를 마지막으로 Nexus에서 다운로드한 빌드와 비교하고 텍스트 파일로 저장합니다.
  3. 성공 또는 실패 정보가 포함된 HTML 이메일을 작성합니다.
  4. Jenkins를 사용하여 관련 메일링 리스트에 이메일을 전송합니다.