Masz stronę na WordPressie z builderem, PageSpeed pokazuje ładne kolory dla szybkości ładowania, a mimo to klienci mówią, że po kliknięciu nic się nie dzieje przez ułamek sekundy. Formularz reaguje z opóźnieniem, menu nie od razu się rozwija, przycisk w koszyku wydaje się martwy. To typowy objaw problemów z INP, które wychodzą dopiero przy prawdziwym ruchu, a nie w testach syntetycznych.
Da się to poprawić bez rezygnacji z buildera. Trzeba ograniczyć pracę JavaScript w momencie interakcji, uprościć strukturę i wyciąć to, co blokuje główny wątek przeglądarki. Poniżej konkretne kroki, które na WordPressie i w WooCommerce zwykle dają wyraźnie lepsze odczucie szybkości kliknięcia.
Czym jest INP i dlaczego potrafi zepsuć wrażenia
INP to metryka pokazująca jak szybko strona reaguje na interakcję użytkownika. Mierzy czas od kliknięcia lub dotknięcia do kolejnego odmalowania widoku. Jeśli w tym oknie przeglądarka ma dużo pracy skryptowej, animacje i długie zadania, użytkownik widzi brak reakcji i czuje, że strona jest ociężała.
W praktyce problemem bywa obciążony główny wątek przeglądarki. Dzieje się tak, gdy wiele skryptów ładuje się i uruchamia w tle, a w momencie kliknięcia kolejne zdarzenia ciasno konkurują o czas procesora. Nawet proste otwarcie menu może wtedy czekać, aż skończy się długi blok zadania gdzieś w innym miejscu strony.
Warto pamiętać, że INP opiera się na danych z prawdziwych użytkowników. To dlatego bywa inny niż wynik szybkiego testu laboratorowego. Jeśli masz sporo ruchu mobilnego, reklamy, czat i widżety, średnie INP może pogorszyć się w godzinach szczytu, mimo że testy wyglądają dobrze.
Jak sprawdzić czy to faktycznie INP
Najpierw raport Core Web Vitals w Google Search Console, bo to tam trafiają dane z realnego ruchu. PageSpeed Insights też pokaże część rzeczy, ale kluczowe jest pole oznaczone jako dane z Chrome UX Report. Jeśli tam INP wypada słabo, masz potwierdzenie problemu z prawdziwego świata.
Potem krótka sesja z Chrome DevTools. Nagraj profil w zakładce Performance i kliknij elementy, które reagują wolno. Szukaj długich zadań i wybuchu aktywności skryptów po interakcji. Nie wszystko trzeba rozumieć szczegółowo. Wystarczy zauważyć które skrypty budzą się przy kliknięciu i co generuje największy koszt.
Co w builderach najbardziej opóźnia reakcję
Najczęściej winne są animacje wejścia, zbyt rozbudowane nagłówki z lepkim menu i wieloma efektami, globalne biblioteki ikon, suwaki na hero i popupy uruchamiane od razu po załadowaniu. Każdy z tych elementów dołącza skrypty i nasłuchuje zdarzeń. Kiedy użytkownik klika, przeglądarka musi przetworzyć ten gąszcz obietnic i handlerów zanim coś się odmaluje.
Zobacz więcej darmowej wiedzy na ProjektWordPress.pl
Drugim problemem jest rozrośnięty DOM. Gdy builder produkuje wiele gniazd kontenerów, przy każdej zmianie stanów przeglądarka ma więcej pracy z układem i malowaniem. Dodaj do tego skrypty do liczników, efektów na scroll i galerii, a interakcja z prostym przyciskiem zaczyna przegrywać wyścig o czas procesora.
Szybkie wygrane w ustawieniach bez rozbierania strony
W wtyczce cache włącz opóźnianie skryptów, ale koniecznie wyklucz te, które obsługują menu, wyszukiwarkę i formularze. Chodzi o to, by marketing i analityka wczytały się później, a podstawowe interakcje miały wolną drogę. Do tego odrocz ładowanie ciężkich widżetów do momentu faktycznej potrzeby, na przykład czat uruchamiany po pierwszym kliknięciu w dymek.
W builderze ogranicz animacje, efekty hover i wejścia. Wyłącz globalne zestawy ikon jeśli używasz tylko kilku symboli i zastąp je plikami SVG. Włącz tryb mniejszej produkcji HTML jeśli jest dostępny, uprość nagłówek do jednej warstwy i jednego menu, a w obrazach korzystaj z lazy load z prostymi placeholderami zamiast skomplikowanych skryptów.
WooCommerce i INP jak okiełznać koszyk oraz dodatki
Największym hamulcem bywa mechanizm fragmentów koszyka, który odświeża stan w tle na każdej stronie. Jeśli nie potrzebujesz żywego mini koszyka w nagłówku, wyłącz fragmenty poza koszykiem i zamówieniem. Wiele wtyczek cache ma przełącznik, który opóźnia odświeżanie do czasu realnej interakcji z koszykiem, co istotnie uspokaja główny wątek.
Ostrożnie ze wszystkimi dodatkami tworzącymi interaktywność na listach produktów. Podgląd na hover, szybkie dodawanie do koszyka, rozbudowane filtry i podpowiedzi wyszukiwarki to kolejne skrypty, które schodzą się w jednym momencie. Lepiej włączyć tylko te funkcje, które faktycznie pomagają w zakupie i sprawdzić, czy nie da się ich ładować dopiero po kliknięciu użytkownika.
Galerie zdjęć i warianty często dorzucają ciężkie biblioteki. Upewnij się, że ładujesz tylko jeden skrypt galerii i tylko na stronach produktu. Prosty widok bez zbędnych efektów przewijania i powiększania w zupełności wystarczy, a interakcje z przyciskami kupna i wyborem wariantów zyskają pierwszeństwo.
Kiedy wejść w porządki techniczne i jak ułożyć prace
Jeśli po ustawieniach i ograniczeniu gadżetów nadal widzisz słabe INP, zrób przegląd wtyczek i usuń dublujące się funkcje, zaktualizuj motyw oraz builder, zwiększ wersję PHP, a następnie wróć do nagłówka i strefy above the fold żeby uprościć strukturę i wyciąć skrypty aktywne od startu. Na końcu dopiero rozważ zmianę motywu lub buildera. Ważne jest, by prowadzić prace w krótkich krokach i po każdym kroku sprawdzać raport w Search Console oraz zachowanie kluczowych interakcji na telefonie z przeciętnym łączem.
