[기술포스팅 원문] https://techblog.pet-friends.co.kr/웹-성능-측정-자동화-비법-lighthouse-ci와-ci-cd의-만남-d33114fb2a79

[기술포스팅 요약]

• 펫프렌즈 커머스 개발팀에서 Lighthouse CI를 CI/CD 파이프라인에 통합하여 웹 성능 측정을 자동화한 사례를 공유합니다.
• Lighthouse는 성능, 접근성, SEO 등을 평가하는 유용한 도구로, 이를 자동화하여 일관된 측정 결과를 확보할 수 있었습니다.
• 작업 흐름:
  • 코드가 master 브랜치에 병합된 후, 배포 완료 시 성능 측정 실행
  • 지정된 URL을 3회 반복 측정해 평균 점수 계산
  • 결과는 HTML 및 JSON 보고서 형태로 저장하며, S3에 업로드하여 히스토리를 관리
  • Slack 알림으로 팀에 평균 점수와 문제 경고 메시지 전송
• Lighthouse CI의 설정:
  • 테스트할 URL 목록과 반복 횟수 설정
  • 측정할 카테고리(Performance, Accessibility, SEO 등) 지정
  • 보고서를 저장할 위치와 포맷 설정
• Github Actions를 통해 CI/CD 파이프라인에 Lighthouse CI를 연동해, 코드 배포 후 자동으로 성능 테스트 실행
• 최종 단계에서 lighthouse-report.js 스크립트를 실행해 결과 가공, Slack 알림 전송, S3 업로드를 자동화
• 성과:
  • 웹 성능 데이터를 체계적으로 기록 및 관리
  • 팀 전체가 실시간으로 성능 상태를 모니터링하며 문제에 빠르게 대응
  • 성능 최적화 문화 구축에 기여
• Next Step:
  • 테스트 시간을 줄이기 위해 병렬 처리 도입 검토
  • 로그인 페이지와 같은 제한된 접근 페이지의 성능 측정을 위해 Puppeteer 및 Playwright 활용 방안 연구
• 이 작업은 성능 개선뿐 아니라 팀의 협업 및 사용자 경험 향상에 기여했다고 평가됩니다.

이 게시글은 [GPT-4o model]를 통해 요약되었으며, 정보 공유 목적으로 게시되었습니다. 원문 게시물에 대한 책임이나 이해 관계가 없습니다. - 소프트웨어QA 포럼