핵심 요약
미리디가 개인화 템플릿 메인 페이지의 CSR 렌더링에서 A/B 테스트와 SSG 충돌 문제를 해결하고, 모듈 상위 API 프리패치, preconnect/dns-prefetch, 이미지 프리로드, 초기 번들 축소를 도입해 p75 LCP를 약 50% 가까이 감소시켰다.
구현 방법
- 모듈 상위 프리패치(prefetchOnModuleLoad)로 API 데이터를 선행 확보
- QueryCache 구독 + 프리로드를 통해 데이터/이미지의 발견 시점을 앞당김
- preconnect/dns-prefetch 적용 및 Next/Image priority와 srcset/sizes로 이미지 로딩 최적화, 필요 컴포넌트는 dynamic import로 초기 번들 축소
주요 결과
- p75 LCP를 약 50% 가까이 감소
- CSR 기반의 초기 렌더링 속도와 사용자 랜딩 경험이 개선
