프론트엔드 성능 최적화
2025년 상반기Frontend Developer주식회사 루멘테라
Next.jsReactTypeScriptWebpackChrome DevToolsLighthouse
Overview
Lighthouse 성능 점수 13점 → 78점. 번들 분석부터 렌더링 최적화까지 단독으로 수행했습니다.
플랫팜 서비스의 초기 로딩이 8초 이상 걸리며 사용자 이탈의 원인이 되고 있었습니다. 번들 분석 → 코드 스플리팅 → 이미지 최적화 → 메모이제이션 순서로 체계적으로 접근하여, 측정 가능한 성과를 만들었습니다.
Challenges & Solutions
거대한 초기 번들
Before
모든 페이지가 단일 번들로 로드되어 초기 로딩 8초 이상
After
라우트 기반 코드 스플리팅과 dynamic import로 초기 번들 60% 이상 감소
불필요한 리렌더링
Before
상태 변경 시 무관한 컴포넌트까지 리렌더링되어 인터랙션 지연
After
React.memo, useMemo, useCallback 적용 및 상태 구조 재설계로 렌더링 횟수 대폭 감소
최적화되지 않은 이미지
Before
원본 사이즈 이미지가 그대로 로드되어 LCP 점수 저하
After
Next.js Image + WebP 변환 + lazy loading 적용으로 LCP 개선
Impact
78
13 → 78
Lighthouse 성능 점수
60%+
초기 번들 사이즈 감소
단독
성능 최적화 전 과정 수행