Widget czatu a szybkość strony: co oznacza dla Ciebie nowa metryka INP

Dodajesz widget czatu na stronę i możesz tym samym zmienić to, jak szybko reaguje ona na kliknięcia i dotknięcia. A od tego tygodnia Google ocenia tę reakcję nową metryką. Dlatego szybkość strony z widgetem czatu trzeba mierzyć. Nie zgadywać. Poniżej: co się zmieniło, na co naprawdę patrzy nowa metryka, dlaczego liczą się skrypty zewnętrzne i które testy właściciel strony może zrobić sam, bez dzwonienia do programisty.

Co zmieniło się w Core Web Vitals 12 marca 2024 roku?

12 marca 2024 roku Interaction to Next Paint zastąpiło First Input Delay jako metryka responsywności w Core Web Vitals. Nikogo to nie zaskoczyło. Jak podaje ogłoszenie tej zmiany na web.dev, zespół Chrome wprowadził INP jako metrykę eksperymentalną w maju 2022 roku, w zeszłym roku nadał jej status oczekującej, a jej awans do statusu stabilnej zapowiedział z wyprzedzeniem. Uzasadnienie? Starsza miara pomijała te aspekty interaktywności, które były ważne dla użytkowników.

Pozostałe metryki Core Web Vitals zostają bez zmian. Wymieniono tylko miarę responsywności, więc wszystko, co już zrobiłeś dla ładowania i stabilności wizualnej, nadal się liczy.

Co mierzy Interaction to Next Paint?

To, jak szybko strona odpowiada na kliknięcia, dotknięcia i klawiaturę - w trakcie całej wizyty, a nie tylko przy pierwszej interakcji. INP obserwuje opóźnienie każdej interakcji, a to opóźnienie składa się z trzech części: opóźnienia wejścia, czasu potrzebnego na wykonanie procedur obsługi zdarzeń (czyli kodu podpiętego pod przycisk lub pole) oraz oczekiwania, aż przeglądarka wyrenderuje następną klatkę. Wynikiem końcowym jest najdłuższa zaobserwowana interakcja, z pominięciem wartości odstających.

First Input Delay było węższe. Dużo węższe. Obejmowało tylko opóźnienie wejścia przy pierwszej interakcji, przez co było metryką pierwszego wrażenia i niczym więcej. Jego następca śledzi stronę przez cały cykl jej życia.

Progi znajdziesz w dokumentacji INP na web.dev: wartość powyżej 200 milisekund i nie większa niż 500 milisekund oznacza, że responsywność strony wymaga poprawy. Ten sam dokument zaznacza, że według danych o korzystaniu z Chrome 90% czasu użytkownika na stronie przypada na okres po jej załadowaniu. To w zasadzie wyjaśnia, dlaczego reakcje po załadowaniu zasługują na osobny pomiar.

Czy widget czatu spowalnia stronę internetową?

Może. Każdy skrypt zewnętrzny konkuruje o główny wątek przeglądarki, a zajęty główny wątek opóźnia odpowiedź na kliknięcie lub dotknięcie. Główny wątek to, mówiąc prosto, jedna kolejka, w której przeglądarka wykonuje większość kodu JavaScript i obsługuje działania użytkownika. Dopóki działa tam kod, strona nie może zareagować. I tyle.

I to właśnie łączy INP ze skryptami zewnętrznymi. Widgety czatu, analityka, menedżery tagów - wszystkie wykonują JavaScript na urządzeniu odwiedzającego, a ich łączna praca decyduje o tym, jak długo czeka dotknięcie. Wynik zależy od całego zestawu skryptów, od samej strony i od sprzętu, który odwiedzający trzyma w ręce. Dlatego wynik jednej witryny niewiele mówi o innej.

Myślisz, że iframe załatwia sprawę? Nie załatwia. Widget otwierany w iframe też się liczy: dokumentacja Google podaje, że metryka obejmuje interakcje wewnątrz ramek iframe, bo są one częścią doświadczenia użytkownika na stronie.

