FE Lazy Loading 적용기

트렌비 Growth Marketing 개발팀의 FE 개발자가 세일스캐너 페이지의 성능 개선을 위해 Lazy Loading을 적용한 경험을 공유하는 글입니다. 많은 상품 이미지를 한 번에 로딩하면서 발생하는 모바일 앱 다운 현상과 긴 로딩 시간을 문제로 진단했습니다.

동시 로딩 콘텐츠 개수 제한 및 네트워크 속도 제한 테스트를 통해 근본적인 원인이 한 번에 많은 리소스를 로딩하는 것임을 파악했습니다. 해결책으로 모든 리소스를 가져오기보다 필요한 시점에 로딩하는 Lazy Loading 기법을 도입하여 사용자 경험과 페이지 로딩 속도를 개선하는 과정을 설명합니다.