Jak zoptymalizować interakcję z następną farbą (INP) w WordPress

Interakcja z Next Paint (INP) to wskaźnik responsywności strony internetowej, mierzący opóźnienie wszystkich interakcji użytkownika na stronie. Optymalizacja wskaźnika INP Twojej witryny odgrywa kluczową rolę w jej szybkości, doświadczeniu użytkownika i SEO.

Ogłoszony w 2022 r. jako wskaźnik eksperymentalny mający na celu rozwiązanie wielu ograniczeń wskaźnika opóźnienia pierwszego wejścia (FID), Google oświadczył, że w marcu 2024 r. wskaźnik INP zastąpi FID jako wskaźnik Core Web Vital.

W tym poście omówimy podstawy INP, dlaczego zastępuje on FID oraz w jaki sposób możesz mierzyć i ulepszać wskaźnik INP swojej witryny.

Podekscytowany? Chodźmy!

Znaczenie pomiaru responsywności strony internetowej

Nikt nie lubi powolnej strony internetowej (łącznie z Google!). A nic nie odpycha użytkowników od Twojej witryny szybciej niż powolna witryna.

Metryki takie jak Największa zawartość treściowa (LCP) są doskonałym wskaźnikiem szybkości ładowania strony i dlatego jest to metryka Core Web Vitals.

Ale co się stanie, gdy strona się załaduje, a użytkownik pozostanie w pobliżu? LCP nie mierzy interaktywności strony. Według Google użytkownicy spędzają 90% czasu na stronie po jej załadowaniu. Dlatego pomiar responsywności strony w całym jej cyklu życia – od otwarcia do zamknięcia – ma kluczowe znaczenie.

Witryna internetowa, która ładuje się szybko, ale ma słabą responsywność, jest nadal witryną powolną — w rezultacie użytkownik nie czuje się komfortowo. Na przykład długotrwałe otwieranie menu nawigacji na urządzeniu mobilnym lub aktualizowanie pozycji w koszyku online.

W tym miejscu pojawia się pomiar responsywności strony internetowej. Strony internetowe o dobrej responsywności szybko reagują na interakcje użytkowników. Odpowiedź ta musi mieć formę wizualnej informacji zwrotnej.

Nawet w przypadku złożonych interakcji wymagających dłuższego czasu, zaprezentowanie użytkownikowi wskazówek wizualnych (np. animacji ładowania) jest niezwykle ważne, aby zapewnić doskonałe wrażenia użytkownika.

Interakcja z następną farbą (INP) a opóźnienie pierwszego wejścia (FID): jaka jest różnica?

Pomiar doświadczenia użytkownika strony internetowej jest dość trudny. Możesz używać wskaźników, takich jak całkowity czas blokowania (TBT) i czas do interakcji (TTI), aby zorientować się w czasie responsywności strony, ale nie wskazują one rzeczywistego doświadczenia użytkownika.

Na przykład strona może mieć szybki TBT lub TTI, a mimo to użytkownik będzie odczuwał powolność ze względu na sposób, w jaki z nią wchodzi w interakcję. To samo dotyczy sytuacji odwrotnej.

Wpisz FID — bezpośrednio mierzy pierwszą interakcję użytkownika na stronie internetowej. W szczególności mierzy rzeczywiste doświadczenia użytkownika w terenie.

Ograniczenia opóźnienia pierwszego wejścia (FID).

Jak sama nazwa wskazuje, FID mierzy jedynie „opóźnienie” w odpowiedzi przeglądarki na „pierwsze wejście”.

Krótko mówiąc, jest to metryka responsywności wczytywania strony – szybkość ładowania i wykonywania kodu JavaScript – a nie metryka responsywności w czasie wykonywania – jak szybko strona reaguje na interakcje użytkownika po załadowaniu strony.

Chociaż pierwsze wrażenie ma znaczenie, niekoniecznie daje pełny obraz! FID ulepszył sposób pomiaru responsywności strony internetowej, ale nie mierzy dokładnie sposobu, w jaki użytkownicy wchodzą w interakcję ze stroną internetową — od otwarcia do zamknięcia strony.

Na przykład FID nie mierzy czasu potrzebnego do uruchomienia procedur obsługi zdarzeń w przypadku opóźnień w prezentacji następnej ramki.

