Branża: Elektronika i automatyka
Klient: Transfer Multisort Elektronik Sp. z o.o. (Łódź, Polska)
Strona: www.tme.eu
Wolniejsza strona internetowa nie zawsze oznacza jeden, łatwy do wskazania problem. Czasami opóźnienie pojawia się na początku ładowania, czasami podczas budowania zawartości, a czasami dopiero wtedy, gdy przeglądarka pobiera ostatnie elementy. Jeśli wszystkie te etapy sprowadzimy do jednej liczby, zobaczymy, że strona działa wolniej, ale nie dowiemy się, gdzie należy szukać przyczyny.
Przed takim wyzwaniem stanęło TME.
TME jest jednym z największych globalnych dystrybutorów komponentów elektronicznych, elektrotechnicznych, automatyki przemysłowej i wyposażenia warsztatowego. Firma oferuje ponad 1,5 miliona produktów i obsługuje ponad 300 tysięcy klientów ze 150 krajów. Każdego dnia jej centra logistyczne wysyłają około 7 tysięcy paczek. (TME.eu)
Przy takiej skali sklep internetowy nie jest jedynie katalogiem produktów. To jedno z najważniejszych narzędzi sprzedaży, z którego korzystają klienci działający na różnych rynkach, urządzeniach i połączeniach internetowych.
Dlatego kiedy TME zauważyło dłuższy czas ładowania strony w jednym z regionów, zespół chciał dokładnie sprawdzić, co się dzieje. Standardowe narzędzia wykorzystywane przez deweloperów pomagały analizować techniczne działanie serwisu, ale brakowało szerszego obrazu.
TME potrzebowało danych, które pozwoliłyby nie tylko sprawdzić szybkość strony, lecz także połączyć ją z informacjami o użytkownikach i ich zachowaniach.
TME mierzyło już czas ładowania strony za pomocą jednej niestandardowej metryki. Pokazywała ona ogólny wynik, ale nie pozwalała zobaczyć, co działo się na poszczególnych etapach.
Można to porównać do pomiaru czasu podróży samochodem. Informacja, że przejazd zajął 60 minut, pozwala stwierdzić, że trwał dłużej niż zwykle. Nie pokazuje jednak, czy przyczyną był korek na początku trasy, roboty drogowe w połowie drogi czy problem ze znalezieniem miejsca parkingowego na końcu.
Podobnie działa ładowanie strony internetowej. Przeglądarka wykonuje po kolei wiele czynności: rozpoczyna pobieranie strony, odczytuje jej strukturę, przygotowuje zawartość do wyświetlenia i ładuje pozostałe zasoby. Dopiero obserwacja tych etapów osobno pozwala lepiej zrozumieć, gdzie pojawia się opóźnienie.
Google Analytics 4 nie jest narzędziem przeznaczonym do technicznego monitorowania wydajności serwisu. W standardowej konfiguracji nie zapisuje szczegółowych czasów poszczególnych etapów ładowania. Może jednak przechowywać takie informacje, jeśli zostaną one wcześniej odpowiednio zebrane i przesłane.
To właśnie postanowiliśmy wykorzystać.
Sama implementacja nie była skomplikowana. Najwięcej pracy wymagało ustalenie, które informacje będą naprawdę przydatne zespołowi TME.
Nie chodziło o zbieranie jak największej liczby parametrów. Więcej danych nie zawsze oznacza więcej wiedzy. Źle dobrane wskaźniki mogłyby stworzyć rozbudowany raport, który wygląda profesjonalnie, ale nie pomaga podejmować żadnych decyzji.
Przeanalizowaliśmy więc dostępne dane techniczne i wybraliśmy momenty ładowania strony, które najlepiej opisywały kolejne etapy tego procesu. Wśród nich znalazły się informacje dotyczące przetwarzania DOM, czyli struktury, którą przeglądarka tworzy na podstawie kodu strony, aby wiedzieć, jakie elementy i w jakiej kolejności powinna wyświetlić.
Przeglądarka rejestruje takie czasy automatycznie. Naszym zadaniem było odczytanie właściwych wartości i przekazanie ich dalej w formie zrozumiałej dla narzędzi analitycznych.
Nowe parametry wdrożyliśmy za pomocą Google Tag Managera. Dzięki temu nie było konieczne wprowadzanie zmian bezpośrednio w kodzie sklepu.
Google Tag Manager odczytywał informacje o kolejnych etapach ładowania strony i przesyłał je jako parametry zdarzeń do Google Analytics 4, króre zbierało i przechowywało te dane. Na podstawie tych parametrów TME utworzyło własne metryki w GA4, a następnie zbudowało dashboard w Data Studio (daw. Looker Studio).
Cały przepływ wyglądał następująco:
Google Tag Manager odczytywał i przekazywał dane do GA4 → Google Analytics 4 je zbierał i przechowywał → Data Studio przedstawiał je w czytelnej formie.
Dashboard trafił do zespołu odpowiedzialnego za wydajność serwisu. Zamiast jednego ogólnego wyniku pracownicy TME mogli teraz obserwować, jak zmieniały się czasy poszczególnych etapów ładowania.
Wcześniej zespół widział jedną metrykę opisującą całkowity czas ładowania strony. Po wdrożeniu zaczął gromadzić dane historyczne, podzielone na kolejne etapy procesu.
Pozwoliło to wprowadzać zmiany stopniowo i po każdej z nich sprawdzać, czy w danych pojawiła się poprawa. Zespół mógł ocenić nie tylko to, czy strona zaczęła ładować się szybciej, lecz także na którym etapie ładowania pojawiła się poprawa.
Dane z Google Analytics 4 dawały jeszcze jedną ważną możliwość: segmentację wyników. Czasy ładowania można było analizować w połączeniu z innymi informacjami dostępnymi w GA4, między innymi danymi o regionie oraz zachowaniach użytkowników.
Dzięki temu wydajność strony przestała być pojedynczym wynikiem technicznym. Stała się elementem szerszej analizy doświadczenia klientów korzystających z TME.eu.
W e-commerce wolniejsze działanie serwisu może oznaczać nie tylko gorsze doświadczenie użytkownika, lecz także utracone zamówienia i niższe przychody. Sam pomiar nie rozwiązuje problemu, ale pozwala zespołowi sprawdzić, które działania rzeczywiście przybliżają go do rozwiązania.
Nowy dashboard pozwala TME obserwować zmiany w czasie, porównywać poszczególne etapy ładowania i oceniać rezultaty kolejnych usprawnień.
Klient potwierdził, że zespół regularnie korzysta z przygotowanych danych.
Rezultatem projektu nie był więc jednorazowy raport ani kolejna metryka do obserwowania. Powstał stały proces pomiaru, który pomaga zespołowi odróżnić zmianę przynoszącą poprawę od takiej, która jedynie miała ją przynieść.
Bo w optymalizacji strony nie wystarczy wdrożyć zmianę. Trzeba jeszcze umieć sprawdzić, czy rzeczywiście zadziałała.
Tagi:
Historie sukcesów
Ostatnie wpisy na blogu
