웹 성능은 사용자 경험에 큰 영향을 미치며, Lighthouse와 Web Vitals는 이를 정량적으로 평가할 수 있는 중요한 도구입니다. 하지만 수동 측정은 번거롭고 반복성이 떨어지기 때문에, CI 환경에서 자동화하는 것이 효율적입니다. 이번 글에서는 프로젝트 CI 파이프라인에서 성능 리그레션을 감지하고 임계값 실패 시 빌드를 차단하는 경험을 공유합니다.
1. Lighthouse와 Web Vitals 개요
Lighthouse는 페이지 성능, 접근성, SEO 등 다양한 항목을 점수화하고, Web Vitals는 LCP, FID, CLS와 같은 핵심 지표를 제공합니다. 두 도구를 활용하면 웹 사이트의 성능 문제를 조기에 발견하고 개선할 수 있습니다.
2. CI 환경 통합
Github Actions, GitLab CI 등 CI 환경에서 Node.js 기반 Lighthouse CI를 설치하여 테스트를 자동화했습니다. 먼저 프로젝트에 필요한 패키지를 설치하고, 각 브랜치에서 변경된 코드에 대해 Lighthouse를 실행하도록 설정합니다.
npm install -D @lhci/cli이후 lhci autorun 명령어를 사용하여 테스트 결과를 Lighthouse 서버로 전송하고, 이전 결과와 비교하여 성능 저하를 감지할 수 있습니다.
3. 임계값 설정 및 빌드 차단
핵심 성능 지표별로 임계값을 설정하면, 지표가 기준을 벗어날 때 빌드를 실패시키고 알림을 받을 수 있습니다. 예를 들어 LCP가 2.5초를 초과하거나 CLS가 0.1을 초과하면 PR 검토 단계에서 경고를 띄우도록 설정했습니다.
4. 결과 분석과 개선 전략
자동화된 측정을 통해 성능 저하 지점을 빠르게 파악하고, 이미지 최적화, 코드 분할, 캐싱 전략 등 개선 작업을 반복할 수 있습니다. 또한 팀원들이 성능 저하를 즉시 인지할 수 있어 품질 유지에 큰 도움이 되었습니다.
5. 결론
Lighthouse와 Web Vitals를 CI 환경에 통합하면 성능 회귀를 방지하고 사용자 경험을 지속적으로 개선할 수 있습니다. 자동화된 모니터링은 개발 초기 단계부터 성능 최적화를 자연스럽게 습관화하는 데 큰 역할을 했습니다.