Jaka jest interakcja z farbą Next Paint (INP)?

INP mierzy ogólną reakcję strony na interakcje użytkownika – kliknięcia, dotknięcia, naciśnięcia klawiszy itp.

Interakcja może obejmować wiele procedur obsługi grup. Na przykład dotknięcie ekranu dotykowego telefonu może rozpocząć łańcuch zdarzeń w tle strony. Tak czy inaczej, INP to najdłuższe opóźnienie strony od momentu rozpoczęcia interakcji przez użytkownika do momentu, gdy przeglądarka wyświetli następną klatkę z wizualną informacją zwrotną.

W przeciwieństwie do FID, który mierzy jedynie czas potrzebny przeglądarce na reakcję na pierwszą interakcję użytkownika, INP obserwuje wszystkie interakcje użytkownika na stronie i podaje ogólny wynik.

W związku z tym INP wykracza poza pierwsze wrażenia i próbkuje wszystkie interakcje użytkownika, co czyni go bardziej wiarygodnym wskaźnikiem responsywności strony.

Podobnie jak w przypadku FID, niski wynik INP oznacza lepszą reakcję strony na dane wejściowe użytkownika.

Jak oblicza się INP?

W przypadku większości witryn końcowym wskaźnikiem INP jest najdłuższa interakcja. Istnieją jednak pewne wartości odstające.

Na przykład, jeśli Twoja strona internetowa zawiera głównie tekst i obrazy, nie będzie na niej zbyt wielu interakcji z użytkownikami. Jeśli jednak jest to strona dynamiczna z wieloma interaktywnymi elementami (np. edytorami tekstu i grami), będzie na niej występowało wiele interakcji. W takich przypadkach losowe opóźnienie może obniżyć wynik INP strony w witrynie, która w przeciwnym razie byłaby bardzo responsywna. Aby temu zaradzić, INP ignoruje jedną najwyższą interakcję na każde 50 interakcji użytkownika.

Większość stron zawiera znacznie mniej interakcji niż 50, więc nie powinno to stanowić problemu. Ponadto INP bierze pod uwagę tylko 75. percentyl wszystkich odsłon strony, co dodatkowo eliminuje nieoczekiwane wartości odstające.

Ostatecznie ostateczny wynik INP jest odzwierciedleniem tego, czego doświadcza większość użytkowników.

Uwaga: INP nie uwzględnia działań związanych z najeżdżaniem i przewijaniem. Jednakże przewijanie za pomocą klawiatury może wywołać zdarzenia mierzone przez INP. Tak czy inaczej, przewijanie strony nie jest mierzone przez INP. Jeśli użytkownik nie wchodzi w interakcję ze stroną, możliwe jest również, że ładowanie strony nie zwróci żadnego wyniku INP.

Jaki jest dobry wynik INP?

Użytkownicy mogą przeglądać strony internetowe na różnych urządzeniach. A każda strona internetowa może być wyjątkowa. Dlatego trudno określić responsywność witryny jako „dobrą” lub „słabą” na podstawie jednego wskaźnika. Ale właśnie to ma na celu osiągnięcie INP.

Google ma łatwy wykres, dzięki któremu możesz sprawdzić, czy Twoja witryna ma dobry, czy słaby wynik INP:

• Dobra responsywność: wynik INP poniżej 200 milisekund .
• Wymaga poprawy: wynik INP pomiędzy 200 a 500 milisekund .
• Słaba responsywność: wynik INP powyżej 500 milisekund .

Jak wspomniano wcześniej, INP bierze pod uwagę 75. percentyl wszystkich zarejestrowanych wczytań stron, rozłożonych na komputery stacjonarne i urządzenia mobilne.

Jak mierzyć INP

Możesz zmierzyć INP zarówno w terenie (dane od rzeczywistych użytkowników), jak i w laboratorium (dane z narzędzi do testowania prędkości).

Pomiar INP w terenie

Istnieją dwa sposoby pomiaru INP w terenie: raport doświadczenia użytkownika Chrome (CrUX) i monitorowanie rzeczywistego użytkownika (RUM).

Dane CrUX są zbierane od użytkowników przeglądarki Chrome, którzy wyrazili na to zgodę. Jeśli Twoja witryna kwalifikuje się do oceny CrUX, możesz zmierzyć jej INP za pomocą narzędzia Google do testowania szybkości PageSpeed ​​Insights.

