Lighthouse CI를 알아보고 Github Actions에 적용하기

Lighthouse CI를 로컬에서 실행하고 GitHub Actions에 연동해 PR마다 웹 성능 측정을 자동화하는 방법을 단계별로 설명하는 글이다. .lighthouserc.js 설정 파일 작성, assert로 기준치 미달 시 빌드 실패 처리, GitHub Actions yaml 구성까지 전체 흐름을 코드와 함께 다룬다.

핵심 포인트

Lighthouse는 Performance·Accessibility·Best Practices·SEO·PWA 5개 카테고리를 0~100점으로 측정, FCP·TTI·Speed Index·TBT·LCP·CLS 등 상세 지표 포함
@lhci/cli 설치 후 .lighthouserc.js 설정 파일 하나로 collect(대상 URL, 실행 횟수)·upload(보고서 저장 위치)·assert(기준치) 모두 관리
assert 설정으로 특정 카테고리 점수 미달 시 warn 또는 error를 발생시켜 빌드 실패 처리 가능
Lighthouse CI GitHub App을 레포지토리에 설치 후 LHCI_GITHUB_APP_TOKEN을 Secrets에 등록하면 PR에 결과가 Comment로 자동 게시
numberOfRuns: 5 설정 권장 — 동일 코드도 네트워크 등 변수에 의해 점수가 달라지므로 여러 번 실행해 중앙값 사용
정적 빌드(staticDistDir)와 동적 서버(startServerCommand) 두 가지 방식 모두 지원

상세 정리

Lighthouse 실행 방법: 크롬 개발자도구 Lighthouse 탭 또는 Node CLI(@lhci/cli) 실행
staticDistDir: ./build 지정 시 빌드 결과물의 HTML을 기반으로 성능 측정
upload.target: temporary-public-storage 지정 시 7일간 임시 보관되는 공개 URL로 보고서 자동 업로드
.lighthouserc.js의 assert.assertions 예시: categories:performance warn 0.9, categories:accessibility error 1.0
Lighthouse CI 프리셋 활용: lighthouse:all, lighthouse:recommended 등 사전 정의된 assertion 세트 선택 가능
GitHub Actions yaml: lhci/github-action@0.9.0 액션을 단계로 추가, LHCI_GITHUB_APP_TOKEN을 env로 전달
PR에 Lighthouse 결과가 Check로 표시되어 통과/실패를 리뷰 시 즉시 확인 가능
멀티 URL 배열로 여러 페이지의 성능을 동시에 측정 가능
로컬 실행 명령: npm run build && lhci autorun — CI 연동 전 로컬에서 먼저 검증 권장

왜 읽나Lighthouse를 일회성 측정 도구가 아닌 PR 게이트로 만드는 전체 설정 흐름을 코드와 함께 바로 따라 할 수 있다.

카카오 엔터테인먼트 FE 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

Lighthouse CI를 알아보고 Github Actions에 적용하기

이 글과 비슷한

토스는 어떻게 광고 속에 게임을 넣었을까

RxJS로 우아하게 사이드 이펙트 통제하기

항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다