Optymalizacja metryk sieci przez audyt w Google Tag Manager: rzeczywistość czy fikcja? 🤔

Po wdrożeniu procesu testowania tagów reklamowych na stronie za pomocą narzędzia analitycznego GTM, zastanowiliśmy się, jakie zasoby nam to kosztuje, jak zmniejszyć wpływ GTM i sformułowaliśmy hipotezę, że poprzez audyt tagów można poprawić metryki sieciowe. Ponadto chcielibyśmy się dowiedzieć:

Etapy eksperymentu i nasze wnioski znajdziesz poniżej. Będziemy wdzięczni za podzielenie się swoimi opiniami, pomysłami lub doświadczeniami w komentarzach. Porozmawiajmy razem!

Eksperyment:
^{Optymalizacja metryk sieci}

Witam wszystkich. Nad eksperymentem pracowali ja – Wiktor, inżynier testowania IT-deweloper, i Piotr, analityk danych. Opowiemy wam, jak próbowaliśmy optymalizować metryki sieci za pomocą audytu w GTM i przedstawimy plan eksperymentu, na wypadek, gdybyście chcieli go przeprowadzić u siebie.

Punkt C - "Eksperyment"

W ciągu ostatniego półtora roku platforma web w Ivi dużo pracowała nad poprawą metryk: przeprowadzono szereg prac optymalizacyjnych i nie przestaliśmy pracować, aby LCP znalazło się w zielonej strefie (optymalny wskaźnik dla zielonej strefy to do 2,5 sekundy) i utrzymało się tam. Zatem wiedząc, jak trudne to jest, nie oczekiwaliśmy znaczącej poprawy metryk. Jednak nawet 200 ms w świecie prędkości i jakości technologii to wieczność.

Narzędzia

Etapy eksperymentu

ETAP 1:

ETAP 2:

ETAP 3:

Metryki

W celu ułatwienia percepcji wszystkie wartości metryk na każdym etapie eksperymentu zostały przeliczone na sekundy. W definicjach określono, w czym odbywa się pomiar metryk do tworzenia wykresów.

Performance

LCP (w sekundach) sprawdzamy w dwóch projekcjach:

Szybkość ładowania skryptu GTM (w sekundach) z kontenerem wypełnionym tagami.

Lighthouse

First meaningful paint (w sekundach). Mierzy czas w sekundach od momentu, gdy użytkownik zainicjuje ładowanie strony, do momentu, gdy na stronie pojawi się główna treść. Im więcej sekund potrzeba na pełne załadowanie, tym gorzej.

Time to interactive (w sekundach). Mierzy czas, który jest potrzebny stronie do pełnej interaktywności. Strona jest uważana za w pełni interaktywną, gdy:

Grafana

Largest Contentful Paint (w sekundach). Mierzy, jak szybko renderowany jest główny content na pierwszym ekranie.

Player Ready. Sztuczna metryka mierząca czas od rozpoczęcia ładowania strony do gotowości odtwarzacza do odtwarzania treści (renderowania kontrolerów).

Więcej o sztucznej metryce Player Ready: obecnie, aby poprawić metrykę LCP na karcie treści w Ivi, renderowany jest nie sam odtwarzacz z kontrolerami, ale plakat. Ze względu na specyfikę działania WV stworzyliśmy syntetyczną metrykę, aby widzieć, kiedy rzeczywiście renderowany i gotowy do działania jest odtwarzacz z kontrolerami.

1. First Input Delay (w sekundach). Metryka mierzy czas reakcji strony.
2. First Contentful Paint (w milisekundach). Ulepszona wersja FMP, wybrana do potwierdzenia wyników z Lighthouse.
3. dom_complete (w milisekundach). Metryka pokazuje czas gotowości DOM do interakcji.
4. dom_content_loaded (w milisekundach). Mierzy czas przetwarzania zdarzeń DOMContentLoaded.
5. dom_interactive (w milisekundach). Mierzy czas zakończenia budowania DOM i możliwość interakcji z nim. To właściwość informująca, kiedy budowanie DOM jest zakończone i możliwa jest interakcja z JavaScriptem.
6. dom_load_time (w milisekundach). Pokazuje czas budowy DOM.

