requestIdleCallback으로 초기 렌더링 시간 14% 단축하기

LINE 증권 프런트엔드 팀은 웹 바이탈 개선을 목표로 성능 최적화 작업을 진행했습니다. 특히 requestIdleCallback API를 활용하여 초기 렌더링 시간을 약 14% 단축한 경험을 공유합니다.

서버 사이드 렌더링을 사용하지 않는 환경에서 JavaScript 번들 로딩 및 실행 시간을 줄이기 위해, 톱 페이지 아래쪽 콘텐츠에 필요한 JavaScript를 별도 파일로 분할하고 나중에 로딩하는 레이지 로딩 방식을 적용했습니다. 이를 통해 LCP(Largest Contentful Paint) 지표 개선을 기대했으며, Lighthouse 성능 점수도 30점 가량 상승하는 성과를 거두었습니다.

이 글은 React와 webpack 환경에서 진행된 성능 개선 사례를 다룹니다.