Ele.me — крупнейшая компания по заказу и доставке еды в материковом Китае. Он обслуживает 260 миллионов зарегистрированных пользователей из более чем 200 городов по всему Китаю и имеет более 1,3 миллиона списков ресторанов. Учитывая, что 99% пользователей заказывают еду на мобильных устройствах, компания Ele.me решила улучшить работу своего мобильного Интернета, сделав его быстрее и надежнее при нестабильных соединениях, полагаясь при этом на базовую техническую модель многостраничного приложения для удовлетворения своих потребностей. оперативные нужды.
- Время загрузки сократилось на 11,6 % на всех предварительно кэшированных страницах.
- Время загрузки сократилось в среднем на 6,35% по всем страницам.
- Время стабильного интерактивного взаимодействия сократилось до 4,93 секунды в сети 3G при первой загрузке.
После того, как мы выпустили PWA ele.me, время загрузки значительно сократилось, превратив наш мобильный Интернет в один из самых быстрых сайтов бронирования еды в Китае.
Спенсер Янг, менеджер по продукту Ele.me PWA
Выбор между многостраничным приложением и одностраничным приложением
В многостраничном приложении (MPA) каждый маршрут, по которому переходит пользователь, запускает полный запрос страницы вместе со связанными сценариями и необходимыми стилями на сервере. В этом отличие от модели одностраничного приложения (SPA), где каждая навигация по маршруту запускает выборку только содержимого и данных, относящихся к этому маршруту, а затем пользовательский интерфейс создается с помощью кода Javascript, выполняемого в клиентском приложении.
Взрывной рост Ele.me в последние годы привел к росту отдельных бизнес-подразделений внутри компании, каждое из которых отвечает за работу своего микросервиса в основном домене https://ele.me . Команда Ele.me пришла к выводу, что разделение этих отдельных сервисов лучше всего достигается за счет модели многостраничного приложения (MPA), когда каждая команда запускает и поддерживает свой собственный сервис.
Применение PRPL к MPA
Шаблон PRPL ( предварительная загрузка критически важных ресурсов, рендеринг начального маршрута, предварительное кэширование оставшихся маршрутов, ленивая загрузка оставшихся маршрутов) предоставляет веб-разработчикам набор направляющих для управления структурой PWA, с особым акцентом на быстрое время интерактивности. и максимальное использование кэширования для уменьшения количества обращений по сети. Хотя PRPL был хорошо протестирован на SPA, было менее ясно, как его фактически применить к MPA. Компания Ele.me решила принять подход PRPL, думая о преобразовании своего MPA в PWA. Для этого они гарантируют, что когда пользователь переходит на страницу, он предварительно загружает критически важные ресурсы для этой страницы, включая <link rel="preload"> по мере необходимости, или отображая эти сценарии на достаточно поверхностном уровне, чтобы Предварительный загрузчик браузера может выполнять свою работу без дополнительных подсказок. Они также постепенно совершенствуют свои PWA, устанавливая сервис-воркер всякий раз, когда он поддерживается браузером, который затем используют для извлечения и предварительного кэширования других навигационных маршрутов верхнего уровня, чтобы пользователь мог быстрее загружать и рендерить, когда он щелкает мышью. ПВА. Каждая страница в MPA представляет собой собственный маршрут, поэтому ускорение отрисовки исходного маршрута эквивалентно внедрению лучших практик по оптимизации критического пути отрисовки для каждого маршрута. Благодаря этим изменениям общее время загрузки сократилось в среднем на 6,35% по всем страницам.
Обслуживание экранов скелета перехода как можно скорее
Ele.me хотел применить идею скелетных экранов в UX, что позволяет гарантировать, что всякий раз, когда пользователь нажимает любую кнопку или ссылку, страница реагирует как можно скорее, переводя пользователя на эту новую страницу, а затем загружая ее. в контенте этой страницы по мере того, как контент становится доступным; это также является ключом к улучшению воспринимаемой производительности PWA. Однако, поскольку каждая страница в MPA представляет собой собственный начальный маршрут, каждая навигация требует каждый раз повторять всю необходимую работу по загрузке, синтаксическому анализу и оценке.
Чтобы обойти эту проблему, компания Ele.me создала скелетный экран как реальный компонент пользовательского интерфейса, а затем использовала стек серверной рендеринга Vue.js для создания и последующей предварительной визуализации компонентов Vue в строки перед внедрением их в HTML-шаблоны. Это позволяет им напрямую визуализировать скелетный экран и добиться более плавного перехода при навигации между страницами.
 |  |
Кэширование общих ресурсов с помощью Service Worker
Различные маршруты загружаются, когда пользователь просматривает PWA, и было бы напрасной загрузкой этих маршрутов из сети снова и снова. Чтобы решить эту проблему, Ele.me проанализировала критические маршруты, которые больше всего интересуют пользователей, создала плагин веб-пакета для сбора зависимостей этих критических маршрутов, а затем предварительно кэшировала эти маршруты при установке сервисного работника в клиентском браузере пользователя. Эти критические маршруты включают Javascript, CSS и изображения, которые образуют типичную оболочку пользовательского интерфейса PWA.
Маршруты, которые считаются важными, но не критическими, вместо этого постепенно кэшируются сервисным работником во время выполнения, когда пользователь продолжает перемещаться по PWA. Это позволяет Ele.me предоставлять пользователям PWA непосредственно из кеша при любых сетевых условиях. Результат: время загрузки всех предварительно кэшированных страниц сократилось на 11,6%.