올리브영 메인페이지 성능 개선기

Context

올리브영 온라인몰 메인페이지는 사용자 수 증가에 따라 성능 이슈가 심화되었다. 개선 전 메인페이지 진입 시 0.5초 지연 후 탭 활성화를 체크하고, 모든 탭의 컨텐츠를 동시에 렌더링하면서 네트워크 요청이 충돌했다. 서버의 쿼리 실행 시간(1.82초)이 JSP 렌더링 시간(77.9ms)을 크게 초과하면서 LCP가 3.37초대를 기록했다.

Technical Solution

• 메인페이지 렌더링 로직에서 불필요한 0.5초 setTimeout 제거: URL 해시 값 대기용 지연 로직을 삭제하여 컨텐츠 요청 시간 단축
• Swiper 탭 로딩 순서 최적화: 활성화 탭(홈)의 DOMContentLoaded 완료 후 좌우측 탭 렌더링 시작으로 우선순위 재조정
• 메인페이지 API 분리: 단일 API에서 모든 데이터를 반환하던 방식을 뷰포트 내 필수 콘텐츠와 뷰포트 외 콘텐츠로 분리하여 초기 응답 시간 단축
• Hash 방식 최적화: 사용자 스와이프 시 이미 렌더링된 탭은 DOM 변경 없이 표시하고 비어있는 탭만 로드
• 클라이언트 렌더링 부하 감소: 불필요한 탭의 동시 렌더링 제거로 브라우저 렌더링 작업 최소화

Impact

• FID(First Input Delay): 34% 개선
• LCP(Largest Contentful Paint): 81% 개선
• 로딩 시간: 122% 개선
• LCP P75: 2.28초 달성
• LCP P90: 3.37초대 기록

Key Takeaway

레거시 프론트엔드에서 성능 최적화 시 불필요한 지연 로직 제거만으로도 단기 성능 이득을 얻을 수 있으며, 리소스 로딩 우선순위 재정렬과 API 응답 분리는 초기 렌더링 체감 속도를 근본적으로 개선한다. 서버 응답 시간 개선과 함께 진행될 때 사용자 체감 성능이 극대화된다.