Google używa CrUX jako oficjalnego zbioru danych do oceny witryn internetowych pod kątem programu Core Web Vitals. Jeśli jednak Twoja witryna z jakiegoś powodu nie kwalifikuje się do CrUX (głównie bardzo mała liczba odwiedzających), musisz zebrać własne dane terenowe, dodając kod do swojej witryny. Następnie możesz przekazać te dane z pola dostawcy RUM w celu głębszej analizy.

W przypadku większości witryn PageSpeed ​​Insights jest wystarczająco dobrym narzędziem do pomiaru INP i wszystkich powiązanych wskaźników Core Web Vitals.

Jednak CrUX nie dostarcza szczegółowych informacji o swoich wynikach. Jeśli chcesz lepiej zrozumieć i ulepszyć swoje wskaźniki, zaleca się inwestycję w rozwiązanie RUM. Omówienie sposobu korzystania z tych narzędzi wykracza poza zakres tego artykułu. Możesz sprawdzić Datadog i New Relic, dwa popularne bezpłatne rozwiązania RUM.

Uwaga: Podczas pomiaru INP możesz zauważyć znaczne różnice między danymi terenowymi i laboratoryjnymi. Idealnie byłoby zebrać dane z terenu, ponieważ dają one miarę tego, czego faktycznie doświadczają użytkownicy. Następnie możesz wykorzystać te dane do dalszej optymalizacji swojego INP. Omówimy to w dalszej części.

Pomiar INP bez danych terenowych

Nie możesz zmierzyć INP w laboratorium, ale jeśli z jakiegoś powodu nie możesz zmierzyć danych terenowych – mając bardzo niewielu odwiedzających witrynę, aby zakwalifikować się do CrUX lub nie masz wystarczających zasobów, aby zainwestować w RUM – nadal możesz poprawić swój potencjalny wynik INP poprzez znajdowanie powolnych interakcji w laboratorium.

Uwaga: Jak wspomniano powyżej, pomiar INP w laboratorium nie jest możliwy. Poniższe sugestie dają jedynie przybliżony obraz rzeczywistego wskaźnika INP. Nie możesz polegać na pomiarach laboratoryjnych, aby przewidzieć wskaźniki terenowe, takie jak INP, ponieważ nie symulują one dokładnego sposobu, w jaki prawdziwi użytkownicy korzystają z Twojej witryny.

Rozszerzenie przeglądarki Chrome Web Vitals to najprostszy sposób testowania opóźnień interakcji użytkownika. Po włączeniu tej opcji przetestuj typowe interakcje w swojej witrynie. Rozszerzenie wyświetli szczegółowe informacje diagnostyczne dla każdej interakcji na konsoli.

Po zainstalowaniu rozszerzenia musisz zidentyfikować typowe przepływy interakcji użytkowników na swojej stronie internetowej i indywidualnie przetestować responsywność tych interakcji. Na przykład przesłanie formularza lub dodanie produktu do koszyka. Aby rozpocząć, postępuj zgodnie ze szczegółowymi instrukcjami web.dev. Nie jest to idealne obejście, ale w przypadku braku danych terenowych jest świetną alternatywą.

Inną opcją jest pomiar całkowitego czasu blokowania witryny (TBT). Całkiem dobrze koreluje z INP i może wskazywać na interakcje, na których możesz się skupić. Dwa świetne narzędzia do pomiaru TBT Twojej strony to Lighthouse i PageSpeed ​​Insights.

Należy jednak pamiętać, że TBT nie mierzy powolnych interakcji po załadowaniu strony.

Jak zoptymalizować interakcję z następną farbą (INP)

Pierwszym krokiem do poprawy INP Twojej witryny jest identyfikacja jej najwolniejszych interakcji. We wcześniejszej sekcji omówiono sposób zbierania danych terenowych w celu diagnozowania najwolniejszych interakcji w witrynie.

Gdy już to ustalisz, możesz przeanalizować te powolne interakcje w laboratorium i znaleźć odpowiednie rozwiązanie.

Każda interakcja użytkownika składa się z trzech faz. Możesz przyjrzeć się tym fazom indywidualnie, aby dowiedzieć się, jak zoptymalizować ogólne opóźnienie interakcji.

