프론트엔드 성능, 비즈니스와 기술의 완벽한 콜라보!
by DD
8개월 전
조회수 9
LCP를 핵심 지표로 설정하고, 이미지 경량화 및 코드 스플리팅을 통해 30% 성능 향상을 달성함
수동 Chunk 설정을 통해 Vendor 코드의 캐싱 효율을 높이고, JS Evaluation 시간을 최적화함
Skeleton UI 적용으로 체감 성능을 개선하고, 비즈니스 가치에 맞는 지면을 선택하여 최적화 진행
LCP 지표, 성능 개선의 시작
LCP(Largest Contentful Paint)는 사용자 경험을 측정하는 핵심 지표이다. p75 LCP를 기준으로 삼아, 성능 개선의 목표를 명확히 했다. 따라서, LCP 개선에 초점을 맞춰, 불필요한 최적화 시도를 줄이고, 효율적인 작업을 수행했다.
이미지 최적화, 용량 절감의 핵심
이미지 용량 감소는 LCP 개선의 필수 요소이다. 이미지 서버를 활용하여, WebP 포맷 적용 및 CDN 캐싱을 통해 이미지 로딩 속도를 향상시켰다. 반면, 동적 이미지의 경우, 캐싱 효율이 떨어지므로, Preset을 활용하는 전략을 고려해야 한다.
JS Evaluation 최적화, 렌더링 성능 향상
JS Evaluation 시간 최적화는 메인 스레드의 효율성을 높이는 데 중요하다. Preload를 통해 JS Chunk를 미리 로드하여, 유휴 시간을 활용했다. 구체적으로, ManualChunk를 사용하여 Vendor 코드를 분리하고, 캐싱 효율을 극대화하여 LCP 개선에 기여했다.
