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

문제 상황

• 온라인몰 메인페이지의 초기 렌더링 지연과 느린 LCP로 인한 사용자 불편
• 활성 탭 체크를 위한 0.5초 지연 로직과 탭 동시 렌더링으로 인한 우선순위 혼선
• 서버 쿼리 지연으로 문서 생성 시간이 길어지고 빈 화면 노출 시간이 증가

해결 방법

• 메인 렌더링에서 불필요한 0.5초 지연 로직 제거
• 활성 탭을 우선 로드하고, 좌우 탭은 이후 로드하는 방식으로 렌더링 순서 조정
• 홈 탭 데이터 API 분리로 뷰포트 내 우선 노출 영역을 먼저 제공

성능/운영 포인트

• Datadog과 브라우저 성능 도구로 FCP, LCP, request 시간을 지속 확인
• setTimeout 제거 후 LCP 개선, 배포 후 FID와 LCP, 로딩 타임 모두 개선
• 레거시 코드와 모던 프레임워크 전환을 병행하는 성능 개선 방향

적용해볼 점

• 불필요한 지연 로직과 렌더링 우선순위 충돌부터 점검
• 사용자 첫 화면에 필요한 데이터만 먼저 주고 나머지는 지연 로드
• 프론트엔드 개선과 서버 응답 개선을 함께 고려