1. Opóźnienie wejścia: rozpoczyna się, gdy użytkownik inicjuje interakcję, a kończy, gdy zaczyna działać wywołanie zwrotne zdarzenia interakcji.
2. Czas przetwarzania: Czas potrzebny na zakończenie wywołań zwrotnych zdarzeń.
3. Opóźnienie prezentacji: Czas potrzebny przeglądarce na aktualizację następnej klatki za pomocą wizualnej informacji zwrotnej.

Każda faza interakcji użytkownika ma wpływ na końcowe opóźnienie interakcji, a tym samym na wynik INP. Wiedza o tym, jak zoptymalizować każdą fazę, jest kluczem do przyspieszenia reakcji.

Optymalizacja opóźnienia wejściowego

Opóźnienie wejścia jest pierwszą częścią każdej interakcji użytkownika. Każdy, kto gra w gry wideo, wie, jak frustrujące jest opóźnienie sygnału wejściowego. To samo dotyczy interakcji na stronie internetowej.

W zależności od interakcji opóźnienia wejściowe mogą sięgać od kilku milisekund do setek milisekund. Może to wynikać z wielu przyczyn: zajętości głównego wątku, błędów, nakładających się interakcji itp.

Bez względu na przyczynę, należy ograniczyć opóźnienie wejściowe do minimum, aby wywołanie zwrotne zdarzenia mogło zostać uruchomione tak szybko, jak to możliwe. Oto trzy sposoby zmniejszenia opóźnienia wejścia:

• Zmniejsz liczbę zasobów wymaganych przez stronę, aby stała się w pełni funkcjonalna.
• Unikaj ładowania dużych skryptów, ponieważ będą one wymagały oceny skryptu obciążającego zasoby przez przeglądarkę, blokując główny wątek. Rozważ podzielenie skryptów na wiele części i rozłożenie ich.
• Umieść w swoim kodzie jak najmniej JavaScriptu.

Skrócenie czasu przetwarzania wywołania zwrotnego zdarzenia

Następna część optymalizacji wyniku INP polega na skróceniu czasu potrzebnego na przetworzenie wywołań zwrotnych zdarzeń interakcji.

Oprócz optymalizacji kodu wywołania zwrotnego zdarzenia możesz podjąć pewne działania, aby skrócić czas przetwarzania:

• Nie blokuj głównego wątku. Podziel długie zadania (> 50 ms) na mniejsze zadania.
• Jeśli osadzasz coś na swojej stronie, unikaj ładowania ich, gdy nie są używane. Na przykład nieefektywne jest ładowanie filmów z YouTube, jeśli użytkownik nie ma zamiaru ich odtwarzać.

Tutaj WP Rocket, jedna z najlepszych wtyczek wydajnościowych WordPress, może ogromnie pomóc. Możesz włączyć funkcję Zamień iframe YouTube na obraz podglądu, aby zastąpić dowolną ramkę iframe YouTube obrazem miniatury.

Tag iframe załaduje i odtworzy wideo dopiero po kliknięciu przez użytkownika miniatury. Zaawansowane funkcje WP Rocket mogą wydłużyć czas ładowania i poprawić podstawowe wskaźniki internetowe.

• Unikaj w swoim kodzie skryptów innych firm. W przypadku skryptów innych firm, z których korzystasz, narzędzia takie jak Google Tag Manager lub Cloudflare Zaraz mogą pomóc Ci usprawnić ładowanie tych skryptów.
• Odłóż niepotrzebne zadania, aby wykonać je później asynchronicznie. Możesz to włączyć za pomocą wbudowanej funkcji odroczenia ładowania JavaScript w WP Rocket.

Główny wątek strony internetowej może przetwarzać w przeglądarce tylko jedno zadanie na raz. Zadania mogą obejmować takie czynności, jak analizowanie kodu HTML/CSS, renderowanie strony i uruchamianie kodu JS. Gdy zadanie działa przez długi czas (powiedzmy 50 milisekund lub dłużej), wstrzymuje wszystkie inne zadania, w tym interakcje użytkownika

