Optymalizowanie interaktywności stron ze szczegółami produktów pod kątem zmniejszenia o 90% maksymalnego potencjalnego FID w Lighthouse i poprawy FID w Raporcie na temat użytkowania Chrome o 9%.
Mercado Libre to największy ekosystem e-commerce i płatności w Ameryce Łacińskiej. Jest obecna w 18 krajach oraz jest liderem na rynku w Brazylii, Meksyku i Argentynie (pod względem liczebności unikalnych użytkowników i odsłon strony).
Firma od dawna koncentruje się na wydajności witryny, ale niedawno powołała zespół do monitorowania wydajności i wprowadzania optymalizacji w różnych częściach witryny.
W tym artykule podsumowujemy pracę Guille Paz, Pablo Carminatti i Oleh Burkhay z zespołu ds. architektury frontendu Mercado Libre, która zajmuje się optymalizacją jednego z podstawowych wskaźników internetowych: Opóźnienie przy pierwszym działaniu (FID) i jego laboratoryjnym serwerze proxy, całkowity czas blokowania (TBT).
90%
Zmniejszenie maksymalnego potencjalnego FID w Lighthouse
9%
Więcej użytkowników postrzega FID jako „szybki” w systemie CrUX
Długie zadania, opóźnienie przy pierwszym działaniu i całkowity czas blokowania
Uruchamianie drogiego kodu JavaScript może prowadzić do długich zadań, czyli tych, które są wykonywane w głównym wątku przeglądarki przez ponad 50 ms.
FID (opóźnienie przy pierwszym działaniu) mierzy czas od pierwszej interakcji użytkownika ze stroną (np. przez kliknięcie linku) do momentu, w którym przeglądarka może rozpocząć przetwarzanie modułów obsługi zdarzeń w odpowiedzi na tę interakcję. Witryna, która wykonuje kosztowny kod JavaScript, prawdopodobnie będzie musiała wykonać kilka długich zadań, co negatywnie wpłynie na FID.
Aby zadbać o wygodę użytkowników, witryny powinny mieć opóźnienie przy pierwszym działaniu nie więcej niż 100 milisekund:
Chociaż w większości sekcji witryna Mercado Libre miała dobre wyniki, w raporcie na temat użytkowania Chrome okazało się, że strony z informacjami o produktach mają niską wartość FID. Opierając się na tych informacjach, firma postanowiła skoncentrować swoje wysiłki na poprawie interaktywności stron produktów w witrynie.
Umożliwiają one użytkownikom wykonywanie złożonych interakcji, a celem była optymalizacja interaktywności bez ingerencji w cenne funkcje.
Mierz interaktywność stron ze szczegółami produktów
FID wymaga rzeczywistego użytkownika, więc nie można go zmierzyć w module. Jednak całkowity czas blokowania (TBT) można mierzyć laboratoryjnie, jest on dobrze skorelowany z FID w tej dziedzinie i wykrywa też problemy wpływające na interaktywność.
Na przykład w tym logu czasu, mimo że łączny czas wykonywania zadań w wątku głównym to 560 ms, tylko 345 ms z tego okresu jest uznawane za łączny czas blokowania (sumę części każdego zadania przekraczającej 50 ms):
Firma Mercado Libre wykorzystała TBT jako dane w laboratorium do pomiaru i poprawy interaktywności stron z informacjami o produktach w świecie rzeczywistym.
Oto ich ogólne podejście:
- Użyj narzędzia WebPageTest, aby dokładnie określić, które skrypty pozostawiły zajęty wątek główny na prawdziwym urządzeniu.
- Użyj narzędzia Lighthouse, aby określić wpływ zmian w kolumnie Maks. potencjalne opóźnienie przy pierwszym działaniu (maks. potencjał FID).
Używaj WebPageTest do wizualizacji długich zadań
WebPageTest (WPT) to internetowe narzędzie do mierzenia wydajności, które umożliwia przeprowadzanie testów na rzeczywistych urządzeniach w różnych lokalizacjach na całym świecie.
Firma Mercado Libre wykorzystała WPT, aby odtworzyć wrażenia użytkowników, wybierając typ urządzenia i lokalizację podobne do prawdziwych użytkowników. W szczególności wybrał urządzenie Moto 4G i Dulles w Wirginii, ponieważ chcieli podać w przybliżeniu wrażenia użytkowników Mercado Libre z Meksyku. Obserwując główny widok wątku WPT, Mercado Libre odkrył, że kilka kolejnych długich zadań blokowało główny wątek na 2 sekundy:
Po przeanalizowaniu odpowiedniej kaskady okazało się, że znaczna część tych 2 sekund pochodzi z modułu analityki. Rozmiar głównego pakietu aplikacji był duży (950 KB), a jego przeanalizowanie, skompilowanie i wykonanie zajmowało dużo czasu.
Użyj narzędzia Lighthouse, aby określić maksymalny potencjał FID
Lighthouse nie umożliwia wyboru różnych urządzeń ani lokalizacji, ale to bardzo przydatne narzędzie do diagnozowania witryn i uzyskiwania rekomendacji dotyczących skuteczności.
Podczas uruchamiania narzędzia Lighthouse na stronach ze szczegółami produktów firma Mercado Libre odkryła, że Maksymalna wartość FID była jedyną wartością oznaczoną na czerwono i wynosiła wartość 1710 ms.
Dlatego firma Mercado Libre postawiła sobie za cel poprawę wskaźnika Maks. potencjalny FID w narzędziu laboratoryjnym takim jak Lighthouse i WebPageTest. Założyła, że wprowadzone ulepszenia wpłyną na ich rzeczywistych użytkowników, a tym samym będą pojawiać się w prawdziwych narzędziach do monitorowania użytkowników, takich jak Raport o wrażeniach użytkowników Chrome.
Optymalizuj długie zadania
Pierwsza iteracja
Bazując na śladzie głównego wątku, Mercado Libre wyznaczyła cel: optymalizację 2 modułów, które korzystały z drogiego kodu.
Zaczął optymalizować wydajność wewnętrznego modułu śledzenia. Ten moduł zawierał zadanie obciążające procesor, które nie miało kluczowego znaczenia dla jego poprawnego działania, dlatego można go bezpiecznie usunąć. Doprowadziło to do spadku liczby JavaScriptu o 2% w całej witrynie.
Później zespół zaczął zwiększać ogólny rozmiar pakietu:
Firma Mercado Libre użyła narzędzia webpack-bundle-analyzer, aby wykryć możliwości optymalizacji:
- Początkowo wymagało ono pełnego modułu Lodash. Zastąpiono go żądaniem na metodę, który wymaga ładowania tylko podzbioru biblioteki Lodash zamiast całej biblioteki. Został on użyty w połączeniu z dodatkiem lodash-webpack-plugin, aby jeszcze bardziej zmniejszyć Lodash.
Zastosowano też następujące optymalizacje Babel:
- Użycie tagu @babel/plugin-transform-runtime w celu ponownego wykorzystania pomocników Babel w kodzie i znaczne zmniejszenie rozmiaru pakietu.
- Zastąpienie tokenów podczas kompilacji za pomocą babel-plugin-search-and-replace w celu usunięcia dużego pliku konfiguracji z głównego pakietu.
- Dodając babel-plugin-transform-react-remove-prop-types, by zaoszczędzić więcej bajtów dzięki usunięciu typów prop.
W wyniku tych optymalizacji rozmiar pakietu został zmniejszony o około 16%.
Mierz wpływ
Zmiany spowodowały spadek liczby kolejnych długich zadań w Mercado Libre z 2 sekund do 1 sekundy:
Narzędzie Lighthouse wykazało 57% spadek maksymalnego potencjalnego opóźnienia przy pierwszym działaniu:
Druga iteracja
Zespół kontynuował prace nad długimi zadaniami w poszukiwaniu dalszych ulepszeń.
Na podstawie tych informacji postanowiono wprowadzić następujące zmiany:
- Zmniejsz rozmiar głównego pakietu, aby zoptymalizować czas kompilowania i analizowania (np. usuwając zduplikowane zależności w różnych modułach).
- Zastosuj podział kodu na poziomie komponentów, by podzielić JavaScript na mniejsze fragmenty i ułatwić sobie sprawniejsze wczytywanie różnych komponentów.
- Odłóż nawodnienie komponentu, aby umożliwić lepsze wykorzystanie wątku głównego. Tę metodę określa się często jako częściowe nawodnienie.
Mierz wpływ
Otrzymany ślad WebPageTest pokazuje jeszcze mniejsze fragmenty kodu JS:
a ich maksymalny potencjał FID w Lighthouse skrócił się o dodatkowe 60%:
Wizualizacja postępów
Narzędzia do testów laboratoryjnych, takie jak WebPageTest i Lighthouse, doskonale nadają się do iteracji rozwiązań w trakcie programowania, ale prawdziwym celem jest zwiększenie wygody użytkowników.
Raport na temat użytkowania Chrome zawiera dane o tym, jak użytkownicy Chrome korzystają z popularnych miejsc docelowych w internecie. Dane z raportu można uzyskać, wykonując zapytania w BigQuery, PageSpeedInsights lub CrUX API.
Panel CrUX to prosty sposób na wizualizację postępów w zakresie podstawowych danych:
Dalsze kroki
Skuteczność w internecie nigdy nie jest skończonym zadaniem, a Mercado Libre wie, jakie korzyści przynoszą użytkownikom te optymalizacje. W dalszym ciągu stosują różne optymalizacje w witrynie, w tym pobieranie z wyprzedzeniem na stronach z informacjami o produktach, optymalizowanie zdjęć itp., ale dalej ulepszają strony z informacjami o produktach, aby ograniczyć całkowity czas blokowania (TBT) i jeszcze bardziej przez serwer proxy FID. Te optymalizacje obejmują:
- Przeprowadzam iterację rozwiązania do podziału kodu.
- Usprawnienie wykonywania skryptów zewnętrznych.
- Ciągłe ulepszanie grupowania zasobów na poziomie pakietu (webpack).
Mercado Libre zapewnia całościowy wgląd w skuteczność, więc nadal optymalizuje interaktywność strony, ale zaczął też oceniać możliwości poprawy pozostałych 2 obecnych podstawowych wskaźników internetowych: LCP (największe wyrenderowanie treści) i CLS (skumulowane przesunięcie układu).