Optymalizacja interakcji na stronach z informacjami o produkcie, która pozwoliła zmniejszyć maksymalny potencjalny FID w Lighthouse o 90% i poprawić 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. Aplikacja jest dostępna w 18 krajach i jest liderem na rynku w Brazylii, Meksyku i Argentynie (na podstawie liczby unikalnych użytkowników i wyświetleń stron).
Skuteczność witryny od dawna była ważnym tematem dla tej firmy, ale niedawno utworzono zespół, który ma monitorować skuteczność i stosować optymalizacje w różnych częściach witryny.
W tym artykule podsumowaliśmy działania podjęte przez Guille Paz, Pablo Carminatti i Oleh Burkhay z zespołu ds. architektury front-endu w Mercado Libre, aby zoptymalizować jeden z podstawowych wskaźników internetowych: czas opóźnienia przy pierwszym działaniu (FID) i jego odpowiednik w laboratorium, całkowity czas blokowania (TBT).
90%
Zmniejszenie maksymalnego potencjalnego opóźnienia pierwszej reakcji w Lighthouse
9%
Więcej użytkowników, którzy w raporcie CrUX oceniają FID jako „Szybki”
Długie zadania, opóźnienie przy pierwszym działaniu i łączny czas blokowania
Wykonywanie wymagającego kodu JavaScript może prowadzić do długich zadań, czyli takich, które trwają w głównym wątku przeglądarki dłużej niż 50 ms.
FID (opóźnienie przy pierwszym działaniu) mierzy czas, jaki upływa od pierwszej interakcji użytkownika ze stroną (np. kliknięcia linku) do chwili, w której przeglądarka może rozpocząć przetwarzanie obsługi zdarzeń w odpowiedzi na tę interakcję. Witryna, która wykonuje kosztowny kod JavaScriptu, będzie prawdopodobnie zawierać kilka długich zadań, które negatywnie wpłyną na FID.
Aby wygodnie korzystać z witryny, użytkownicy powinni mieć opóźnienie pierwszego wejścia poniżej 100 milisekund:
Chociaż witryna Mercado Libre działała dobrze w większości sekcji, firma dowiedziała się z raportu na temat użytkowania Chrome, że strony z informacjami o produktach mają niską wartość FID. Na podstawie tych informacji zespół postanowił skupić się na zwiększeniu interaktywności stron produktów w witrynie.
Te strony umożliwiają użytkownikom wykonywanie złożonych interakcji, więc celem było zoptymalizowanie interakcji bez wpływu na ważne funkcje.
Pomiar interakcji na stronach ze szczegółami produktów
FID wymaga udziału rzeczywistego użytkownika, dlatego nie można go mierzyć w laboratorium. Dane Total Blocking Time (TBT) można jednak mierzyć w laboratorium, dobrze korelują z danymi FID w warunkach rzeczywistych i pokazują też problemy wpływające na interaktywność.
W tym przykładowym śladzie łączny czas wykonywania zadań w wątku głównym wynosi 560 ms, ale tylko 345 ms jest uważane za łączny czas blokowania (suma części każdego zadania, która przekracza 50 ms):
W laboratorium firma Mercado Libre używała TBT jako wskaźnika zastępczego, aby mierzyć i ulepszać interaktywność stron ze szczegółami produktów w rzeczywistych warunkach.
Oto ogólne podejście:
- Użyj narzędzia WebPageTest, aby określić, które skrypty zajmowały główny wątek na prawdziwym urządzeniu.
- Użyj narzędzia Lighthouse, aby określić wpływ zmian w maksymalnym potencjalnym opóźnieniu przy pierwszym działaniu (maks. pot. FID).
Wizualizowanie długich zadań za pomocą WebPageTest
WebPageTest (WPT) to narzędzie do pomiaru wydajności stron internetowych, które umożliwia przeprowadzanie testów na rzeczywistych urządzeniach w różnych lokalizacjach na całym świecie.
Mercado Libre wykorzystało WPT do odtworzenia wrażeń użytkowników, wybierając typ urządzenia i lokalizację podobne do tych, które mają prawdziwi użytkownicy. W szczególności wybrali telefon Moto 4G i lokalizację Dulles w stanie Wirginia, ponieważ chcieli uzyskać wyniki zbliżone do tych, które uzyskują użytkownicy Mercado Libre w Meksyk. Obserwując widok wątku głównego w WPT, Mercado Libre zauważyło, że kilka kolejnych długich zadań blokowało wątek główny przez 2 sekundy:
Podczas analizowania odpowiedniego kaskady okazało się, że znaczna część tych 2 sekund pochodziła z modułu analitycznego. Główny pakiet aplikacji był duży (950 KB) i potrzebował dużo czasu na przeanalizowanie, skompilowanie i wykonanie.
Korzystanie z narzędzia Lighthouse do określania maksymalnego potencjalnego opóźnienia pierwszej reakcji
Lighthouse nie pozwala na wybór różnych urządzeń i lokalizacji, ale jest bardzo przydatnym narzędziem do diagnozowania witryn i otrzymywania rekomendacji dotyczących wydajności.
Po uruchomieniu Lighthouse na stronach ze szczegółami produktów firma Mercado Libre odkryła, że Maksymalny potencjalny FID był jedyną miarą oznaczoną na czerwono, a jego wartość wynosiła 1710 ms.
Na tej podstawie firma Mercado Libre wyznaczyła sobie cel poprawy maksymalnego możliwego wyniku FID w narzędziu laboratoryjnym, takim jak Lighthouse czy WebPageTest, zakładając, że te ulepszenia wpłyną na ich rzeczywistych użytkowników i będą widoczne w narzędziach do monitorowania rzeczywistych użytkowników, takich jak raport na temat użytkowania Chrome.
Optymalizacja długich zadań
Pierwsza iteracja
Na podstawie śledzenia wątku głównego Mercado Libre wyznaczyło sobie cel polegający na optymalizacji 2 modułów, które wykonywały drogi kod.
Zaczęli optymalizować skuteczność wewnętrznego modułu śledzenia. Ten moduł zawierał zadanie obciążające procesor, które nie było niezbędne do działania modułu, więc można je było bezpiecznie usunąć. W efekcie objętość kodu JavaScript w całej witrynie zmniejszyła się o 2%.
Następnie zaczęli pracować nad zwiększeniem ogólnego rozmiaru pakietu:
Firma Mercado Libre użyła narzędzia webpack-bundle-analyzer do wykrycia możliwości optymalizacji:
- Początkowo wymagały one pełnego modułu Lodash. Zostało ono zastąpione przez require per-method, aby wczytywać tylko podzbiór biblioteki Lodash zamiast całej biblioteki. Używaliśmy go w połączeniu z lodash-webpack-plugin, aby jeszcze bardziej zmniejszyć rozmiar Lodash.
Zastosowano też te optymalizacje Babel:
- Używanie pakietu @babel/plugin-transform-runtime do ponownego używania w kodzie pomocników Babela i znacznego zmniejszenia rozmiaru pakietu.
- Używanie babel-plugin-search-and-replace do zastępowania tokenów podczas kompilacji w celu usunięcia dużego pliku konfiguracyjnego z głównego pakietu.
- Dodanie babel-plugin-transform-react-remove-prop-types, aby zaoszczędzić kilka bajtów dzięki usunięciu typów prop.
W efekcie rozmiar pakietu zmniejszył się o około 16%.
Pomiar wpływu
Zmiany te skróciły czas wykonywania kolejnych długich zadań w przypadku Mercado Libre z 2 sekund do 1 sekundy:
Lighthouse wykazał o 57% mniejsze maksymalne potencjalne opóźnienie przy pierwszym działaniu:
Druga iteracja
Zespół kontynuował analizę długich zadań, aby znaleźć kolejne możliwości ulepszenia.
Na podstawie tych informacji zdecydowaliśmy się wprowadzić następujące zmiany:
- Kontynuuj zmniejszanie rozmiaru głównego pakietu, aby zoptymalizować czas kompilacji i analizowania (np. przez usuwanie podwójnych zależności w różnych modułach).
- Zastosuj dzielenie kodu na poziomie komponentu, aby podzielić kod JavaScript na mniejsze fragmenty i umożliwić inteligentniejsze wczytywanie różnych komponentów.
- Odłóż nawilżanie komponentów, aby umożliwić bardziej efektywne wykorzystanie głównego wątku. Ta technika jest powszechnie nazywana częściowym nawilżaniem.
Pomiar wpływu
Wynikający z tego ślad WebPageTest zawierał jeszcze mniejsze fragmenty wykonywania kodu JS:
Maksymalne potencjalne opóźnienie pierwszej reakcji (FID) w Lighthouse zostało zmniejszone o dodatkowe 60%:
Wizualizacja postępów rzeczywistych użytkowników
Narzędzia do testowania laboratoryjnego, takie jak WebPageTest i Lighthouse, są bardzo przydatne do iteracji rozwiązań podczas procesu tworzenia, ale prawdziwym celem jest poprawa wrażeń użytkowników.
Raport na temat użytkowania Chrome zawiera dane, które dotyczą wygody korzystania i pokazują, jak działają miejsca docelowe w sieci z perspektywy prawdziwych użytkowników Chrome. Dane z raportu możesz uzyskać, wydając zapytania w BigQuery, PageSpeedInsights lub interfejsie API Chrome UX Report.
Panel Crux to prosty sposób na wizualizację postępów w przypadku najważniejszych danych:
Dalsze kroki
Wydajność witryny to proces, który nigdy się nie kończy, a firma Mercado Libre rozumie, jak korzystne dla użytkowników są te optymalizacje. Chociaż w dalszym ciągu wprowadzają różne optymalizacje w witrynie, w tym prefetching na stronach z informacjami o produktach, optymalizację obrazów i inne, stale wprowadzają też ulepszenia na stronach z informacjami o produktach, aby jeszcze bardziej skrócić łączny czas blokowania (TBT) i wskaźnik FID. Te optymalizacje obejmują:
- Iterowanie rozwiązania polegającego na dzieleniu kodu.
- Ulepszenie wykonywania skryptów innych firm.
- Ciągłe ulepszanie grupowania zasobów na poziomie pakietu (webpack).
Mercado Libre ma całościowy wgląd w wydajność, więc podczas optymalizowania interakcji w witrynie firma zaczęła też oceniać możliwości poprawy pozostałych 2 podstawowych wskaźników internetowych: LCP (największe wyrenderowanie treści) i CLS (skumulowane przesunięcie układu).