Jak zmierzyć szybkość strony z widgetem czatu przed instalacją i po niej

Zapisz responsywność strony w narzędziach samego Google, zanim dodasz widget. Potem powtórz ten sam test. Gdy masz punkt odniesienia, całe pytanie o skrypt chatbota i Core Web Vitals staje się porównaniem, a nie założeniem.

1. Sprawdź dane terenowe dla najważniejszych stron w PageSpeed Insights i w raporcie Core Web Vitals w Search Console.
2. Zapisz wartości wyjściowe i datę.
3. Dodaj widget.
4. Wykonaj identyczny test na tych samych stronach.
5. Podczas testu laboratoryjnego korzystaj ze strony: otwórz menu, klikaj przyciski, otwórz czat.

Słowo o dwóch rodzajach danych. Dane terenowe pochodzą z prawdziwych wizyt, dane laboratoryjne z jednej, symulowanej. Laboratoryjne INP zależy od tego, jakie interakcje zostaną wykonane, a część narzędzi nie podaje go wcale, bo obserwuje tylko ładowanie. Tam, gdzie wartości brakuje, rozsądnym przybliżeniem może być Total Blocking Time - choć dokumentacja mówi jasno, że to nie jest zamiennik.

Dane terenowe potrzebują też czasu, żeby zebrać się po zmianie. Nie oceniaj więc widgetu pierwszego dnia.

Ładowanie widgetu czatu bez szkody dla szybkości: praktyczne testy

Ładuj skrypt asynchronicznie, zostaw na stronie tylko jedno narzędzie czatu i usuń pozostałe skrypty zewnętrzne, z których już nie korzystasz. To wersja skrócona. Żaden z tych kroków nie wymaga przebudowy witryny, a każdy zmniejsza ilość pracy czekającej w kolejce głównego wątku.

• Ładowanie async lub defer - skrypt nie powinien blokować renderowania strony.
• Jedno narzędzie czatu - kilka widgetów naraz mnoży JavaScript i nic nie wnosi.
• Audyt menedżera tagów - usuń tagi i piksele, które zostały po starych kampaniach.
• Wybiórcze umieszczanie - dodaj widget tylko na tych stronach, na których odwiedzający naprawdę zadają pytania.
• Ponowny test - powtarzaj pomiar po każdym nowym skrypcie.

Widget Botino dodaje się jedną linią skryptu, więc jest tylko jedno miejsce do sprawdzenia i przetestowania. Korzystasz z CMS-a? Instrukcja dodawania chatbota do WordPressa pokazuje, gdzie ta linia powinna trafić. Właściciele sklepów znajdą odpowiednie miejsce w poradniku o dodawaniu chatbota do Shopify.

Dlaczego warto testować na telefonie ze średniej półki?

Bo wolniejszy procesor dłużej wykonuje te same skrypty. Opóźnienia, których nigdy nie zauważysz na biurowym laptopie, wychodzą na telefonie typowego odwiedzającego. Weź więc zwykłe urządzenie z Androidem, przełącz się na dane komórkowe i otwórz stronę. Dotknij menu, wypełnij pole formularza, otwórz czat. Zwróć uwagę na każde opóźnienie między dotknięciem a reakcją.

Potem zrób to jeszcze raz, z otwartym widgetem i wpisaną pierwszą wiadomością. Długie powitanie albo rozbudowany stan początkowy to część tego, z czym odwiedzający wchodzi w interakcję (warto o tym pamiętać, pisząc wiadomość powitalną chatbota). Dane terenowe odzwierciedlają urządzenia, z których korzystają prawdziwi odwiedzający. Dlatego mogą różnić się od testu laboratoryjnego na komputerze.

Moim zdaniem szybkość strony z widgetem czatu najlepiej traktować jako pomiar przed i po, z INP jako liczbą, którą trzeba obserwować. Twoje własne dane, zebrane na Twoich własnych stronach, powiedzą Ci więcej niż jakiekolwiek ogólne twierdzenie.

FAQ