프론트엔드
온라인몰 성능개선을 위한 FE 개발자의 고민 part-1
두줄요약
온라인몰 성능 개선을 위해 Infinite Scroll로 렌더링 범위를 줄인 사례를 다뤘습니다. 초기 로딩 속도와 스크롤 체감 성능이 개선됐습니다.
핵심 내용
- 온라인몰 성장에 따른 FE 성능 개선 고민과 브라우저 렌더링 최적화 맥락
- Infinite Scroll로 현재 뷰포트 영역만 렌더링해 불필요한 리소스 감소
- 라이브러리 검토 후 커스텀 구현으로 빌드 크기와 확장성 고려
- 적용 결과 FCP/LCP 등 초기 로딩 성능 개선과 스크롤 딜레이 완화
적용해볼 점
- 대량 엘리먼트가 있는 페이지에서 초기 렌더링 범위 축소 검토
- Reflow/Repaint, 영향 노드, will-change 등 렌더링 비용 관리 병행