Tagi a Core Web Vitals: jak skrypty marketingowe spowalniają stronę i jak to naprawić

Jak tagi marketingowe wpływają na Core Web Vitals

Tagi wpływają na wszystkie trzy wskaźniki, ale każdy w inny sposób. Najsilniej odczuwa je INP, bo skrypty marketingowe reagują na te same kliknięcia, które mierzy ten wskaźnik.

INP zastąpił wskaźnik FID w marcu 2024 roku i jest znacznie bardziej wymagający: mierzy nie tylko pierwsze kliknięcie, ale reakcję na interakcje podczas całej wizyty. Przeglądarka wykonuje JavaScript w jednym głównym wątku. Jeśli w chwili kliknięcia „Dodaj do koszyka” trwa długie zadanie – a za długie uznaje się zadania powyżej 50 ms – strona reaguje z opóźnieniem. Tagi uruchamiane właśnie na kliknięcie dokładają swoją pracę w najgorszym możliwym momencie.

GTM a szybkość strony: czy sam kontener spowalnia witrynę

Sam kontener zwykle ma niewielki wpływ, bo ładuje się asynchronicznie i nie blokuje wyświetlania treści. Problem rośnie razem z liczbą i ciężarem tagów, które w nim uruchamiasz.

Każdy tag, reguła i zmienna zwiększa rozmiar pliku kontenera. GTM ma limit rozmiaru i ostrzega w interfejsie, gdy się do niego zbliżasz, ale znacznie wcześniej niż limit odczujesz koszt wykonywania tagów. Do tego dochodzą skrypty, które tagi same pobierają: biblioteki pikseli, widżety czatu, narzędzia do map ciepła. W przypadku tagów Google każda usługa ładowała dotąd dodatkowo skrypt gtag.js. Od 12 października 2026 roku możesz opcjonalnie przełączyć kontener na wysyłanie danych do Google bez tego skryptu – opisujemy to w omówieniu zmian w GTM w 2026 roku.

Osobną kategorią jest platforma zarządzania zgodami. Jej skrypt musi załadować się wcześnie, a baner wyświetlany bez zarezerwowanego miejsca bywa źródłem przesunięć układu. Jak przygotować baner zgodny z przepisami i wygodny dla użytkownika, wyjaśniamy w przewodniku po banerze cookies zgodnym z TCF 2.3.

Jak zmierzyć wpływ tagów na szybkość strony

Pomiar zaczynasz od danych z prawdziwych wizyt, a dopiero potem szukasz winnych w narzędziach laboratoryjnych. Poniższa procedura pozwala przypisać problem konkretnym skryptom.

1. Sprawdź dane terenowe. W PageSpeed Insights zobacz wyniki z prawdziwych wizyt dla strony głównej, karty produktu i koszyka, osobno dla urządzeń mobilnych i komputerów. W Search Console raport podstawowych wskaźników internetowych pokaże grupy adresów z problemami.
2. Przejrzyj diagnostykę kodu zewnętrznego. W raporcie laboratoryjnym PageSpeed Insights znajdziesz listę skryptów firm zewnętrznych z czasem blokowania głównego wątku. To pierwsza lista podejrzanych.
3. Nagraj sesję w DevTools. W panelu Performance nagraj ładowanie strony i kilka kliknięć. Zwróć uwagę na długie zadania i na to, z jakich domen pochodzą skrypty, które je wywołują.
4. Zablokuj podejrzaną domenę. W zakładce Network użyj blokowania żądań dla domeny wybranego dostawcy i powtórz nagranie. Różnica pokaże realny koszt tego skryptu.
5. Przetestuj w obszarze roboczym. Wstrzymaj podejrzany tag w osobnym obszarze roboczym i sprawdź stronę w trybie podglądu, zanim cokolwiek opublikujesz.
6. Zbieraj wskaźniki z prawdziwych wizyt. Wyślij LCP, INP i CLS do GA4 jako zdarzenia, żeby widzieć wpływ każdej publikacji kontenera.

Ostatni krok wymaga biblioteki web-vitals, którą programista dodaje do kodu strony. Poniższy fragment przekazuje wskaźniki do warstwy danych, skąd tag GA4 wyśle je jako zdarzenie.

import { onLCP, onINP, onCLS } from 'web-vitals';

function sendToDataLayer(metric) {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'web_vitals',
    metric_name: metric.name,
    metric_value: metric.value,
    metric_rating: metric.rating,
    metric_id: metric.id
  });
}

onLCP(sendToDataLayer);
onINP(sendToDataLayer);
onCLS(sendToDataLayer);

Dane najwygodniej analizować w eksporcie do BigQuery, gdzie policzysz 75. percentyl dla typów stron i urządzeń – przykłady takich zapytań znajdziesz w zestawie zapytań do danych GA4 w BigQuery. Wynik możesz potem pokazać obok sprzedaży na dashboardzie e-commerce w Looker Studio.

Co zmienić w kontenerze, żeby przyspieszyć stronę

