[NHN FORWARD 2021] Lighthouse 성능 지표를 사용한, '웹 애플리케이션 성능 측정 자동화 모듈' 개발기

NHN Cloud·nhn-forward-2021 ·2021년·

#web-performance#gatsby#lighthouse#frontend#puppeteer#performance-monitoring

AI 요약

기능을 계속 추가하다 보면 놓치기 쉬운 웹 애플리케이션 성능 저하를 지속적으로 측정하려고 만든 개인 자동화 도구의 개발기다. Lighthouse로 loading·rendering 지표를 수집하고 인증이 필요한 여러 페이지를 자동 순회하며, 결과를 정적 리포트로 만드는 과정을 단계별로 보여준다.

핵심 포인트

웹 성능을 resource를 받는 loading과 content를 그리는 rendering으로 나누고, FCP·LCP·TTI로 첫 화면·주요 콘텐츠·interaction 시점을, 늦은 layout 이동으로 오클릭을 유발하는 문제는 CLS로 측정
Lighthouse CLI는 새 브라우저로 실행돼 cookie가 없고 한 번에 URL 하나만 처리하므로, Puppeteer로 Dooray 로그인 폼 입력·클릭을 대신하고 측정 경로를 순회하며 같은 Chrome instance에서 연속 측정
방대한 HTML 대신 JSON을 출력해 점수·핵심 metric·resource 수/크기·screenshot만 골라 Gatsby로 페이지별 정적 리포트를 생성. 향후 CI/CD 배포 직후 자동 측정·diff 대시보드·재사용 라이브러리 배포로 확장 계획

왜 읽나성능 회귀를 체감이 아닌 수치로 추적하고 싶은 프론트엔드 개발자에게 Lighthouse + Puppeteer 자동화의 실전 구성 예시.

챕터별 상세

010:10 – 5:48

기능 개발 속에서 잊히는 웹 성능

서비스 초기에는 일정이 우선이고 출시 직전에는 경쟁 제품과 비교하느라 성능을 챙기지만, 안정화 뒤 기능 확장에 집중하면 기존 page의 저하를 알아채기 어렵다. 새 component나 library가 느려져도 체감에 의존해야 하고 초기 대비 변화 기록도 없다. 이를 해결하려고 성능 항목·측정 주기·결과 보관·추이 확인을 하나의 자동화 도구로 만들기로 한다.

웹 성능을 resource를 받는 loading과 browser가 content를 그리는 rendering으로 나눈다. DOMContentLoaded와 load event는 준비 시점을 나타내고, FCP·LCP·TTI는 첫 화면·주요 content·interaction 가능 시점을 측정한다. 늦은 layout 이동으로 사용자가 다른 button을 누르게 되는 문제는 CLS로 잡으며, 느린 반응이 단순 지연을 넘어 서비스 신뢰를 떨어뜨리는 이유를 설명한다.

성능을 기록하고 변화가 한눈에 보이며 최소 비용으로 실행할 수 있는 도구를 목표로 세운다. Chrome Lighthouse CLI로 performance, PWA, accessibility, best practice, SEO 점수와 세부 지표, 개선 제안을 수집한다. 먼저 page를 측정한 뒤 script로 자동화하고, 필요한 결과를 별도 화면에 표현한 다음 배포 주기에 반복 실행하는 네 단계 계획을 구성한다.

Node에서 새 browser로 실행되는 Lighthouse CLI는 cookie가 없어 인증 page만 측정하고 한 번에 URL 하나만 처리한다. Puppeteer가 login form 입력과 button click을 대신하고 필요하면 직접 navigation해 Dooray 인증을 통과한다. 이후 측정 대상 path를 순회하며 같은 Chrome instance에서 Lighthouse를 실행해, 로그인 기반 SPA의 여러 subservice를 연속 측정하는 script를 만든다.

Lighthouse의 방대한 HTML 대신 JSON을 출력해 점수·핵심 metric·resource 수와 크기·best practice 통과 여부·screenshot만 골라낸다. React 기반 Gatsby로 page별 정적 report를 만들어 한눈에 비교하지만 주기 실행은 아직 수동이다. 향후 CI/CD 배포 직후 자동 측정해 이전 release와 비교하고, metric dashboard와 diff viewer를 추가한 뒤 재사용 가능한 library로 공개하는 방향을 제시한다.