개인화 추천 템플릿 메인 페이지에 유저를 부드럽게 랜딩시키기
프론트엔드
개인화 추천 템플릿 메인 페이지에 유저를 부드럽게 랜딩시키기
두줄요약
개인화 추천 템플릿 메인 페이지의 LCP 지연을 줄이기 위해 CSR을 유지한 채 전환 애니메이션과 네트워크·API·이미지 로딩 최적화를 적용했습니다. 그 결과 부드러운 랜딩을 확보하면서도 첫 화면 성능을 개선했습니다.
문제 상황
- 개인화 추천 템플릿 메인 페이지로 전환하며, 20만 DAU 규모의 첫 진입 화면 성능 개선 필요
- A/B Test 10% 실험군과 기존 SSG 페이지가 충돌하며 화면이 갑자기 바뀌는 경험 발생
- CSR 구조에서 API 호출, 이미지 발견, 네트워크 연결이 모두 순차적으로 진행되어 LCP 지연 발생
해결 방법
- 전환 시점에 그라디언트 dim overlay 애니메이션을 넣어 실험군의 급격한 화면 전환 완화
- preconnect, dns-prefetch로 핵심 도메인 연결을 선행하고 top-level prefetch로 API 호출 시점 앞당김
- QueryCache 구독과 동적 preload 삽입으로 이미지 발견 시점을 당기고, 썸네일 URL 및 이미지 속성을 최적화
성능/운영 포인트
- SSR 전환 대신 CSR 유지로 인프라 비용과 운영 부담 최소화
- preconnect는 핵심 도메인에만 제한하고, API 도메인에는 crossOrigin 설정 필요
- prefetch는 best effort로 두고, 실패는 훅 단계에서 재시도·복구