Zespół ds. stron internetowych w Zalando odkrył, że integracja Lighthouse CI umożliwiła proaktywne podejście do wydajności. Automatyczne kontrole stanu mogą porównywać bieżące potwierdzenie z gałązią główną, aby zapobiegać regresji wydajności.
Zalando to wiodąca platforma internetowa na rynku mody w Europie, która ma ponad 35 milionów aktywnych klientów. W tym poście wyjaśniamy, dlaczego zaczęliśmy używać CI Lighthouse, jak łatwo go wdrożyć i jakie korzyści przyniósł naszemu zespołowi.
W Zalando znamy zależność między wydajnością witryny a przychodami. Wcześniej testowaliśmy, jak sztuczne wydłużanie czasu wczytywania stron katalogu wpływa na współczynniki odrzuceń, współczynniki konwersji i przychody na użytkownika. Wyniki były jednoznaczne. Skrócenie czasu wczytywania strony o 100 milisekund spowodowało wzrost zaangażowania, spadek współczynnika odrzuceń i wzrost przychodów na sesję o 0,7%.
100ms
Skrócenie czasu wczytywania strony
0,7%
Większe przychody na sesję
Wsparcie firmy nie zawsze przekłada się na skuteczność
Mimo że skuteczność jest bardzo ważna w firmie, jeśli nie jest ustawiona jako kryterium dostarczania produktu, może łatwo zostać pominięta. Podczas zmiany wyglądu witryny Zalando w 2020 roku skupiliśmy się na wprowadzeniu nowych funkcji, przy jednoczesnym zachowaniu doskonałych wrażeń użytkowników i odświeżeniu witryny za pomocą niestandardowych czcionek i bardziej żywych kolorów. Jednak gdy odnowiona witryna i aplikacja były gotowe do wydania, dane o wczesnych użytkownikach wykazały, że nowa wersja działała wolniej. Pierwsze wyrenderowanie treści było nawet o 53% wolniejsze, a zmierzony czas do pełnej interaktywności był nawet o 59% dłuższy.
Sieć w Zalando
Witrynę Zalando tworzy zespół główny, który opracowuje framework, oraz ponad 15 zespołów funkcji, które tworzą mikroserwisy frontendu. Podczas obsługi nowej wersji część naszej witryny została przeniesiona do bardziej scentralizowanej architektury.
W poprzedniej architekturze o nazwie Mosaic uwzględniono sposób pomiaru skuteczności strony za pomocą własnych danych. Przed wdrożeniem wśród prawdziwych użytkowników trudno było jednak porównywać dane dotyczące skuteczności, ponieważ brakowało nam narzędzi do monitorowania wydajności w laboratorium. Pomimo codziennego wdrażania aktualizacji, dla deweloperów zajmujących się ulepszaniem wydajności czas oczekiwania na informacje zwrotne wynosił około 1 dnia.
Podstawowe wskaźniki internetowe i Latarnia morska na ratunek
Nie byliśmy w pełni zadowoleni z własnych danych, ponieważ nie pasowały one do naszej nowej konfiguracji. Co ważniejsze, nie były one skoncentrowane na wrażeniach klienta. Przeszliśmy na podstawowe wskaźniki internetowe, ponieważ stanowią one zwięzły, a jednocześnie kompleksowy zestaw danych skoncentrowanych na użytkownikach.
Aby poprawić wydajność przed wydaniem, musieliśmy utworzyć odpowiednie środowisko laboratoryjne. Dzięki temu można było uzyskać powtarzalne pomiary, a także przetestować warunki odpowiadające 90. percentylowi danych z pola. Teraz inżynierowie pracujący nad poprawą wydajności wiedzą, na czym powinni się skupić, aby osiągnąć największy wpływ. Raporty audytu Lighthouse były już używane lokalnie. Naszym pierwszym krokiem było opracowanie usługi opartej na modułach węzła Lighthouse, w której można było testować zmiany w środowisku testowym. Dzięki temu mogliśmy uzyskać niezawodne informacje o wydajności w okresie około godziny, co pozwoliło nam doprowadzić do równowagi wydajność i uratować naszą premierę.
Przesyłanie opinii na temat wydajności do deweloperów w przypadku żądań pull
Nie chcieliśmy na tym poprzestać, ponieważ zależało nam na tym, aby nie tylko reagować na problemy z wydajnością, ale też zapobiegać im. Przejście z modułu węzła Lighthouse na serwer CI Lighthouse (LHCI) nie było zbyt trudne. Wybraliśmy rozwiązanie hostowane samodzielnie, aby umożliwić lepszą integrację z dotychczasowymi usługami firmy. Aplikacja serwera LHCI jest tworzona jako obraz Dockera, który jest następnie wdrażany do klastra Kubernetes wraz z bazą danych PostgreSQL i raportami do GitHuba.
Nasz framework dostarczał już deweloperom pewnych informacji o wydajności. Rozmiary pakietów komponentów były porównywane z wartościami progowymi przy każdym zatwierdzeniu. Teraz możemy raportować dane Lighthouse jako kontrole stanu GitHuba. Jeśli nie spełniają one progów wydajności, powodują niepowodzenie procesu CI. W takim przypadku wyświetla się link do szczegółowych raportów Lighthouse, jak pokazano na poniższych obrazach.
Rozszerzenie zakresu skuteczności
Na początku zastosowaliśmy bardzo pragmatyczne podejście. Obecnie Lighthouse działa tylko na 2 najważniejszych stronach: stronie głównej i stronie ze szczegółami produktu. Na szczęście Lighthouse CI ułatwia rozszerzanie konfiguracji testów. Zespoły zajmujące się funkcjami pracujące nad konkretnymi stronami w naszej witrynie mogą konfigurować wzory adresów URL i oświadczenia. Jesteśmy przekonani, że dzięki temu zwiększymy zasięg naszych usług.
Mamy teraz znacznie większą pewność podczas tworzenia większych wersji, a deweloperzy mogą korzystać z krótszej pętli informacji zwrotnych dotyczących wydajności ich kodu.