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

간단 소개

올리브영 메인 페이지 성능 개선 과정을 분석하고, 개선 결과 및 향후 계획을 요약합니다.

AI Summary

메인 페이지 성능 문제 진단
- 올리브영 온라인몰의 성장으로 인해 메인 페이지 성능 저하 문제가 발생, 사용자 경험에 부정적 영향.
- 초기 분석 결과, 불필요한 지연 로직, 느린 LCP(Largest Contentful Paint), 쿼리 요청에 따른 문서 생성 시간 지연 등이 주요 원인으로 파악됨.
성능 개선 노력 및 결과
- 불필요한 setTimeout 로직 제거를 통해 초기 LCP 시간 단축. (로컬 환경 기준 3.9초 -> 3.4초)
- LCP 개선을 위해 사용자 뷰포트 내 콘텐츠 우선 로딩, 좌우 탭 로딩 지연 전략 적용.
- 서버 API 개선을 통해 쿼리 지연 시간을 줄이고, 사용자에게 빠르게 콘텐츠를 제공하는 방식으로 개선.
- 개선 결과, FID(First Input Delay) 34% 개선, LCP 81% 개선, 로딩 타임 122% 개선이라는 괄목할 만한 성과 달성.
향후 계획
- 레거시 프로젝트를 모던 프레임워크로 전환하는 작업 지속.
- 온라인몰 개선 및 모던 프레임워크 전환에 함께할 개발자 채용 중.