온라인몰 성능개선을 위한 FE 개발자의 고민 part-1

Context

올리브영 온라인몰이 빠르게 성장하면서 대량의 데이터를 렌더링할 때 초기 페이지 로딩 속도가 저하되고 클라이언트 자원 소모가 발생했다. 페이지 로드 시 화면에 보이지 않는 엘리먼트들까지 모두 생성하면서 불필요한 리소스가 낭비되고 있었다.

Technical Solution

• 뷰포트 기반 렌더링으로 전환: 페이지 초기 로딩 시 사용자 화면에 보이는 영역(Viewport)의 엘리먼트만 생성하고 나머지는 생략
• 스크롤 이벤트 기반 동적 로딩: 사용자가 스크롤할 때마다 필요한 엘리먼트를 추가 생성
• 기존 라이브러리 대신 자체 구현: react-infinite-scroll-component와 react-infinite-scroller 검토 후 커스터마이징 불편함과 빌드 파일 크기를 고려해 직접 개발
• 브라우저 렌더링 최적화 기초 적용: Reflow/Repaint 최소화, will-change CSS 속성 활용 등 병행

Impact

FCP(First Contentful Paint)와 LCP(Largest Contentful Paint) 성능이 개선되어 전체 소요 시간이 단축됨.

Key Takeaway

대량 데이터를 처리하는 웹 서비스에서 전체 DOM을 사전 렌더링하지 않고 보이는 영역만 동적으로 구성하면, 초기 로딩 속도와 스크롤 반응성을 동시에 개선할 수 있다.