Optymalizacja wydajności stron i aplikacji eBay w celu zwiększenia wygody użytkowników.
Speed było inicjatywą obejmującą całą firmę w 2019 roku. W ramach projektu eBay wiele zespołów pracowało nad tym, aby strona i aplikacje były jak najszybciej dostępne dla użytkowników. Na każde 100 milisekund, które wydłużyły czas wczytywania strony wyszukiwania w serwisie eBay, liczba kliknięć opcji „Dodaj do koszyka” wzrosła o 0,5%.
100ms
Skrócenie czasu wczytywania
0,5%
Wzrost liczby „Dodaj do koszyka”
Dzięki wdrożeniu budżetów wydajności (uzyskanych na podstawie analizy konkurencji obejmującej Raport na temat użytkowania Chrome) i koncentracji na kluczowych danych dotyczących wydajności nastawionych na użytkowników serwis eBay znacząco poprawił szybkość witryny.
...a dane z Raportu na temat użytkowania Chrome podkreślają też te ulepszenia.
Przed nami jeszcze wiele pracy, ale oto wieści, które firma eBay udało się osiągnąć.
Skuteczność stron internetowych
Udoskonalenia wprowadzone w serwisie eBay były możliwe dzięki zmniejszeniu, czyli „zmniejszeniu rozmiaru i czasu cięcia” (pod względem rozmiaru i czasu) różnych elementów, które biorą udział w ścieżce użytkownika. W tym poście poruszamy tematy, które są istotne dla ogółu społeczności programistów stron internetowych, a nie na tematy związane z eBayem.
Ogranicz ładunek we wszystkich zasobach tekstowych
Jednym ze sposobów na przyspieszenie działania witryn jest proste ładowanie mniej kodu. Serwis eBay zmniejszył ilość ładunku tekstowego, usuwając wszystkie używane i niepotrzebne bajty odpowiedzi JavaScript, CSS, HTML i JSON wysyłanych do użytkowników. Wcześniej z każdą nową funkcją eBay zwiększał ładunek odpowiedzi, nie wymazując nieużywanych elementów. Z czasem rosło to i stało się wąskim gardłem wydajności. Zespoły zwykle nie musiały wykonywać czynności związanych z czyszczeniem pamięci, ale zdziwi Cię, ile zaoszczędził serwis eBay.
„Wycięcie” to zmarnowane bajty w ładunku odpowiedzi.
Optymalizacja ścieżki krytycznej dla treści w części strony widocznej na ekranie
Nie każdy piksel na ekranie jest równie ważny. Treść w części strony widocznej na ekranie jest bardziej ważna niż ta, która znajduje się w części strony widocznej po przewinięciu. W aplikacjach na iOS, Androida, komputery i aplikacje internetowe są tego świadome, ale co z usługami? Architektura usług eBay ma warstwę o nazwie Usługi interfejsu, z którą komunikują się frontendy (aplikacje na poziomie platformy i serwery WWW). Ta warstwa została zaprojektowana z myślą o wyświetlaniu lub urządzeniu, a nie na elementach, takich jak przedmiot, użytkownik czy zamówienie. W serwisie eBay wprowadzono wtedy koncepcję ścieżki krytycznej w przypadku usług związanych z wygodą użytkowników. Gdy żądania są wysyłane do takich usług, gromadzą one dane o treści w części strony widocznej na ekranie, wywołując równolegle inne usługi nadrzędne. Gdy dane będą gotowe, są od razu usuwane. Dane z części strony widocznej po przewinięciu są wysyłane w późniejszym fragmencie lub leniwie ładowane. W efekcie użytkownicy szybciej wyświetlają treść w części strony widocznej na ekranie.
„Są tutaj” czas poświęcany przez usługi na wyświetlanie odpowiednich treści.
Optymalizacje obrazu
Obrazy są jednym z największych czynników przyczyniających się do zbędnych stron. Nawet niewielkie optymalizacje sprawdzają się bardzo dobrze. Serwis eBay wprowadził dwie optymalizacje obrazów.
Po pierwsze, na potrzeby wyników wyszukiwania na wszystkich platformach, w tym na iOS i Androidzie, oraz w obsługiwanych przeglądarkach na eBayu używany jest format obrazu WebP. Strona z wynikami wyszukiwania w serwisie eBay zawiera najwięcej obrazów. Wcześniej korzystała ona z WebP, ale nie miała spójnego wzorca.
Po drugie, mimo że obrazy na liście produktów na eBayu są mocno zoptymalizowane (zarówno pod względem rozmiaru, jak i formatu), ten sam rygorystyczność nie ma zastosowania do wyselekcjonowanych obrazów (np. do górnego modułu na stronie głównej). Na eBay jest wiele ręcznie wybranych obrazów, które są przesyłane za pomocą różnych narzędzi. Wcześniej za optymalizacje odpowiadał przesyłający, ale teraz eBay egzekwuje reguły w narzędziach, więc wszystkie przesłane obrazy będą odpowiednio optymalizowane.
„Wycięcie” to zmarnowane bajty obrazów wysłane do użytkowników.
Przewidywane pobieranie zasobów statycznych z wyprzedzeniem
Sesja użytkownika w serwisie eBay to nie tylko jedna strona. To przepływ tekstu. Przykładem może być przejście ze strony głównej do strony wyszukiwania na stronę produktu. Dlaczego więc strony w ramach procesu nie pomagają sobie nawzajem? To właśnie jest pomysł pobierania prognozowanego, w którym jedna strona pobiera z wyprzedzeniem zasoby statyczne wymagane w przypadku następnej prawdopodobnej strony.
W przypadku przewidywanego pobierania z wyprzedzeniem, gdy użytkownik przejdzie do prognozowanej strony, zasoby będą już w pamięci podręcznej przeglądarki. Odbywa się to w przypadku zasobów CSS i JavaScript, których adresy URL można pobrać z wyprzedzeniem. Warto pamiętać, że przydaje się tylko przy pierwszej nawigacji. Przy kolejnych nawigacji zasoby statyczne będą już znajdować się w pamięci podręcznej.
„Wycięcie” to czas sieci dla zasobów statycznych CSS i JavaScript podczas pierwszej nawigacji.
Pobieranie z wyprzedzeniem najpopularniejszych wyników wyszukiwania
Gdy użytkownik przeprowadza wyszukiwanie w serwisie eBay, dane analityczne serwisu eBay sugerują, że z dużym prawdopodobieństwem może on przejść do pozycji znajdującej się wśród 10 najlepszych wyników wyszukiwania. Obecnie eBay pobiera z wyprzedzeniem elementy z wyszukiwarki i gotuje je, gdy użytkownik korzysta z nawigacji. Pobieranie z wyprzedzeniem odbywa się na 2 poziomach.
Pierwszy poziom odbywa się po stronie serwera, gdzie usługa produktów zapisuje w pamięci podręcznej 10 najlepszych produktów w wynikach wyszukiwania. Gdy użytkownik przechodzi do takiego elementu, eBay oszczędza teraz czas potrzebny na przetwarzanie danych po stronie serwera. Pamięć podręczna po stronie serwera jest wykorzystywana przez aplikacje na danej platformie i jest wdrażana na całym świecie.
Drugi z nich odbywa się w pamięci podręcznej przeglądarki, która jest dostępna w Australii. Pobieranie z wyprzedzeniem było zaawansowaną optymalizacją ze względu na dynamiczny charakter elementów. Istotne są też niuanse związane z wyświetleniami strony, pojemnością, elementami aukcji itd. Więcej informacji na ten temat znajdziesz w prezentacji z platformy LinkedIn dotyczącej Performance Engineering Meet. Możesz też śledzić szczegółowy post na ten temat przygotowany przez inżynierów eBaya.
W tym miejscu może to być czas przetwarzania przez serwer lub czas sieci, w zależności od tego, gdzie element jest przechowywany w pamięci podręcznej.
Zainteresowanie pobieraniem obrazów z wyszukiwarki
Gdy na stronie wyników wyszukiwania zapytanie pojawia się na poziomie ogólnym, mają miejsce 2 rzeczy. Pierwszy z nich to odczyt/ranking, w którym zwracane są najtrafniejsze elementy pasujące do zapytania. Drugim krokiem jest dodanie do wycofanych produktów dodatkowych informacji związanych z kontekstem użytkownika, takich jak koszty dostawy. eBay natychmiast wysyła do przeglądarki pierwsze 10 obrazów razem z nagłówkiem, dzięki czemu pobieranie może się rozpocząć, zanim dotrze reszta znaczników. Dzięki temu obrazy będą wyświetlane szybciej. Ta zmiana jest wprowadzana na całym świecie na platformie internetowej.
„Wycięcie” to czas rozpoczęcia pobierania obrazów w wynikach wyszukiwania.
Buforowanie brzegowe danych automatycznych sugestii
Gdy użytkownik wpisze w polu wyszukiwania jakieś litery, pojawi się wyskakujące okienko z sugestiami. Te sugestie nie zmieniają się w przypadku kombinacji liter przez co najmniej jeden dzień. Idealnie nadają się do przechowywania w pamięci podręcznej i wyświetlania ich z sieci CDN (przez maksymalnie 24 godziny), zamiast być kierowanych aż do centrum danych. Szczególnie ważne są rynki międzynarodowe, które korzystają z pamięci podręcznej CDN.
Pojawił się jednak pewien haczyk. W wyskakującym okienku z sugestiami na eBayu pojawiły się elementy personalizacji, których nie można odpowiednio przechowywać w pamięci podręcznej. Na szczęście problem nie dotyczył aplikacji na konkretnej platformie, ponieważ interfejs użytkownika do personalizacji i sugestii mógł być oddzielony od siebie. W przypadku internetu i na rynkach międzynarodowych opóźnienie było ważniejsze niż niewielkie korzyści z personalizacji. Dzięki temu witryna eBay ma teraz automatyczne sugestie wyświetlane z pamięci podręcznej CDN na całym świecie w przypadku aplikacji na poszczególnych platformach i poza Stanami Zjednoczonymi.
„Skrócenie” to opóźnienie sieci i czas przetwarzania przez serwer na potrzeby automatycznych sugestii.
Pamięć podręczna dla nierozpoznanych użytkowników strony głównej
W przypadku platformy internetowej treść strony głównej nierozpoznanych użytkowników jest taka sama w danym regionie. Są to użytkownicy, którzy korzystają z eBaya po raz pierwszy lub rozpoczynają nową sesję, więc nie podlegają personalizacji. Choć kreacje na stronie głównej ciągle się zmieniają, nadal można buforować pliki.
Firma eBay zdecydowała się na krótki okres przechowywać w pamięci podręcznej nierozpoznaną treść użytkownika (HTML) w swojej sieci brzegowej (PoPs). Po raz pierwszy użytkownicy mogą teraz wyświetlać zawartość strony głównej z serwera znajdującego się w pobliżu, a nie z odległego centrum danych. Serwis eBay stale eksperymentuje z nowymi możliwościami na rynkach międzynarodowych, gdzie może to przynieść większe korzyści.
„Wycięcie” obejmuje tu również kwestie związane z opóźnieniem sieci i czasem przetwarzania serwera w przypadku nierozpoznanych użytkowników.
Optymalizacja dla innych platform
Ulepszenia analizy aplikacji na iOS/Androida
Aplikacje na iOS/Androida komunikują się z usługami backendu, których format odpowiedzi jest zwykle JSON. Te ładunki JSON mogą być bardzo duże. Zamiast analizować cały plik JSON w celu wyrenderowania czegoś na ekranie serwis eBay wprowadził efektywny algorytm analizy, który optymalizuje zawartość pod kątem treści, które muszą być wyświetlane natychmiast.
Użytkownicy mogą teraz szybciej zobaczyć treści. Dodatkowo w przypadku aplikacji na Androida eBay rozpoczyna inicjowanie kontrolerów widoku wyszukiwania, gdy tylko użytkownik zacznie pisać w polu wyszukiwania (w iOS ta optymalizacja była już wcześniejsza). Wcześniej zdarzało się to dopiero po tym, jak użytkownicy nacisnęli przycisk wyszukiwania. Teraz użytkownicy mogą szybciej dotrzeć do wyników wyszukiwania. „Wycięcie” to czas spędzony przez urządzenia na wyświetlaniu odpowiednich treści.
Skrócenie czasu uruchamiania aplikacji na Androida
Dotyczy to optymalizacji czasu uruchomienia „na zimno” w przypadku aplikacji na Androida. Gdy aplikacja jest uruchamiana „na zimno”, wiele inicjowania ma miejsce zarówno na poziomie systemu operacyjnego, jak i aplikacji. Skrócenie czasu inicjowania na poziomie aplikacji pomaga użytkownikom szybciej wyświetlać ekran główny. Serwis eBay przeprowadził profilowanie i zauważył, że do wyświetlania treści nie wszystkie inicjacje są wymagane, a niektóre można wykonać leniwie.
Co ważniejsze, zespół eBay zaobserwował, że renderowanie na ekranie zostało opóźnione przez blokujące wywołanie usługi analitycznej firmy zewnętrznej. Usunięcie połączenia blokującego i zwiększenie jego asynchronicznej synchronizacji pomogło uruchamiać się „na zimno”. „Skrócenie” to zbędny czas uruchamiania aplikacji na Androida.
Podsumowanie
Wszystkie „cięcia” w serwisie eBay przyczyniły się zbiorczo do rozwoju igły, a był to na przestrzeni pewnego czasu. Nowe wersje były wprowadzane stopniowo przez cały rok, przy czym każda z nich zajmowała dziesiątki milisekund i doszła do punktu, w którym eBay jest teraz:
Wydajność to funkcja i przewaga nad konkurencją. Zoptymalizowane wrażenia użytkowników zwiększają zaangażowanie użytkowników, zwiększają liczbę konwersji i zwrot z inwestycji. W przypadku serwisu eBay optymalizacja miała na celu zarówno minimalne nakłady pracy, jak i zaawansowane rozwiązania.
Na stronie Speed by a accounts (z tysiącami cięć) znajdziesz więcej informacji na ten temat. W najbliższej przyszłości znajdziesz też szczegółowe artykuły inżynierów z eBay na temat ich wydajności.