Stworzenie panelu wydajności sieci i optymalizacja kodu JavaScript, zasobów i strony głównej pod kątem osiągnięcia sukcesu biznesowego.
Tokopedia to jedna z największych firm handlu elektronicznego w Indonezji. Ponad 2, 7 mln sprzedawców w całym kraju, ponad 18 mln informacji o produktach i ponad 50 mln użytkowników miesięcznie – oznaczało to, że inwestycja w działanie witryny jest niezbędna. Dzięki stworzeniu kultury skoncentrowanej na skuteczności osiągnęła wzrost współczynników klikalności (CTR) o 35% i wzrost liczby konwersji (CVR) o 8%.
35%
Wzrost CTR
8%
wzrost CVR
4s
Poprawa TTI
Podkreślenie możliwości
Zespół ds. internetu rozmawiał z kierownictwem o tym, dlaczego warto inwestować w zwiększanie wydajności witryn w celu poprawy komfortu użytkowników i zaangażowania użytkowników. Przedstawił także wpływ skuteczności za pomocą zaawansowanych wzorców i interfejsów API.
Podejście
JavaScript i optymalizacja zasobów
Częstą przyczyną problemów z wydajnością jest blokowanie renderowania lub długotrwały JavaScript. Nasz zespół podjął kilka działań, aby zminimalizować ten problem:
- Zbudowanie biblioteki kontrolera skryptów w celu selektywnego wczytywania skryptów zewnętrznych w celu optymalizacji pod kątem krytycznej ścieżki renderowania.
- Zastąpienie cięższych bibliotek lżejszymi.
- Wdrożyliśmy podział kodu i zoptymalizowaliśmy treści w części strony widocznej na ekranie.
- Wprowadzono ładowanie adaptacyjne, np. wczytywanie tylko obrazów wysokiej jakości w przypadku urządzeń w szybkich sieciach, a w przypadku powolnych sieci – używanie obrazów niższej jakości.
- Ładowane leniwie obrazy w części strony widocznej po przewinięciu.
- Odroczono ładowanie niekrytycznego kodu JavaScript.
Optymalizacja strony głównej
Zespół skorzystał z platformy Svelte, aby utworzyć wersję uproszczoną strony głównej dla nowych użytkowników i zapewnić jej szybkie działanie. Ta wersja używała również skryptu service worker do buforowania zasobów innych niż Lite w tle.
Określanie budżetu i monitorowanie wydajności
Aby poprawić jakość stron internetowych, zespół stworzył panel monitorowania wydajności, używając Lighthouse i innych narzędzi:
- Umożliwia pomiar jakości sieci, monitorowania infrastruktury, wydajności frontendu i wydajności serwera.
-
Używa kombinacji interfejsów API platformy internetowej (np.
Resource Timing API
i
nagłówek
Server-Timing), interfejsu PageSpeed Insights (PSI) API i Raportu na temat użytkowania Chrome do monitorowania danych pól i modułów. - Analizuje obrazy z Lighthouse, aby zidentyfikować możliwości optymalizacji obrazów.
- Wymusza budżet rozmiaru pakietu podczas ciągłej integracji (CI). Uruchomienie CI nie uda się, jeśli rozmiar pakietu przekracza budżet.
Jesteśmy firmą e-commerce, więc kluczem do naszego sukcesu jest pozyskiwanie użytkowników. Wiemy, jak ważny jest internet, dlatego chętnie inwestujemy we wszystkie narzędzia i funkcje, które zapewnią użytkownikom maksymalną wygodę.
Dendi Sunardi, kierownik ds. inżynierii, Web Platform, Tokopedia
Na stronie Skaluj w internecie znajdziesz więcej historii sukcesu z Indii i Azji Południowo-Wschodniej.