티스토리 뷰
웹 서비스 개발자 또는 프론트엔드 엔지니어가 “JavaScript 성능 테스트 도구”를 검색할 때 흔히 다음과 같은 불안감을 겪는다. 서로 다른 결과가 나오는 도구 간의 신뢰 문제, 수치 기반 비교의 어려움, 무엇을 기준으로 최적화를 진행해야 하는지 모호함 등이 대표적이다. 실제로 Lighthouse와 WebPageTest는 동일한 URL에 대해 크게 다른 보고서를 제공할 수 있으며, Lighthouse는 “점수” 위주, WebPageTest는 “상세 타이밍” 위주로 결과를 산출함에 따라 서로 다른 결론으로 이어지기도 한다.
엔지니어는 “이 수치는 신뢰할 만한가?”, “어떤 도구를 기준으로 성능 개선 우선순위를 정해야 하는가?”라는 본질적인 질문을 갖는다. 이러한 질문은 단순히 툴을 설치하고 실행하는 수준을 넘어, 도구의 측정 메커니즘을 이해하고, 실제 사용자 체감 서비스 개선에 어떻게 반영할지에 대한 통찰로 이어져야 한다.
Lighthouse vs WebPageTest의 측정 메커니즘
두 도구는 모두 웹 성능을 측정하지만, 그 접근 방식과 그로 인한 결과 해석이 다르다. Lighthouse는 Google이 개발한 오픈 소스 성능 감사 도구로, Core Web Vitals(예: First Contentful Paint, Largest Contentful Paint, Total Blocking Time)와 접근성, SEO 품질까지 포함한 종합 보고서를 생성한다. Lighthouse는 기본적으로 “Lab Data”를 기반으로 테스트하며, 동일한 네트워크 환경(예: Slow 4G 시뮬레이션)과 클라이언트 CPU 성능에 크게 의존한다.
반면 WebPageTest는 실질적인 브라우저 환경 및 네트워크 시뮬레이션(예: 위치, 브라우저, 연결 속도 설정 가능)으로 상세한 페이로드 분석을 제공한다. 워터폴 차트, 필름스트립 뷰, 서버 응답 시간(Time to First Byte, TTFB) 등의 시각화 요소는 개발자가 병목 지점을 정량적으로 이해하는 데 유리하다.
예를 들어 Lighthouse는 테스트를 실행하는 시스템의 CPU 성능이 빠르면 성능 수치가 높아지는 경향이 있지만, WebPageTest는 전 세계 다양한 테스트 서버 위치를 기반으로 측정하므로 지역별 성능 차이를 명확히 볼 수 있다. 또한 WebPageTest는 Lighthouse 측정을 옵션으로 포함할 수 있으며, 실질적인 네트워크 조건(예: 패킷 단위 스로틀링)을 적용해 더 현실적인 데이터 추출이 가능하다.
도구별 성능 비교와 활용 가이드
| 항목 | Lighthouse | WebPageTest |
|---|---|---|
| 측정 데이터 유형 | Lab Data (시뮬레이션 기반) | Lab + 현실 네트워크 시뮬레이션 |
| 주요 성능 지표 | FCP, LCP, TBT, CLS | FCP, TTFB, 전체 워터폴, Filmstrip |
| 테스트 위치 설정 | 고정 (로컬 또는 시뮬레이션) | 전 세계 다수 서버 옵션 |
| 네트워크 시뮬레이션 | 시뮬레이션 | 실제 패킷 레벨 |
| 자동화/CI 통합 | 높음 | 높음 (API 제공) |
- 기초 성능 점검 (Lighthouse): 100회 이상 테스트를 통해 평균 Core Web Vitals 수치를 확보한다. (예: LCP < 2.5s 목표)
- 상세 병목 분석 (WebPageTest): 테스트 위치 3곳 이상에서 TTFB, Speed Index, 워터폴 결과를 확인한다. (예: TTFB < 200ms 목표)
- 우선순위 개선 리스트 작성: 수치 기반으로 개선 영향을 정량화한다. (예: JavaScript 번들 사이즈 300KB 감소 시 FCP 0.5s 단축)
- CI 자동화 설정: WebPageTest API를 활용해 매 배포마다 테스트가 자동으로 진행되도록 설정한다.
잘못된 상식과 주의사항
- Lighthouse 점수 자체를 “절대 성능”으로 오해해서는 안 된다. Lighthouse는 환경별 시뮬레이션을 통한 상대 성능 평가임을 인지해야 한다.
- WebPageTest의 상세 수치는 전 세계 사용자 경험을 반영할 수 있지만, 초기 설정이 복잡하여 초보자에게 적합하지 않을 수 있다.
- 단일 테스트 결과가 아닌 반복 테스트 평균값을 기준으로 의사결정을 내려야 한다. 네트워크 변동성 및 잠재적 오류를 줄이는 것이 중요하다.
- Core Web Vitals는 검색 엔진 최적화(SEO)와 직접적인 연관이 있으므로, Lighthouse 결과와 함께 실제 사용자 필드 데이터를 추가로 확보해야 한다.
정성 들여 쓴 글이 여러분의 지식 창고에 유의미한 데이터로 남기를 바랍니다. 읽어주셔서 감사합니다.