프론트엔드
FE Lazy Loading 적용기
두줄요약
상품 이미지가 많은 페이지의 과도한 초기 로딩 문제를 Intersection Observer 기반 Lazy Loading으로 개선했습니다. 최초 이미지 리소스를 평균 9.6MB로 줄이고 첫 페이지 로딩 시간을 평균 5.5초로 단축했습니다.
문제 상황
- 세일스캐너에 다수 카테고리와 상품을 진열하며 이미지 요청량 급증
- 모바일에서 긴 로딩 시간과 과도한 리소스 요청으로 앱 동작 불가 현상
원인 분석
- 카테고리 30개 수준부터 안정적 로딩 한계 확인
- 데스크톱 네트워크 제한 환경에서도 로딩 가능해 네트워크 속도만의 문제는 아닌 상황
- 최초에 모든 상품 이미지를 로드하는 방식이 핵심 병목
해결 방법
- 화면에 필요한 리스트 컴포넌트만 렌더링하고 나머지는 Loading 컴포넌트로 대체
- Intersection Observer 또는 react-intersection-observer의 useInView 활용
- 요소 노출 시 showList 상태 변경, triggerOnce 옵션으로 한 번만 상품 목록 표시
성능/운영 포인트
- 최초 호출 이미지 리소스 120MB에서 평균 9.6MB로 감소
- 첫 페이지 로딩 완료 시간 약 30초에서 평균 약 5.5초로 단축
- 이미지가 많은 페이지에서 리소스 절감과 초기 사용자 경험 개선 수단
