Ele.me, 다중 페이지 프로그레시브 웹 앱으로 성능 로드 시간 개선

Ele.me는 중국에서 가장 큰 음식 주문 및 배달 회사입니다. 중국 전역 200개 이상의 도시에서 2억 6천만 명의 등록 사용자에게 서비스를 제공하며 130만 개가 넘는 레스토랑 목록을 보유하고 있습니다. 사용자의 99% 가 모바일에서 음식을 주문하게 되면서 Ele.me는 모바일 웹 환경을 개선하여 불안정한 연결에서도 더욱 빠르고 안정적인 서비스를 제공하는 동시에 운영 요구사항을 충족하기 위해 다중 페이지 앱의 핵심 기술 모델을 활용했습니다.

  • 사전 캐시된 모든 페이지에서 로드 시간이 11.6% 감소했습니다.
  • 모든 페이지에서 로드 시간이 평균 6.35% 감소했습니다.
  • 최초 로드 시 3G 네트워크에서 일관된 상호작용까지의 시간이 4.93초로 떨어짐

ele.me PWA를 출시한 후 로드 시간이 크게 줄어 모바일 웹 환경이 중국에서 가장 빠른 음식 예약 사이트 중 하나로 탈바꿈했습니다.

스펜서 양, Ele.me PWA 제품 관리자

다중 페이지 앱과 단일 페이지 앱 중에서 선택

다중 페이지 앱 (MPA)에서 사용자가 이동하는 모든 경로는 필요한 관련 스크립트 및 스타일과 함께 페이지의 전체 요청을 서버에 트리거합니다. 이는 모든 경로 탐색이 해당 경로와 관련된 콘텐츠와 데이터에 대해서만 가져오기를 트리거한 후 UI가 클라이언트 앱에서 실행되는 자바스크립트 코드로 구성되는 단일 페이지 앱 (SPA) 모델과 대조됩니다.

최근 몇 년 동안 Ele.me가 폭발적으로 성장하면서 회사 내 별개의 사업부가 성장했습니다. 각 사업부는 기본 https://ele.me 도메인에서 마이크로서비스를 실행하고 있습니다. Ele.me팀은 이러한 개별 서비스의 분리는 다중 페이지 앱 (MPA) 모델을 사용하는 것이 가장 좋다는 결론을 내렸으며, 각 팀이 자체 서비스를 실행하고 유지관리했습니다.

MPA에 PRPL 적용

PRPL 패턴 (미리 로드 중요한 리소스, 렌더링 초기 경로, 남은 경로 사전 캐시, 남은 경로 지연 로드)는 PWA의 구조를 안내하는 레일 집합을 제공합니다. 특히 빠른 상호작용 시간과 캐싱을 극대화하여 네트워크 왕복을 줄이는 데 특히 중점을 둡니다. PRPL은 SPA에서 제대로 테스트되었지만 실제로 MPA에 PRPL을 적용하는 방법은 명확하지 않았습니다. Ele.me는 MPA를 PWA로 다시 빌드하는 것에 대해 생각할 때 PRPL 의식을 갖기로 했습니다. 이를 위해 개발자는 사용자가 페이지로 이동할 때 필요에 따라 <link rel="preload">를 포함하거나 브라우저의 프리로더가 추가 힌트 없이 작업을 실행할 수 있도록 이러한 스크립트를 충분히 얕은 수준으로 표시하여 사용자가 해당 페이지의 중요한 리소스를 미리 로드하도록 합니다. 또한 브라우저에서 지원할 때마다 서비스 워커를 설치하여 PWA를 점진적으로 개선합니다. 그런 다음 이를 사용하여 다른 최상위 탐색 경로를 가져오고 사전 캐시함으로써 사용자가 PWA를 클릭할 때 더 빠른 로드 및 렌더링 환경을 경험하게 됩니다. MPA의 각 페이지는 자체 경로이므로 초기 경로의 렌더링 속도를 높이는 것은 각 경로의 중요한 렌더링 경로를 최적화하는 권장사항을 구현하는 것과 같습니다. 이러한 변경사항으로 인해 모든 페이지의 전체 로드 시간이 평균 6.35% 감소했습니다.

최대한 빨리 전환 스켈레톤 화면 제공

Ele.me는 스켈레톤 화면이라는 아이디어를 UX에 적용하고자 했습니다. 스켈레톤 화면은 사용자가 버튼이나 링크를 탭할 때마다 사용자를 새 페이지로 전환한 다음 콘텐츠를 사용할 수 있게 되면 해당 페이지에 콘텐츠를 로드하여 최대한 빨리 페이지가 반응하도록 하는 방법입니다. 이는 PWA의 인지 성능을 개선하는 핵심이기도 합니다. 그러나 MPA의 각 페이지는 고유한 초기 경로이므로 각 탐색에는 필요한 모든 로드, 파싱, 평가 작업을 매번 다시 실행해야 합니다.

이 문제를 해결하기 위해 Ele.me는 스켈레톤 화면을 실제 UI 구성요소로 빌드한 다음 Vue.js의 서버 측 렌더링 스택을 사용하여 Vue 구성요소를 빌드한 다음 문자열로 사전 렌더링한 후에 HTML 템플릿에 삽입했습니다. 이렇게 하면 사용자가 스켈레톤 화면을 직접 렌더링하고 페이지 간에 이동할 때 보다 유연하게 전환할 수 있습니다.


페이지 전환 중 표시되는 스켈레톤 화면
페이지 전환 중 표시되는 스켈레톤 화면
페이지 전환 후 페이지가 완전히 렌더링됨
페이지 전환 후 페이지가 완전히 렌더링됨

서비스 워커로 공유 리소스 캐싱

사용자가 PWA를 탐색할 때 다양한 경로가 로드되므로 네트워크에서 이러한 경로를 계속해서 로드하는 것은 낭비입니다. 이를 해결하기 위해 Ele.me는 사용자가 가장 관심을 갖는 중요 경로를 분석하고, 웹팩 플러그인을 만들어 중요한 경로의 종속 항목을 수집한 후 사용자의 클라이언트 브라우저에 서비스 워커를 설치할 때 이러한 경로를 사전 캐시했습니다. 이러한 중요한 경로에는 PWA의 일반적인 UI 셸을 형성하는 자바스크립트, CSS, 이미지가 포함됩니다.

중요하지만 중요하지 않은 것으로 간주되는 경로는 사용자가 PWA를 계속 탐색할 때 런타임에 서비스 워커에 의해 점진적으로 캐시됩니다. 이를 통해 Ele.me는 모든 네트워크 조건에서 캐시에서 사용자에게 PWA를 직접 제공할 수 있습니다. 그 결과, 사전 캐시된 모든 페이지에서 로드 시간이 11.6% 감소했습니다.

추가 자료