Sklep reaguje z opóźnieniem po kliknięciu? Jak znaleźć winny skrypt (INP w WooCommerce)

Jeśli sklep na WooCommerce reaguje z opóźnieniem na wybór wariantu, dodanie do koszyka czy kliknięcie filtra, winny jest zwykle wynik INP (Interaction to Next Paint), czyli czas od kliknięcia do widocznej reakcji strony. Dobry wynik to 200 ms lub mniej. Najczęściej psują go ciężki JavaScript z page buildera i wtyczek, skrypty marketingowe oraz zbyt rozbudowany kod strony. Winny skrypt da się znaleźć w pięciu krokach, zanim zaczniesz myśleć o przebudowie.

INP w trzech zdaniach

INP jest jednym z trzech wskaźników Core Web Vitals i 12 marca 2024 r. zastąpił FID. W przeciwieństwie do FID liczy nie tylko pierwsze kliknięcie, ale kliknięcia, dotknięcia i naciśnięcia klawiszy przez całą wizytę, i raportuje jedno z najwolniejszych. Ocenę liczy się dla 75. percentyla wizyt (definicja na web.dev).

Wynik INP	Ocena Google	Co czuje klient
do 200 ms	dobry	strona reaguje natychmiast
200-500 ms	wymaga poprawy	wyczuwalne „zawahanie” po kliknięciu
powyżej 500 ms	słaby	klient klika drugi raz, bo myśli, że nic się nie stało

Sklep ma dziesiątki interakcji na każdej ścieżce zakupu, strona firmowa kilka. Według Web Almanac 2025 dobry INP ma 97% stron na komputerach, ale tylko 77% na telefonach, a sklepy z natury wykonują więcej JavaScriptu. Pełne Core Web Vitals na telefonach zaliczało w 2025 r. około 45% stron na WordPressie (rozdział o CMS).

Krok 1: sprawdź dane od prawdziwych klientów

Wpisz adres karty produktu w PageSpeed Insights i patrz na górną sekcję z danymi od użytkowników (Chrome UX Report, ostatnie 28 dni). Przy małym ruchu narzędzie pokaże dane dla całej domeny albo nie pokaże ich wcale. W Google Search Console raport „Podstawowe wskaźniki internetowe” grupuje podobne adresy, więc od razu widać, czy problem mają karty produktów, kategorie czy koszyk.

Nie kieruj się wynikiem 0-100. Pochodzi z testu laboratoryjnego, w którym nikt nic nie klika, więc INP w ogóle w nim nie ma. Najbliżej jest TBT (Total Blocking Time): wysoki TBT to dobry trop, ale sklep z zielonym wynikiem może mieć słaby INP u klientów.

Krok 2: odtwórz kliknięcie na telefonie

Przejdź ścieżkę zakupu na przeciętnym telefonie albo w Chrome na komputerze z włączonym spowolnieniem procesora (narzędzia deweloperskie, panel Performance, ustawienie CPU 4x slowdown). Panel Performance pokazuje INP na żywo dla każdego kliknięcia. Sprawdź po kolei:

• decyzję w banerze cookies,
• otwarcie menu i wyszukiwarki,
• filtr i sortowanie w kategorii,
• wybór wariantu na karcie produktu,
• „Dodaj do koszyka” i otwarcie mini-koszyka,
• zmianę ilości i kod rabatowy w koszyku,
• pola checkoutu i wybór dostawy.

Krok 3: rozłóż najwolniejszą interakcję na części

Każda interakcja ma trzy etapy i każdy ma inne przyczyny. Opóźnienie na wejściu: przeglądarka jest zajęta czymś innym, na przykład skryptem reklamowym, który akurat się załadował. Przetwarzanie: wykonuje się kod podpięty pod kliknięcie, na przykład przeliczenie ceny wariantu, odświeżenie mini-koszyka czy zdarzenie analityki. Wyświetlenie: przeglądarka przerysowuje stronę, a im więcej elementów w kodzie, tym dłużej.

Przykład: klient wybiera kolor sofy, a w tym samym momencie ładują się czat, piksel reklamowy i mapa ciepła. Przeglądarka najpierw kończy ich pracę, dopiero potem zmienia zdjęcie i cenę. Panel Performance pokaże to jako długie opóźnienie na wejściu, a nie jako wolny kod wariantów.

Krok 4: dopasuj przyczynę

Przyczyna	Gdzie ją widać	Co zrobić
Page builder z dziesiątkami dodatków	wszędzie, szczególnie na telefonach	wyłączyć nieużywane moduły, uprościć szablony karty i kategorii
Piksele, mapy ciepła, czat, recenzje	pierwsze kliknięcia po wejściu	przegląd tagów w GTM, czat ładowany po kliknięciu ikony
Ciężki baner cookies	kliknięcie „Akceptuję”	lżejsze narzędzie, mniej tagów odpalanych w chwili zgody
Filtry odświeżane przy każdym znaku	kategorie, wyszukiwarka	zapytanie dopiero, gdy klient przestanie pisać, lżejsza wtyczka filtrów
Setki wariantów na stronie	wybór wariantu	ograniczyć dane wariantów ładowane od razu
Cart fragments na każdej podstronie	dodanie do koszyka, każda strona	sprawdzić, czy motyw nie włącza go na siłę
Brak natychmiastowej reakcji	„Dodaj do koszyka”, płatność	od razu stan przycisku lub wskaźnik ładowania

Warianty. WooCommerce wczytuje dane wszystkich wariantów na stronę produktu, jeśli jest ich 30 lub mniej, a powyżej pobiera je z serwera po wyborze opcji. Część wtyczek do próbek kolorów podnosi ten próg i na stronę trafiają setki wariantów naraz.

Cart fragments. Od wersji 7.8 WooCommerce ładuje skrypt odświeżający koszyk tylko tam, gdzie jest widżet koszyka (WooCommerce Developer Blog). Starsze motywy i niektóre wtyczki włączają go z powrotem wszędzie.

Mini-koszyk. W wersji 10.4 blok mini-koszyka przeszedł na lżejsze Interactivity API (informacja o wydaniu). Korzystają z tego sklepy na motywach blokowych.

Tagi przy kliknięciu. „Dodaj do koszyka” często odpala naraz analitykę, piksele i remarketing, dokładnie wtedy, gdy klient czeka na reakcję przycisku. Przegląd tego, co naprawdę jest potrzebne, zwykle daje szybki efekt bez zmian w samym sklepie.

Krok 5: zmierz efekt

Po wdrożeniu przejdź ścieżkę zakupu jeszcze raz, bo zmiany w skryptach potrafią zepsuć pomiar konwersji albo zgody. Dane od użytkowników obejmują 28 dni, więc pełny efekt w PageSpeed Insights i Search Console zobaczysz po około miesiącu. Przy większym ruchu warto zbierać INP na stałe biblioteką web-vitals od Google, która raportuje też, który element kliknięto.

Łatać czy przebudować

Jeśli problem to kilka ciężkich tagów i wtyczek, poprawki zamykają się w krótkim zakresie prac. Jeśli sklep stoi na page builderze z kilkudziesięcioma dodatkami i starym motywie, łatanie INP staje się walką z całą architekturą. Wtedy lepszy bywa lżejszy motyw razem z przejściem na HPOS i blokowy checkout. INP warto sprawdzać po każdej nowej wtyczce i każdym nowym pikselu, a nie raz w roku. Jeśli chcesz, żebyśmy przeszli ścieżkę zakupu w Twoim sklepie, podaj nam jego adres.