Optymalizacja wydajności witryn i aplikacji eBay, aby zapewnić większą wygodę użytkownikom.
W 2019 r. eBay prowadził inicjatywę na poziomie całej firmy, której celem było przyspieszenie działania witryny i aplikacji dla użytkowników. Na każde 100 milisekund, o które skrócił się czas wczytywania strony wyszukiwania na eBayu, liczba kliknięć opcji „Dodaj do koszyka” wzrosła o 0,5%.
100ms
skrócenie czasu wczytywania,
0,5%
Wzrost liczby zdarzeń „Dodanie do koszyka”
Dzięki wdrożeniu budżetów skuteczności (opracowanych po przeprowadzeniu badania konkurencji za pomocą raportu na temat użytkowania Chrome) i skupieniu się na kluczowych wskaźnikach skuteczności związanych z wrażeniami użytkowników firma eBay mogła znacznie poprawić szybkość witryny.
…a ich dane z raportu na temat użytkowania Chrome również wskazują na te ulepszenia.
Nadal jest wiele do zrobienia, ale oto, czego do tej pory dowiedzieliśmy się na eBay.
„Cięcia” w wydajności witryny
Ulepszenia w eBay były możliwe dzięki zmniejszeniu rozmiaru lub czasu trwania różnych elementów, które biorą udział w ścieżce użytkownika. Ten post dotyczy tematów, które są istotne dla całej społeczności web developerów, a nie tylko dla eBay.
Zmniejsz ładunek wszystkich zasobów tekstowych.
Jednym ze sposobów na przyspieszenie działania witryn jest po prostu zmniejszenie ilości wczytywanego kodu. Firma eBay zmniejszyła rozmiary ładowanych danych tekstowych, usuwając nieużywane i niepotrzebne bajty z odpowiedzi JavaScript, CSS, HTML i JSON wysyłanych do użytkowników. Wcześniej z każdą nową funkcją eBay zwiększał ładunek swoich odpowiedzi, nie usuwając nieużywanych elementów. Z upływem czasu stało się to problemem, który ograniczał wydajność. Zwykle zespoły odwlekały to zadanie, ale zdziwi Cię, ile pieniędzy zaoszczędziło eBay.
„Cut” to zmarnowane bajty w ładunku odpowiedzi.
Optymalizacja ścieżki krytycznej dla treści powyżej pola
Nie każdy piksel na ekranie jest tak samo ważny. Treści powyżej są bardziej istotne niż te poniżej. Aplikacje na iOS, Androida, komputery i urządzenia mobilne są tego świadome, ale co z usługami? Architektura usług eBaya ma warstwę o nazwie Usługi dotyczące doświadczeń, z którą komunikują się interfejsy (aplikacje i serwery internetowe dla poszczególnych platform). Ta warstwa została zaprojektowana pod kątem wyświetlania lub urządzenia, a nie typu elementu, np. produktu, użytkownika czy zamówienia. Następnie eBay wprowadził koncepcję ścieżki krytycznej dla usług związanych z doświadczeniami. Gdy do tych usług dociera żądanie, natychmiast starają się uzyskać dane dotyczące treści powyżej progu, wywołując równolegle inne usługi źródłowe. Gdy dane są gotowe, są natychmiast usuwane. Dane poniżej folda są wysyłane w późniejszym fragmencie lub ładowane zwłocznie. Efekt: użytkownicy szybciej widzą treści powyżej progu.
„Cięcie” to czas, jaki usługi potrzebują na wyświetlenie odpowiednich treści.
Optymalizacja obrazów
Obrazy najbardziej wpływają na rozmiar strony. Nawet drobne optymalizacje mogą przynieść duże korzyści. Firma eBay przeprowadziła 2 optymalizacje obrazów.
Po pierwsze, eBay ustandaryzował format obrazu WebP w wynikach wyszukiwania na wszystkich platformach, w tym na urządzeniach z systemem iOS, Android i obsługiwanych przeglądarkach. Strona wyników wyszukiwania to strona z największą liczbą obrazów w eBayu. Firma używała już formatu WebP, ale nie w sposób spójny.
Po drugie, choć zdjęcia produktów na eBay są zoptymalizowane (zarówno pod względem rozmiaru, jak i formatu), w przypadku obrazów kuratorskich (np. w górnym module na stronie głównej) nie stosuje się takich samych rygorów. eBay ma wiele obrazów kuratorskich, które są przesyłane za pomocą różnych narzędzi. Wcześniej optymalizacja była zadaniem osoby przesyłającej obraz, ale teraz eBay egzekwuje zasady w narzędziach, więc wszystkie przesłane obrazy będą odpowiednio optymalizowane.
„Cut” to zbyteczne bajty obrazu wysyłane do użytkowników.
Prognostyczne pobieranie zasobów statycznych
Sesja użytkownika na eBay to nie tylko jedna strona. To jest przepływ. Może to być na przykład przejście ze strony głównej na stronę wyszukiwania, a potem na stronę produktu. Dlaczego strony w trakcie nie pomagają sobie nawzajem? Na tym polega wstępne wczytywanie z wyprzedzeniem, w którym jedna strona pobiera z wyprzedzeniem zasoby statyczne wymagane na następnej stronie.
Dzięki prognozowaniu wstępnemu, gdy użytkownik przejdzie na przewidywaną stronę, zasoby są już w pamięci podręcznej przeglądarki. Dotyczy to komponentów CSS i JavaScriptu, w przypadku których adresy URL można pobrać z wyprzedzeniem. Warto pamiętać, że ta funkcja pomaga tylko podczas pierwszej nawigacji. Podczas kolejnych wizyt komponenty statyczne będą już w pamięci podręcznej.
„Cięcie” to czas potrzebny sieci na pobranie zasobów statycznych CSS i JavaScript podczas pierwszej nawigacji.
Pobieranie w poprzednim wczytaniu najpopularniejszych wyników wyszukiwania
Gdy użytkownik wyszukuje coś na eBayu, dane analityczne tego serwisu wskazują, że jest bardzo prawdopodobne, że użytkownik przejdzie do produktu znajdującego się w 10 najlepszych wynikach wyszukiwania. Dlatego eBay teraz pobiera wstępnie produkty z wyszukiwarki i przechowuje je, aby były gotowe, gdy użytkownik się przełączy. Wstępna analiza odbywa się na 2 poziomach.
Pierwszy poziom działa po stronie serwera, gdzie usługa dotycząca produktów przechowuje w pamięci podręcznej 10 najpopularniejszych produktów w wynikach wyszukiwania. Gdy użytkownik przechodzi do jednego z tych elementów, eBay oszczędza czas przetwarzania na serwerze. Pamięć podręczna po stronie serwera jest wykorzystywana przez aplikacje na konkretne platformy i jest wdrażana globalnie.
Drugi poziom znajduje się w pamięci podręcznej przeglądarki i jest dostępny w Australii. Wstępne wczytywanie produktów było zaawansowaną optymalizacją ze względu na dynamiczną naturę produktów. Jest też wiele niuansów: wyświetlenia strony, pojemność, elementy aukcji itp. Więcej informacji znajdziesz w prezentacji na spotkaniu Performance Engineering Meetup w LinkedIn. Możesz też śledzić bloga, na którym inżynierowie z eBaya publikują szczegółowe artykuły na ten temat.
„Cięcie” może oznaczać czas przetwarzania na serwerze lub czas sieciowy, w zależności od tego, gdzie element jest przechowywany w pamięci podręcznej.
Pośpieszne pobieranie obrazów z wyszukiwarki
Gdy na stronie wyników wyszukiwania zostanie przesłane ogólne zapytanie, dzieją się 2 rzeczy. Pierwszym jest etap przywołania/rankingowania, w ramach którego zwracane są najbardziej trafne elementy pasujące do zapytania. Drugim krokiem jest uzupełnienie przywołanych produktów o dodatkowe informacje związane z kontekstem użytkownika, takie jak koszty dostawy. eBay wysyła teraz 10 pierwszych zdjęć produktu do przeglądarki w jednym kawałku wraz z nagłówkiem, dzięki czemu pobieranie może się rozpocząć, zanim dotrze reszta znaczników. Dzięki temu obrazy będą się teraz wyświetlać szybciej. Ta zmiana jest wprowadzana na całym świecie na platformie internetowej.
„Cięcie” to czas rozpoczęcia pobierania obrazów wyników wyszukiwania.
Tymczasowe przechowywanie danych o autosugestiach na serwerach brzegowych
Gdy użytkownicy wpisują litery w polu wyszukiwania, pojawiają się sugestie. Te propozycje nie zmieniają się w przypadku kombinacji liter przez co najmniej 1 dzień. Te zasoby są idealnymi kandydatami do umieszczenia w pamięci podręcznej i dostarczania z CDN (przez maksymalnie 24 godziny), zamiast wysyłania żądań do centrum danych. Buforowanie CDN jest szczególnie korzystne na rynkach międzynarodowych.
Był jednak pewien haczyk. W wyskakującym okienku z sugestiami eBay używał pewnych elementów personalizacji, których nie można było efektywnie przechowywać w pamięci podręcznej. Na szczęście nie było to problemem w przypadku aplikacji na konkretne platformy, ponieważ interfejs użytkownika do personalizacji i podpowiedzi można było oddzielić. W przypadku stron internetowych na rynkach międzynarodowych opóźnienie było ważniejsze niż niewielka korzyść wynikająca z personalizacji. Dzięki temu eBay może teraz wyświetlać autouzupełnianie z pamięci podręcznej CDN na całym świecie w przypadku aplikacji na konkretne platformy oraz na rynkach innych niż amerykańskie na eBay.com.
„Cięcie” to opóźnienie sieci i czas przetwarzania przez serwer w przypadku autouzupełniania.
Tymczasowe przechowywanie danych na serwerach brzegowych w przypadku nierozpoznanych użytkowników strony głównej
W przypadku platformy internetowej treść strony głównej dla nierozpoznanych użytkowników jest taka sama w danym regionie. Są to użytkownicy, którzy korzystają z eBay po raz pierwszy lub rozpoczynają nową sesję, dlatego nie ma możliwości personalizacji. Chociaż kreacje na stronie głównej często się zmieniają, nadal można stosować buforowanie.
eBay zdecydował się na krótko przechowywać w pamięci podręcznej nierozpoznane treści użytkowników (HTML) w sieci brzegowej (PoPs). Użytkownicy, którzy po raz pierwszy odwiedzają stronę, mogą teraz uzyskać zawartość strony głównej z serwera znajdującego się w pobliżu, a nie z odległego centrum danych. eBay nadal eksperymentuje z tą funkcją na rynkach międzynarodowych, gdzie będzie ona miała większy wpływ.
„Cięcie” to znowu opóźnienie sieci i czas przetwarzania na serwerze w przypadku nierozpoznanych użytkowników.
Optymalizacja pod kątem innych platform
Ulepszenia parsowania aplikacji na iOS i Androida
Aplikacje na iOS i Androida komunikują się z usługami backendowymi, których format odpowiedzi jest zwykle JSON. Ładunki JSON mogą być duże. Zamiast analizować cały plik JSON, aby wyświetlić coś na ekranie, eBay wprowadził wydajny algorytm analizy, który optymalizuje treści, które muszą być wyświetlane natychmiast.
Użytkownicy mogą teraz szybciej zobaczyć treści. Dodatkowo w aplikacji na Androida eBay inicjuje sterowniki widoku wyszukiwania, gdy tylko użytkownik zacznie wpisywać tekst w polu wyszukiwania (w przypadku iOS ta optymalizacja była już dostępna). Wcześniej działo się to dopiero po naciśnięciu przez użytkowników przycisku wyszukiwania. Użytkownicy mogą teraz szybciej uzyskiwać wyniki wyszukiwania. „Cięcie” to czas, jaki urządzenia potrzebują na wyświetlenie odpowiednich treści.
Ulepszenia dotyczące czasu uruchamiania aplikacji na Androida
Dotyczy to optymalizacji czasu uruchomienia „na zimno” w aplikacjach na Androida. Podczas uruchamiania aplikacji „na zimno” wiele operacji inicjalizacji odbywa się zarówno na poziomie systemu operacyjnego, jak i aplikacji. Skrócenie czasu inicjalizacji na poziomie aplikacji pomaga użytkownikom szybciej wyświetlać ekran główny. eBay przeprowadził profilowanie i zauważył, że nie wszystkie inicjacje są wymagane do wyświetlania treści i że niektóre z nich można wykonać w trybie opóźnionym.
Co ważniejsze, eBay zauważył, że wywołanie usługi analitycznej innej firmy blokowało renderowanie na ekranie. Usunięcie wywołania blokującego i przekształcenie go w wywołanie asynchroniczne pozwoliło jeszcze bardziej skrócić czas uruchamiania aplikacji z zimnego stanu. „Cięcie” to niepotrzebny czas uruchamiania aplikacji na Androida.
Podsumowanie
Wszystkie zmiany w wydajności wprowadzone przez eBay przyczyniły się do poprawy wyników, a stało się to w ciągu pewnego czasu. Wersje były wprowadzane stopniowo w ciągu roku, a każda z nich skracała czas o dziesiątki milisekund, aż w końcu osiągnięto obecny poziom:
Wydajność to funkcja i przewaga konkurencyjna. Zoptymalizowane wrażenia użytkowników zwiększają ich zaangażowanie, liczbę konwersji i ROI. W przypadku eBaya te optymalizacje obejmowały zarówno proste, jak i zaawansowane działania.
Aby dowiedzieć się więcej, przeczytaj artykuł Szybkość dzięki tysiącu cięć. Wkrótce opublikujemy też bardziej szczegółowe artykuły inżynierów eBaya na temat wydajności.