Lighthouse CI를 알아보고 Github Actions에 적용하기
데브옵스
Lighthouse CI를 알아보고 Github Actions에 적용하기
두줄요약
Lighthouse CI를 GitHub Actions에 연동해 웹 성능 측정과 보고서 생성을 자동화했습니다. 점수 기준으로 CI를 실패시키고 PR 댓글에 FCP·LCP 등 상세 지표를 표시했습니다.
구조와 흐름
- Lighthouse의 Performance·Accessibility·Best Practices·SEO·PWA 점수와 FCP·LCP 등 세부 성능 지표 측정
- Lighthouse CI의
collect단계로 빌드 산출물 또는 실행 서버 대상 반복 측정 upload설정을 통한 임시 공개 스토리지 또는 파일시스템 기반 보고서 저장
해결 방법
.lighthouserc.js에서 측정 URL, 정적 배포 경로, 실행 횟수, 보고서 저장 위치 구성assert의 카테고리별 최소 점수 기준으로 경고·오류와 CI 실패 조건 설정- GitHub Actions에서 의존성 설치, 빌드, Lighthouse CI 실행 자동화
성능/운영 포인트
- 네트워크·웹 기술 변수에 따른 점수 변동을 고려한 최대 5회 반복 측정 권장
- PR별 Lighthouse GitHub App 상태 표시와 상세 보고서 링크 제공
- 파일시스템 보고서의 manifest·JSON 파싱을 통한 FCP·LCP 등 PR 댓글 게시
적용해볼 점
- 성능 기준 미달 변경의 머지 전 차단으로 사용자 경험 저하 사전 대응
- 로그인 필요 사이트의 Puppeteer 기반 로그인 후 Lighthouse 실행 검토
- Lighthouse CI Server 기반 기준 커밋과 현재 커밋의 성능 차이 비교
