Ele.me to największa firma zajmująca się zamawianiem i dostawą żywności w Chinach kontynentalnych. Obsługuje 260 milionów zarejestrowanych użytkowników z ponad 200 miast w całych Chinach i ma ponad 1, 3 miliona ofert restauracji. Ponieważ 99% użytkowników zamawia jedzenie na urządzeniach mobilnych, firma Ele.me postanowiła ulepszyć witrynę mobilną, zwiększając szybkość i niezawodność w przypadku niestabilnych połączeń. W tym celu wykorzystała podstawowy model techniczny aplikacji wielostronicowej w celu zaspokojenia ich potrzeb operacyjnych.
- Czas wczytywania skrócił się o 11,6% na wszystkich stronach w pamięci podręcznej
- Czas wczytywania skrócił się średnio o 6,35% na wszystkich stronach.
- Czas do stałego poziomu interakcji spadł do 4,93 sekundy w sieci 3G przy pierwszym wczytaniu
Po opublikowaniu aplikacji PWA ele.me czas wczytywania znacznie się zmniejszył, dzięki czemu internet mobilny stał się jedną z najszybszych witryn do rezerwacji jedzenia w Chinach.
Spencer Yang, menedżerka produktu w Ele.me PWA
Wybór między aplikacją wielostronicową a aplikacją jednostronicową
W przypadku aplikacji wielostronicowej (MPA) każda trasa, którą przechodzi użytkownik, powoduje wysłanie do serwera pełnego żądania strony wraz z powiązanymi skryptami i stylami. Jest to przeciwieństwo modelu aplikacji jednostronicowej (SPA), w którym każda nawigacja po trasie powoduje pobranie tylko treści i danych związanych z tą trasą, a interfejs jest tworzony za pomocą kodu JavaScript działającego w aplikacji klienckiej.
Gwałtowny rozwój Ele.me w ostatnich latach spowodował rozwój w niej odrębnych oddziałów, z których każda odpowiada za prowadzenie mikroserwisów w głównej domenie https://ele.me. Zespół Ele.me stwierdził, że odłączenie tych poszczególnych usług najlepiej przeprowadzić za pomocą modelu aplikacji wielostronicowej (MPA), a każdy z nich powinien obsługiwać i obsługiwać własną usługę.
Stosowanie PRPL do MPA
Wzorzec PRPL (wstępne ładowanie zasobów krytycznych, renderowanie początkowa, pozostałe trasy wstępnie w pamięci podręcznej, pozostałe trasy leniwe ładowanie) zapewnia programistom stron internetowych zestaw szyn, na których opiera się konstrukcja PWA, ze szczególnym uwzględnieniem szybkiego czasu potrzebnego do interakcji i maksymalizacji buforowania w celu ograniczenia przesyłania danych w obie strony w sieci. Mimo że program PRPL
został dokładnie przetestowany
w aplikacjach jednostronicowych, nie było jasne, jak ma być stosowany
w przypadku MPA. Rozważając przeprojektowanie MPA jako PWA, Ele.me postanowiła przyjąć podejście PRPL. W tym celu dbają o to, aby gdy użytkownik otwierał stronę, wczytał z wyprzedzeniem najważniejsze zasoby tej strony, dodając do niej tag <link rel="preload"> w razie potrzeby, lub wyświetlał te skrypty na odpowiednio płytkim poziomie, żeby moduł wstępnego ładowania przeglądarki mógł wykonywać swoje zadania bez konieczności korzystania z dodatkowych wskazówek. Stopniowo ulepszają też PWA, instalując skrypt service worker, gdy jest on obsługiwany przez przeglądarkę. Następnie wykorzystuje go do pobierania i wczytywania w pamięci podręcznej innych tras nawigacyjnych najwyższego poziomu. Dzięki temu użytkownicy szybciej się wczytują i renderują podczas kliknięcia. Każda strona w MPA to osobna trasa, więc przyspieszenie renderowania trasy początkowej jest równoważne ze stosowaniem sprawdzonych metod optymalizacji krytycznych ścieżek renderowania w przypadku każdej trasy. Dzięki tym zmianom ogólny czas wczytywania skrócił się średnio o 6, 35% na wszystkich stronach.
Jak najszybciej udostępnij szkielet ekranów przejścia
Firma Ele.me chciała zastosować koncepcję szkieletów ekranów w UX. Dzięki temu za każdym razem, gdy użytkownik kliknie dowolny przycisk lub link, strona niezwłocznie zareaguje, przenosząc go na nową stronę i wczytując na niej zawartość w miarę jej pojawiania się treści. Ma to również kluczowe znaczenie dla poprawy postrzeganej wydajności PWA. Każda strona w MPA stanowi własną trasę początkową, więc każda nawigacja wymaga za każdym razem ponawiania wszystkich niezbędnych czynności wczytywania, analizowania i oceny.
Aby obejść ten problem, Ele.me stworzyła ekran szkieletowy jako rzeczywisty komponent interfejsu użytkownika, a następnie użyła stosu renderowania po stronie serwera Vue.js do utworzenia i wstępnego renderowania komponentów Vue w ciągach, a następnie wstrzyknięcia ich do szablonów HTML. Umożliwia im to bezpośrednie renderowanie szkieletu ekranu i uzyskanie bardziej płynnego przejścia podczas przechodzenia między stronami.
|
|
Buforowanie udostępnionych zasobów za pomocą skryptu service worker
W trakcie przeglądania aplikacji PWA wczytywane są różne trasy, więc wielokrotne wczytywanie tych tras z sieci byłoby niepotrzebne. Aby rozwiązać ten problem, zespół Ele.me przeanalizował trasy krytyczne, które są najważniejsze dla użytkowników, utworzył wtyczkę pakietu webpack, aby gromadzić zależności tych tras krytycznych, a następnie wczytywał te trasy w pamięci podręcznej podczas instalowania skryptu service worker w przeglądarce klienckiej użytkownika. Te krytyczne trasy obejmują JavaScript, CSS i obrazy, które tworzą typową powłokę UI PWA.
Trasy, które są uważane za ważne, ale niekrytyczne, są zapisywane stopniowo w pamięci podręcznej przez skrypt service worker w czasie działania, gdy użytkownik kontynuuje poruszanie się po aplikacji PWA. Dzięki temu Ele.me może udostępniać użytkownikom PWA bezpośrednio z pamięci podręcznej w każdym przypadku sieci. W efekcie czas wczytywania skrócił się o 11,6% na wszystkich stronach w pamięci podręcznej.