critical-script, 배달의민족 웹뷰 로딩 성능을 30% 개선한 인라인 스크립트 로딩 전략 이야기

들어가며 배달의민족 앱은 일부 지면을 웹뷰로 구성하는 하이브리드 앱입니다. 대표적인 커머스 서비스인 B마트의 가게홈 지면도 웹뷰로 구성됩니다. 웹뷰는 한 번의 개발로 iOS와 Android에 동시에 대응할 수 있어 개발 공수가 적고, 스토어 심사를 거치지 않아 필요할 때 배포할 수 있는 장점이 있습니다. 다만 화면을 그리기 위한 에셋(HTML, CSS, JavaScript)을 매번 다운로드해야 해서, 코드가 이미 앱 번들에 포함되어 있는 네이티브에 비해 로딩 속도가 느린 단점이 있기도 합니다. 로딩 속도가 느리면 어떤 문제가 있을까요? 사용자는 답답함을 느끼고 페이지를 이탈할 수 있습니다. 이탈률이 증가하면 주문 전환율의 감소로 이어집니다. 반대로 로딩 속도를 개선하면 이탈률을 줄이고 주문 전환율을 높일 수 있습니다. 실제로 영국의 통신 기업 Vodafone은 2021년에 LCP를 개선한 페이지와 기존 페이지를 A/B 테스트했습니다. 그 결과 LCP가 31% 개선된 페이지에서 매출이 약 8%, 장바구니 진입 비율이 11% 증가했습니다. (web.dev에서 소개된 사례) LCP(Largest Contentful Paint)는 페이지 로딩을 시작한 뒤 화면에 보이는 요소 중 가장 큰 이미지나 텍스트가 표시되는 데 소요된 시간입니다. 로딩 성능을 평가하는 대표적인 지표로 쓰입니다. 이상적인 목표는 웹뷰의 로딩 시간을 네이티브 앱 수준까지 단축하는 것입니다. 그래서 이 글에서는 사용자가 웹뷰도 쾌적하게 사용할 수 있도록 API 요청 시점을 앞당겨 웹뷰 로딩 시간을 개선한 과정을 소개합니다. 문제 분석하기 커머스 서비스(B마트 같은 장보기 서비스)의 웹뷰 중 사용자가 가장 많은 웹뷰는 첫 진입점에 있는 가게홈(가게에 들어가면 처음 보이는 화면) 웹뷰입니다. 사용자가 가장 많은 웹뷰의 로딩 속도는 어땠을까요? 좋은 네트워크 환경과 좋은 성능의 스마트폰에서 열어 봤는데도 네이티브로 구현된 페이지에 비하면 느리다고 체감되었습니다. 네트워크 상태가 나쁘거나 저사양 기기를 쓰는 사용자라면 로딩이 훨씬 더 느릴 것입니다. 로딩 속도가 느린 이유를 알기 위해 먼저 Chrome DevTools의 Performance 탭으로 로딩 과정을 측정했습니다. 화면이 그려지기까지 다음 일이 차례대로 일어났습니다. 브라우저가 index.html 을 다운로드하고 파싱합니다. <script> 태그에 적힌 JavaScript 번들을 다운로드...