핵심 요약
올리브영에서 온라인몰 메인페이지의 성능 개선을 통해 프런트엔드 최적화로 LCP와 FID를 크게 개선하고 로딩 타임을 대폭 단축했습니다.
구현 방법
- Datadog 모니터링으로 홈 콘텐츠 로드 시간과 JSP 렌더링 시간, 쿼리 지연 요인을 식별
- 렌더링 로직의 불필요한 0.5초 지연 제거(setTimeout 제거)
- 홈 탭 우선 로드 전략, 좌우 탭은 필요 시 로드하도록 순서 최적화; Hash 기반 로딩으로 스와이프 성능 향상
- 뷰포트 내 빈 화면 최소화를 위한 API 분리 및 CSR/SSR 흐름 재설계
- 서버 쿼리 분리 및 응답 흐름 개선으로 초기 렌더링 대기 시간 감소
- 모던 프레임워크 도입 방향과 레거시 코드 물리적 전환 계획 수립
주요 결과
- LCP P75: 2.28초, LCP P90: 3.37초로 개선
- FID 약 34% 개선
- LCP 약 81% 개선
- 로딩 타임 약 122% 개선
- 배포 후 데이터독 대시보드에서 눈에 띄는 성능 감소 및 사용자 체감 향상 확인
