프론트엔드 성능 최적화
2025년 상반기Frontend Developer주식회사 루멘테라
Next.jsReactTypeScriptWebpackChrome DevToolsLighthouse
Overview
느렸던 초기 로딩을 코드 스플리팅·이미지·렌더링 최적화로 전방위 개선했습니다. 프론트엔드 성능 최적화를 단독으로 수행했고, 현재 데스크톱 실측 기준 초기 렌더 0.6s·메인스레드 블로킹 10ms 수준으로 동작합니다.
플랫팜 클라이언트의 초기 로딩이 느려 사용자 경험을 해치고 있었습니다. Next.js 내장 최적화 기반의 코드 스플리팅, next/image와 캐시를 활용한 이미지 최적화, 메모이제이션과 prefetch·Link 전환을 통한 렌더링·네비게이션 최적화를 순차적으로 적용했습니다. 그 결과 초기 렌더와 메인스레드 반응성이 뚜렷이 개선됐습니다.
Challenges & Solutions
거대한 초기 번들
Before
페이지 전반이 크게 묶여 로드되어 초기 로딩이 오래 걸리는 구조
After
Next.js 내장 최적화 기반의 코드 스플리팅과 dynamic import로 초기 로딩에 필요한 코드만 우선 로드
불필요한 리렌더링
Before
상태 변경 시 무관한 컴포넌트까지 리렌더링되며, 인터랙션이 수 초간 멈출 만큼 메인스레드 블로킹이 심했음
After
React.memo, useMemo, useCallback 적용 및 상태 구조 재설계로 렌더링 횟수를 대폭 줄여, 현재 데스크톱 실측 기준 메인스레드 블로킹(TBT) 10ms 수준
최적화되지 않은 이미지
Before
원본 사이즈 이미지가 그대로 로드되어 LCP 점수 저하
After
Next.js Image + WebP 변환 + lazy loading 적용으로 LCP 개선
Impact
TBT 10ms
메인스레드 블로킹 최소화 (데스크톱 실측)
FCP 0.6s
초기 콘텐츠 렌더 (데스크톱 실측)
단독
프론트엔드 성능 최적화 전 과정 수행