Największe zyski dają zwykle trzy działania: usunięcie martwych tagów, przesunięcie niekrytycznych skryptów na później i ograniczenie pracy wykonywanej przy kliknięciach.

Usuń tagi, których nikt nie używa

W kontenerach prowadzonych przez kilka lat regularnie zostają piksele po zakończonych współpracach, stare narzędzia do testów i zduplikowane tagi analityczne. Każdy taki skrypt kosztuje czas głównego wątku i nic nie daje. Listę kontrolną przeglądu kontenera zawiera audyt tagów przed Black Friday.

Uruchamiaj tagi we właściwym momencie

Na najwcześniejszym etapie, w regule „Inicjowanie zgody” i „Inicjowanie”, powinny działać tylko platforma zgód i tag Google. Tagi analityczne i reklamowe wystarczą na etapie wyświetlenia strony. Czat, mapy ciepła i nagrywanie sesji przenieś na regułę „Okno wczytane” albo uruchamiaj po pierwszej interakcji lub po kilku sekundach od wczytania. Uważaj też na opcję oczekiwania na tagi w regułach kliknięcia w link: wstrzymuje ona przejście na kolejną stronę, domyślnie nawet na 2 sekundy, co użytkownik odczuwa jako zawieszenie.

Zastąp niestandardowy HTML szablonami

Niestandardowe tagi HTML mogą robić wszystko, łącznie z synchronicznym wstawianiem skryptów i manipulowaniem stroną. Szablony niestandardowe działają w ograniczonym środowisku i ładują skrypty asynchronicznie, co ułatwia kontrolę wydajności. Jak je pisać i kiedy warto, opisujemy w artykule o szablonach niestandardowych w GTM.

Oddaj wątek przed pomiarem kliknięcia

Jeśli programista wysyła zdarzenie do warstwy danych w procedurze obsługi kliknięcia, niech najpierw zaktualizuje interfejs, a pomiar przesunie o jedną klatkę. Użytkownik od razu widzi efekt, a tagi wykonują się chwilę później.

button.addEventListener('click', function () {
  updateCartUI(); // najpierw reakcja widoczna dla użytkownika
  setTimeout(function () {
    window.dataLayer.push({ event: 'add_to_cart', ecommerce: getCartPayload() });
  }, 0);
});

Testy A/B, czaty i nagrywanie sesji: najwięksi winowajcy

Narzędzia, które zmieniają wygląd strony albo nasłuchują każdego ruchu użytkownika, obciążają ją bardziej niż zwykłe piksele. Warto przyjrzeć się im w pierwszej kolejności.

Narzędzia do testów A/B działające po stronie przeglądarki często stosują fragment ukrywający stronę do czasu załadowania wariantu, żeby użytkownik nie zobaczył mignięcia oryginału. Dopóki strona jest ukryta, największy element nie może się wyświetlić, więc LCP rośnie o czas ukrycia. Ustaw możliwie krótki limit, ukrywaj tylko testowany fragment zamiast całej strony albo rozważ testy po stronie serwera. Przegląd rozwiązań i ich wpływu na wydajność znajdziesz w zestawieniu narzędzi do testów A/B.

Nagrywanie sesji i mapy ciepła rejestrują ruchy myszy, przewijanie i kliknięcia, co oznacza stałą pracę w tle. Jeśli potrzebujesz ich tylko do konkretnego projektu, uruchamiaj je na wybranych podstronach lub dla części ruchu, a po zakończeniu analizy wyłącz. Czaty z kolei ładują rozbudowane widżety – przycisk możesz pokazywać od razu, a pełny skrypt pobierać dopiero po kliknięciu.

Czy server-side tagging i Google Tag Gateway przyspieszają stronę

Server-side tagging może zmniejszyć ilość kodu w przeglądarce, ale tylko wtedy, gdy faktycznie zastąpisz nim piksele działające po stronie klienta. Google Tag Gateway zmienia przede wszystkim domenę, z której ładują się tagi Google, a nie ich wagę.

W modelu serwerowym przeglądarka wysyła jeden strumień danych do Twojego serwera tagowania, a stamtąd informacje trafiają do kolejnych narzędzi. Jeśli dzięki temu usuniesz ze strony kilka bibliotek pikseli, główny wątek ma mniej pracy. W praktyce część dostawców nadal wymaga skryptu w przeglądarce, np. do ustawiania własnych ciasteczek, dlatego korzyść zależy od konkretnego zestawu tagów. Jak przeprowadzić taką migrację, pokazujemy w poradniku o przenoszeniu GTM na własny serwer.

Każda zmiana w kontenerze, która ma przyspieszyć stronę, niesie ryzyko utraty danych: tag przeniesiony na późniejszy etap może nie zdążyć się uruchomić przed opuszczeniem strony. Po publikacji obserwuj liczbę zdarzeń przez kilka dni – automatyczne powiadomienia o spadkach opisujemy w tekście o monitoringu tagów na produkcji. Pozostałe poradniki o pracy z kontenerem zebraliśmy w podtemacie Google Tag Manager.