개인화 추천 템플릿 메인 페이지에 유저를 부드럽게 랜딩시키기
30
AI 요약
이 글은 AI가 원문을 분석하여 핵심 내용을 요약한 것입니다.
이 게시물은 개인화 추천 템플릿 메인 페이지의 CSR 환경에서 LCP를 개선한 여정입니다.
최적화 목표
- 첫인상 LCP 개선과 CSR 유지로 인프라 부담 최소화
주요 문제
- SSG와 A/B 테스트 충돌로 인한 화면 갑작스런 전환 및 깜빡임
핵심 전략
- preconnect·dns-prefetch로 네트워크 연결 선설정하여 연결 지연 제거
- 모듈 top-level prefetch로 React 렌더링 전 API 호출 앞당김
- QueryCache 구독과 document.head에 삽입으로 이미지 발견 시점 앞당김
- fetchpriority, srcset, loading, decoding 등 이미지 속성 최적화 및 next/dynamic 코드 스플리팅으로 초기 로드 경량화
