비브로스 웹 프론트엔드 팀이 성능을 관리하기 시작했어요.

간단 소개

비브로스 웹 프론트엔드 팀의 성능 관리 도입 배경, Lighthouse 활용 경험, 그리고 성능 모니터링 시스템 구축 과정을 소개합니다.

AI Summary

성능 관리 시작 배경
- 웹뷰 전환 프로젝트에서 사용자 경험 중요성이 부각됨
- Lighthouse를 활용하여 성능 측정 및 개선
Lighthouse 활용 및 성능 개선
- 이미지 최적화: 네이버 지도 API 이미지 로딩 방식 개선 (Intersection Observer 활용)
- JavaScript 코드 최적화: Code Splitting을 통한 초기 로딩 속도 개선, Next.js Script 태그 활용
성능 모니터링 시스템 구축
- Lighthouse SDK를 사용한 자동 성능 측정 시스템 구축 (배포 시점 트리거)
- 측정 결과 가변성 문제 해결을 위한 노력 (측정 횟수 증가, 호스팅 랩 환경 사용 등)