Kluczem do sukcesu w optymalizacji było znalezienie korelacji między skutecznością witryny a danymi biznesowymi.
Swappie to odnoszący sukcesy startup, który sprzedaje odnowione telefony. Przez kilka lat priorytetem było dla nich dodawanie nowych funkcji, a nie wydajność witryny. Jednak gdy zauważyli, że wyniki biznesowe w witrynie mobilnej odbiegają od wyników w wersji na komputery, zmienili podejście. Skupili się na optymalizacji skuteczności i wkrótce zauważyli wzrost przychodów z urządzeń mobilnych.
42%
Wzrost przychodów z użytkowników korzystających z urządzeń mobilnych
10pp*
*Wzrost mCVR w ujęciu procentowym
Podkreślenie możliwości
Względny współczynnik konwersji z urządzeń mobilnych (względny mCVR) jest obliczany przez podzielenie współczynnika konwersji z urządzeń mobilnych przez współczynnik konwersji z komputerów. Istnieje wiele możliwości śledzenia danych o szybkości, ale ich powiązanie z danymi biznesowymi może być dość trudne. Ponieważ te same kampanie i sezonowość mają wpływ zarówno na komórki, jak i na komputery, dane względne mCVR eliminują wpływ tych parametrów zewnętrznych i pokazują tylko, czy skuteczność witryny mobilnej się poprawia.
Średnia wartość Rel mCVR w przypadku 10 największych witryn e-commerce w Stanach Zjednoczonych wynosi 50%, ale w przypadku Swappie wynosiła ona 24%. Wskazywało to na problemy z witryną mobilną i utratę przychodów, co doprowadziło do rozpoczęcia projektu poprawy wydajności.
Pomiar wpływu ulepszeń skuteczności
Swappie korzystając z Google Analytics, skonfigurowała codzienne śledzenie Rel mCvR i średniego czasu wczytywania strony na urządzeniach mobilnych za pomocą tego szablonu arkusza kalkulacyjnego. (przeczytaj instrukcje dotyczące korzystania z arkusza kalkulacyjnego). Zaczęli też śledzić wskaźniki Core Web Vitals za pomocą Google Analytics i BigQuery. Gdy śledzenie zostało już skonfigurowane, deweloperzy zaczęli pracować nad wydajnością witryny.
Po zaledwie 3 miesięcy pracy efekty były widoczne: względny współczynnik konwersji z urządzeń mobilnych wzrósł z 24% do 34%, a przychody z urządzeń mobilnych zwiększyły się o 42%.
23%
Skrócenie średniego czasu wczytywania strony
55%
Niższy LCP
91%
Niższy CLS
90%
Niższe opóźnienie pierwszej reakcji
Optymalizacje
Optymalizacja pod kątem LCP i CLS
Zespół programistów Swappie stwierdził, że istnieje wiele możliwości ulepszenia drobnych elementów, które przez długi czas były pomijane. Analiza witryny na różnych ekranach i w różnych językach wykazała problemy z LCP i CLS, które były łatwe do rozwiązania i miały duży wpływ na ogólną wydajność. Na przykład renderowanie elementu LCP na serwerze zamiast na kliencie, gdy jest to możliwe, może zmniejszyć wartość LCP.
Wykrywanie zmian układu było trudne, ponieważ mogły się one znacznie różnić w zależności od widoku i połączenia. Po wprowadzeniu podstawowych wskaźników internetowych do analityki użytkownicy wiedzieli, że idą w dobrą stronę, ponieważ wskaźnik CLS się zmniejszył.
Obrazy
Obrazy zostały zoptymalizowane dzięki wstępnemu wczytywaniu, leniwiemu wczytywaniu i odpowiednim rozmiarom. Przedwczytują one najważniejsze obrazy (np. LCP), a obrazy poza widocznym obszarem wczytują tylko wtedy, gdy jest to konieczne.
Czcionki
Swappie zoptymalizował czcionki, zmieniając dostawców. To miało duży wpływ na ich działalność, ponieważ potrzebowali optymalnego sposobu obsługi czcionek wymaganych w różnych językach.
Skrypty firm zewnętrznych
Swappie dołożyło wszelkich starań, aby sprawdzić każdy skrypt i element zewnętrzny, a także miejsce ich użycia i ich funkcje. Po rozmowach ze wszystkimi zainteresowanymi osobami zespół zaplanował ograniczenie wpływu skryptów na witrynę przy jednoczesnym zachowaniu ich funkcjonalności. Usunęli to, co było niepotrzebne, a pozostałe elementy zoptymalizowali, znacznie zmniejszając ilość kodu JavaScript innych firm w witrynie.
Usuwanie nieużywanego kodu i optymalizowanie łączenia
Zoptymalizowanie importowania i usunięcie nieużywanego kodu JS i CSS przyniosły niewielkie poprawy wydajności witryny Swappie, ale z czasem te drobne ulepszenia się sumują. Zoptymalizowali też konfigurację pakietów.
Tworzenie kultury skuteczności w Swappie
Osiągnięty przez Swappie wynik wynika nie tylko ze zmian w kodzie, ale także ze zmian w organizacji i jej priorytetach.
Szef działu inżynierów Teemu Huovinen wyjaśnia:
Aby podkreślić znaczenie szybkości witryny, musisz ją powiązać z danymi biznesowymi. Gdy brakuje czasu i zasobów, wszystko sprowadza się do ustalania priorytetów, co jest zawsze konieczne. Należy skupić się na wartości dla klienta, ale jeśli szybkość witryny traktujesz tylko jako poprawę „wygody” korzystania z niej, łatwo jest skupić się na nowych funkcjach i bezpośrednich ulepszeniach dotyczących konwersji. Powiązanie szybkości witryny z danymi biznesowymi nie zawsze jest łatwe, dlatego obliczenia za pomocą Rel mCvR bardzo nam pomogły.
Teemu Huovinen
Gdy zespół deweloperów miał możliwość skupienia się przez kwartał wyłącznie na szybkości witryny, był bardziej zmotywowany do pogłębiania tej kwestii.
Połączenie naszego wpływu z rozwojem zespołu sprawia, że jest to jeszcze bardziej imponujące. Czterech z siedmiu deweloperów dołączyło do zespołu w miesiącu, w którym zaczęliśmy pracować nad wydajnością. Cały sukces należy do zespołu. To niesamowite, jak udało nam się zebrać informacje na dany temat i wywrzeć tak duży wpływ.
Teemu Huovinen
Teemu zwraca też uwagę na to, jak ważne jest poświęcenie na początku czasu na opracowanie planów opartych na danych, nauczenie się korzystania z karty Wydajność w DevTools oraz skonfigurowanie analityki dotyczącej użytkowników przed wprowadzeniem jakichkolwiek ulepszeń. Wykresy (zwłaszcza te, które idą w właściwym kierunku) są świetnym źródłem opinii i sprawdzają się w przypadku Twojej pracy. Sprawdzanie podstawowych wskaźników internetowych w warunkach rzeczywistych wraz z wynikami Lighthouse (w laboratorium) pomogło im skupić się na optymalizacji tych elementów, które mają największy wpływ na użytkowników.