핵심 요약
트렌비가 Intersection Observer 기반 Lazy Loading을 도입해 초기 로딩 시 불필요한 대용량 이미지 로드를 지연시키고 필요한 콘텐츠를 먼저 렌더링하도록 개선했습니다.
구현 방법
- Intersection Observer로 보이는 영역의 리스트만 로딩하고, 보이지 않는 부분은 LoadingScreen으로 대체
- React 환경에서 useInView 방식으로 구현 가능하도록 제시
- 필요 시점에 이미지를 로딩하도록 구성하여 자원 사용 최적화
주요 결과
- 최초 로딩 리소스: 120mb → 평균 9.6mb로 감소
- 첫 페이지 로딩 시간: 약 30초 → 약 5.5초로 단축
- 성능 개선: 약 500% 수준으로 확인
