프론트엔드
FE 최적화, 비즈니스로 시작해서 엔지니어링으로 끝내기
두줄요약
비즈니스 가치가 큰 지면부터 p75 LCP를 기준으로 성능 최적화를 진행했습니다. 이미지 경량화, 번들 분리, Preload, Skeleton 적용으로 체감 속도와 지표를 함께 개선했습니다.
핵심 내용
- 비즈니스 가치가 큰 지면부터 성능 최적화를 진행해 p75 LCP를 기준 지표로 삼음
- 이미지 경량화, 번들 분리, JS 평가 최적화, Preload, Skeleton UI로 체감 속도와 실제 지표를 함께 개선
- 작은 개선을 누적해 주요 지면의 성능을 1초에 가깝게 단축한 사례와 레슨런 정리
선택 이유
- 성능 개선은 비용이 큰 작업이므로 매출·트래픽 영향이 큰 화면에 우선 적용
- p75 LCP를 기준으로 삼아 과도한 최적화 욕심을 줄이고 목표를 명확히 설정
성능/운영 포인트
- 이미지 사이즈 변환, WebP 적용, CDN 캐시 활용으로 리소스 용량 절감
- manualChunks로 vendor 코드 분리해 캐시 효율 개선
- 메인 스레드 유휴 시간, Evaluate Script, Preload 타이밍을 함께 점검
적용해볼 점
- 성능 지표를 하나 정해 팀 공통 기준으로 운영
- 체감 성능을 위해 Skeleton과 초기 로딩 경험을 함께 개선