Więcej o każdym etapie

Etap 1: Pomiar metryk sieci z włączonym i wyłączonym GTM

Cel: Uzyskanie danych o wpływie GTM na stronę. Te pomiary będą również punktem wyjścia do dalszych obliczeń wyniku.

📌 Dla przypomnienia: asynchroniczne skrypty mają wagę.

GTM i dataLayer używają asynchronicznych skryptów do ładowania tagów. Asynchroniczne skrypty ładują się równocześnie z treścią strony i nie blokują jej. Jednak ładowanie skryptów wymaga zasobów komputera, co oznacza, że wykonanie plików strony jest spowolnione.

Potwierdzenie tego można zobaczyć w wynikach naszego eksperymentu na tym etapie.

Szczegóły:

Sam kontener GTM powoduje minimalne opóźnienia, czasem wręcz niezauważalne. Okazuje się, że wpływ na metryki strony występuje, gdy coś włożymy do kontenera. To można łatwo śledzić, przeglądającрезультаты z włączonym i wyłączonym Google Tag Manager na stronie.

Rezultaty etapu:

schemat gtm

Etapy 2 i 3: Audyt i usuwanie tagów w GTM

Cel: Oczyszczenie kontenera z "śmieci" i potwierdzenie teorii o możliwości optymalizacji metryk sieci przez audyt kontenera w GTM.

Szczegóły: 91% tagów w kontenerze zostało usuniętych, co mogło wpłynąć na metryki.

Rezultaty etapu:

Raport o istniejących tagach przed i po usunięciu:

⚠️ Podczas eksperymentu napotkaliśmy mit, że wstrzymane tagi są równe usuniętym. Aby go rozwiać i upewnić się, że samo wstrzymanie niepotrzebnych tagów jest niewystarczające, dokonano pomiarów przed (140 aktywnych tagów) i po (44 aktywne tagi) wstrzymaniu nieaktualnych tagów. Wyniki pomiarów wykazały, że szybkość ładowania kontenera się nie zmieniła, co oznacza, że status tagu nie wpływa na sam kontener i procesy obliczeniowe związane z tworzeniem zmiennych.

Około 363 tagów w statusie "wstrzymane" było nieaktualnych. Z 140 aktywnych tagów 96 było nieaktualnych, co oznacza, że ponad 90% kontenera było wypełnione tagami, które zajmowały miejsce i spowalniały kontener. To prowadziło do wydłużenia czasu ładowania skryptu na stronie i spowolnienia plików sieciowych.

Wpływ tagów na stronę pozwala śledzić zmniejszenie niektórych wartości metryk przed i po usunięciu nieaktualnych tagów:

Wnioski

Wnioskując z doświadczenia z pomiarów metryk za pomocą narzędzia Lighthouse, warto pamiętać,że metryki zebrane tutaj wymagają potwierdzenia za pomocą bardziej stabilnych narzędzi. Lighthouse jest niewątpliwie wygodnym i świetnym narzędziem, ale niestety jest bardzo zależne od Twojej sieci i komputera. Dlatego, jeśli zamierzasz powtórzyć nasz eksperyment, pamiętaj o wyrażeniu "ufaj, ale sprawdzaj". W przeciwnym razie zalecamy przeprowadzenie pomiarów 10-15 razy dla większej dokładności.

Podsumowanie

Podsumowując, poszukiwanie alternatywnych metod poprawy metryk to interesujące i pracochłonne zadanie. W świetle pierwszego punktu w sekcji "Wnioski" podjęto decyzję o zwiększeniu częstotliwości przeprowadzania czyszczeń w GTM, aby utrzymać osiągnięte wartości metryk. Chociaż nie przyniosło to spektakularnych wyników, uważamy, że takie doświadczenie warto przekazać innym i oczywiście nie zatrzymywać się na osiągniętym, ale dalej próbować poprawiać metryki innymi sposobami.