FE 최적화, 비즈니스로 시작해서 엔지니어링으로 끝내기

이 게시물은 당근마켓 Local Business 프론트플랫폼팀이 진행한 프론트엔드 성능 개선 사례와 노하우를 소개합니다.

주요 내용

• p75 LCP 지표를 중심으로 성능 개선 목표 설정 및 지속적 모니터링
• 매출과 트래픽이 높은 지면 위주로 최적화 집중
• 이미지 경량화 및 WebP 포맷 적용, manualChunks를 이용한 번들 최적화
• JS 평가(Evaluation) 시간 단축을 위한 코드 경량화와 Lazy Load 적용
• JS Chunk, API, 이미지 Preload로 리소스 로딩 시간 단축
• Skeleton UI 적용으로 체감 성능 개선

회고 및 결론

• 작은 개선들을 누적해 p75 LCP를 약 1초 가까이 단축
• 비즈니스 목표와 엔지니어링 시도를 조화시키는 접근법 강조
• 앞으로도 꾸준한 개선과 다른 팀과의 협업 필요성 언급