critical-script, 배달의민족 웹뷰 로딩 성능을 30% 개선한 인라인 스크립트 로딩 전략 이야기
프론트엔드
critical-script, 배달의민족 웹뷰 로딩 성능을 30% 개선한 인라인 스크립트 로딩 전략 이야기
두줄요약
인라인 스크립트로 초기 API 요청을 번들 로딩과 병렬화해 웹뷰 LCP를 37% 개선했습니다. Vite 플러그인으로 타입 공유, 페이지 인접 배치, 스크립트 크기 제한을 지원했습니다.
문제 상황
- 웹뷰의 HTML·번들 다운로드·실행·API 요청·렌더링이 직렬로 이어지는 로딩 워터폴
- 네이티브 페이지 대비 느린 가게홈 체감 속도와 LCP·이탈률·주문 전환율 저하 가능성
해결 방법
- HTML 파싱 시점의 인라인 스크립트로 API 요청을 시작해 번들 다운로드·실행과 병렬화
window전역 캐시에fetchPromise를 저장하고 axios 요청 인터셉터에서 응답 재사용*.critical.ts모듈을 esbuild로 번들·압축해 인라인 스크립트 컴포넌트로 변환하는 Vite 플러그인 구현
성능/운영 포인트
- 갤럭시 S22+·Wi-Fi 측정에서 LCP 1,340ms→847ms, 37% 개선
outputSizeLimit기본 8KB 제한으로 의도치 않은 라이브러리 포함 방지- 페이지 인접 배치와 앱 모듈·타입 공유로 유지보수성 및 다수 페이지 적용성 개선
적용해볼 점
- API 응답 시간·번들 크기 최적화만으로 한계가 있을 때 로딩 임계 경로의 병렬화 검토
- 정적 프리렌더링 페이지에서 초기 화면 API를 최소 크기의 인라인 스크립트로 선요청