프론트엔드
비브로스 웹 프론트엔드 팀이 성능을 관리하기 시작했어요.
두줄요약
웹 프론트엔드 팀이 Lighthouse와 Web Vitals로 성능을 측정하며 개선 문화를 만들었습니다. 또한 측정 결과의 변동성을 줄이기 위한 모니터링 방식도 함께 고민했습니다.
핵심 내용
- 웹 프론트엔드 팀이 프로젝트 개발과 함께 성능 측정을 병행하며 성능 관리 문화를 도입한 배경
- Lighthouse와 Web Vitals를 활용해 LCP, FCP, TBT, Speed Index, FMP, CLS 같은 지표로 품질을 점검
- 이미지 포맷, 지도 API 이미지 로딩 시점, 코드 스플리팅, 외부 스크립트 로드 전략 등으로 성능 개선
- 성능 모니터링 시스템을 구축했지만 Lighthouse 결과의 가변성 때문에 측정 안정화가 필요
적용해볼 점
- 성능 검사를 개발 과정에 함께 넣어 즉시 피드백을 받는 흐름
- 불필요한 리소스와 렌더링 차단 요소를 줄이는 최적화 습관
- 반복 측정, 중앙값 집계, 랩 환경 활용으로 지표 변동성 완화