W niektórych przypadkach może się okazać, że motyw lub wtyczka spowalniają główny wątek. Ponieważ nie masz dużej kontroli nad jego kodem, możesz skontaktować się z autorami motywu lub wtyczki, aby znaleźć odpowiednią poprawkę.

Dzieląc długie zadania na mniejsze części, uwalniasz główny wątek, aby zająć się zadaniami o wysokim priorytecie, które obejmują interakcje z użytkownikiem. Rezultatem jest szybka strona internetowa!

Minimalizowanie opóźnień prezentacji

Ostatnią częścią interakcji użytkownika jest opóźnienie prezentacji. To czas pomiędzy zakończeniem wywołań zwrotnych zdarzeń a zamalowaniem kolejnej klatki za pomocą wizualnej informacji zwrotnej.

Zazwyczaj opóźnienie prezentacji zajmuje najmniej czasu na interakcję użytkownika. Można go jednak powstrzymać na kilka sposobów. Oto kilka sposobów, aby ograniczyć je do minimum:

• Ogranicz rozmiar DOM do minimum. Zadania renderowania strony skalują się w górę lub w dół w zależności od rozmiaru DOM. Aktualizacja dużego DOM dla każdej interakcji użytkownika może być bardzo kosztowna dla przeglądarki. Co więcej, duży DOM wymaga więcej czasu na wyrenderowanie pierwszego stanu strony. Więcej szczegółów znajdziesz w naszym podręcznym przewodniku po rozmiarach DOM.
• Leniwie renderuj elementy poza ekranem. Jeśli duża część zawartości strony nie jest widoczna dla użytkownika podczas ładowania strony, leniwe renderowanie elementów poza ekranem może umożliwić szybszą interakcję z treścią na ekranie. Aby łatwo to osiągnąć, możesz użyć właściwości CSS content-visibility bez dodawania dodatkowego kodu lub wtyczek.
• Unikaj renderowania HTML przy użyciu JavaScript. Przeglądarki optymalnie analizują i renderują kod HTML, aby zapewnić użytkownikom najlepszą możliwą wygodę. Używanie JS do renderowania części HTML jest w porządku i stanowi integralną część większości interakcji użytkownika. Jednak renderowanie dużych fragmentów kodu HTML za pomocą JS znacząco wpłynie na wydajność renderowania Twojej witryny, w tym na opóźnienia prezentacji w interakcjach użytkownika.

Zwiększanie wyniku INP swojej witryny za pomocą WP Rocket

WP Rocket zawiera wiele opcji zapewniających natychmiastową poprawę wydajności Twojej witryny. Od automatycznego włączania buforowania stron i wstępnego ładowania pamięci podręcznej po kompresję GZIP i optymalizację handlu elektronicznego — stosuje 80% najlepszych praktyk dotyczących wydajności sieci, aby Twoja witryna działała niesamowicie szybko od razu po aktywacji!

Oprócz stosowania większości najlepszych praktyk dotyczących wydajności sieci po aktywacji, WP Rocket oferuje zaawansowane funkcje, takie jak leniwe ładowanie, usuwanie nieużywanego CSS i optymalizacja JavaScript.

Co najważniejsze, możesz użyć wbudowanej funkcji WP Rocket, aby opóźnić wykonanie skryptów JS do czasu interakcji użytkownika. Skraca to początkowy czas ładowania strony i poprawia interaktywność. Ma to również wpływ na podstawowe wskaźniki internetowe, takie jak największa zawartość treściowa (LCP), opóźnienie pierwszego wejścia (FID) i nadchodząca interakcja z następną farbą (INP).

Podsumowanie

Ponieważ w marcu 2024 r. INP zastąpi FID jako wskaźnik Core Web Vital, sposób, w jaki Twoja witryna radzi sobie z interakcjami użytkowników, może mieć znaczący wpływ na jej SEO.

Jeśli masz wysoce interaktywną witrynę internetową, optymalizacja INP witryny może wydawać się niekończącym się procesem. Zawsze jest jeszcze jedna interakcja do optymalizacji. Dodawanie nowych funkcji tylko zwiększa obciążenie. Jednak od czegoś trzeba zacząć. Mamy nadzieję, że ten artykuł postawił Cię na nogi.

Lepszy wynik INP oznacza także lepsze doświadczenie użytkownika, a to jest warte całego czasu i wysiłku!