Lighthouse 자동화 실습
Python과 테스트 페이지로 성능 지표를 측정하는 방법
Lighthouse는 웹 성능을 측정하는 강력한 도구입니다. 크롬 개발자 도구에서도 손쉽게 사용할 수 있지만, 반복 측정과 로그 기반 분석을 하려면 자동화가 필요합니다. 이번 글에서는 Python으로 Lighthouse를 자동화해 반복 측정하고, 성능 지표를 정량적으로 기록하는 실습 과정을 소개합니다.
1. 실습 구성 개요
이 실습은 두 개의 파일로 구성됩니다:
HTML 파일: 측정 대상인 테스트용 페이지 (lighthouse_test.html)
Python 파일: Lighthouse CLI를 실행하고 성능 데이터를 수집하는 자동화 코드 (lighthouse_test.py)
실습 목적은 단순한 페이지에 대해 Lighthouse를 반복 실행하면서 7가지 주요 성능 지표를 측정하고, 그 결과를 로그로 남기는 구조를 이해하는 데 있습니다.
2. 테스트 페이지 구성 (lighthouse_test.html)
테스트 페이지는 의도적으로 간단하게 구성되어 있으며, 페이지가 로드되자마자 이미지를 추가하여 레이아웃 시프트를 유발합니다.
웹 서버 실행 방법
HTML 파일은 브라우저에서 열기 위해 로컬 웹 서버가 필요합니다. 다음 명령어로 실행할 수 있습니다.
python3 -m http.server 8080
브라우저에서 아래 주소로 접속하여 페이지가 잘 뜨는지 확인합니다:
http://localhost:8080/lighthouse_test.html
3. Python을 활용한 Lighthouse 자동화 (lighthouse_test.py)
자동화 코드는 Lighthouse CLI를 통해 페이지를 여러 번 측정하고, 측정 결과를 정리해 로그로 저장합니다. 총 7개의 주요 성능 지표를 수집합니다:
TTFB (서버 응답 속도)
FCP (첫 콘텐츠 렌더 시점)
LCP (가장 큰 콘텐츠 렌더 시점)
CLS (레이아웃 변화)
TTI (상호작용 가능 시점)
TBT (입력 차단 시간)
Speed Index (시각적 로딩 속도)
측정 대상과 반복 횟수 설정
TARGET_URL = "http://localhost:8080/lighthouse_test.html"
NUM_RUNS = 20
테스트할 URL과 반복 횟수를 지정합니다. 반복 측정을 통해 평균값을 구할 수 있습니다.
측정할 성능 지표 정의
METRICS = {
"ttfb": "server-response-time",
"fcp": "first-contentful-paint",
"lcp": "largest-contentful-paint",
"cls": "cumulative-layout-shift",
"tti": "interactive",
"tbt": "total-blocking-time",
"speed_index": "speed-index"
}
Lighthouse 결과 JSON에서 필요한 항목만 추출하기 위해 key를 지정합니다.
결과 기록을 위한 로그 파일 생성
timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
log_dir = f"lighthouse_test_result_{timestamp}"
os.makedirs(log_dir, exist_ok=True)
summary_log_file = os.path.join(log_dir, "result.log")
실행 결과를 저장할 폴더와 로그 파일을 생성합니다.
지표 해석 함수 정의
def interpret_metric(key, value):
if key == "ttfb":
return "빠름" if value < 0.2 else "보통" if value < 0.6 else "느림"
# 이하 동일 방식으로 fcp, lcp, cls, tti, tbt, speed_index 처리
수치를 사람이 이해하기 쉽게 해석(빠름/보통/느림)하는 함수입니다.
Lighthouse 실행 및 결과 수집 함수
def run_lighthouse(run_index):
output_json = os.path.join(log_dir, f"lh-report-{run_index}.json")
subprocess.run([...])
with open(output_json) as f:
report = json.load(f)
# 지표 추출 및 로그 저장
Lighthouse CLI를 실행하고 .json 파일을 읽어 필요한 값을 추출합니다.
실행 루프 및 결과 출력
for i in tqdm(range(NUM_RUNS)):
run_lighthouse(i)
for key in METRICS:
avg = mean(results[key])
log(f"{key.upper()}: {avg} ({interpret_metric(key, avg)})")
여러 번 실행해 평균을 구하고, 전체 로그를 기록합니다.
전체 코드
4. 실습을 통해 얻는 것
신뢰도 있는 성능 측정: 측정을 단 한 번만 수행할 경우 일시적인 네트워크 지연이나 브라우저 상태 등 외부 환경의 영향을 받을 수 있습니다. 자동화를 통해 동일 조건에서 여러 번 측정하고 평균값을 산출하면, 실제 성능 경향을 보다 객관적으로 파악할 수 있습니다.
7가지 주요 성능 지표에 대한 정량 해석: TTFB, FCP, LCP, CLS, TTI, TBT, Speed Index 각각에 대해 Lighthouse가 제공하는 기준 수치를 바탕으로 빠름/보통/느림으로 해석할 수 있도록 구성되어 있습니다. 이로 인해 QA나 개발자, 디자이너 간 커뮤니케이션이 구체적이고 명확해집니다.
자동 로그 저장과 시간 기반 폴더 구조로 히스토리 관리: 각 실행 결과는 날짜와 시간 기반의 디렉터리에 저장되며, 반복 실행된 개별 결과와 평균값이 모두 로그 파일에 남습니다. 이는 성능 변화 추적과 회귀 테스트에도 유용합니다.
릴리즈 전후, 코드 변경 전후의 비교 기반 마련: 새로운 기능이 추가되거나 UI가 변경될 때, 그 변화가 성능에 미치는 영향을 정량적으로 측정할 수 있습니다. 이전 측정값과의 비교를 통해 성능 저하 여부를 빠르게 파악하고 조치할 수 있는 기반을 제공합니다.
이 실습을 통해 Lighthouse의 성능 측정 기능을 자동화하는 방법을 배울 수 있습니다. 수치를 기반으로 성능을 설명하는 능력은 QA 엔지니어가 품질을 설계하고 분석하는 데 있어 매우 중요한 역량입니다.
