Struktura Google Pagespeed, do której jesteśmy przyzwyczajeni od lat, opiera się na zapewnieniu szybkiego ładowania i działania witryn internetowych. Tworząc mierzalne parametry i wykorzystując anonimowe dane zebrane na temat udziału Chrome w rynku, Google wykorzystuje te dane jako wskaźniki SEO. Wraz z wprowadzeniem Interaction to Next Paint (INP) w 2022 r. uwaga przesunęła się z samej szybkości ładowania strony na szerszą perspektywę wydajności sieci. INP nie tylko mierzy szybkość ładowania strony, ale także szybkość przetwarzania interakcji użytkownika na stronie. Zasadniczo zamienia nawigację w witrynie w metrykę Pagespeed.
Na blogu Kerema, sugeruje się, że termin „ogólne opóźnienie interakcji” dobrze pasuje do tej koncepcji, co Google również dobrze wyjaśnia w swoim własnym filmie. Aby jednak w pełni zrozumieć tę metrykę, zagłębimy się w ten temat w kolejnych sekcjach.
Jakie jest wyjaśnienie czasu trwania INP?
Czas trwania INP obejmuje:
- Czas między interakcją użytkownika ze stroną a wykonaniem procedury obsługi zdarzeń.
- Czas wykonania skryptu.
- Czas od wykonania kodu do wyświetlenia wyników użytkownikowi.
Procesy te zwykle zachodzą w ciągu milisekund, ale na urządzeniach mobilnych, zwłaszcza starszych telefonach z Androidem i małą mocą procesora, takie opóźnienia (opóźnienia) często mogą być zauważalne. Warto zaznaczyć, że dane INP, podobnie jak inne dane Lighthouse, są zbierane anonimowo i oceniane na podstawie 75. percentyl. Dlatego celem jest tworzenie aplikacji, które dobrze działają na przeciętnych urządzeniach, a nie tylko na urządzeniach z najwyższej półki.
Rzeczywiste przykłady czasu trwania INP
Oto kilka przykładów z życia wziętych ze stron internetowych, które codziennie odwiedzamy, aby wyjaśnić tę koncepcję:
Wprowadzanie adresu w witrynie handlu elektronicznego
Robiąc zakupy w sklepie internetowym i wpisując adres do wysyłki, w pierwszej kolejności wybierasz województwo. Następnie, gdy klikniesz pole wyboru, aby wybrać dzielnicę, poczekaj chwilę na załadowanie wyniku Ajaxu, a po pewnym czasie zostaną załadowane informacje o dzielnicy. To dobry przykład INP. Poprawa doświadczenia użytkownika w tym przykładzie może obejmować dodanie „wskaźnika ładowania”, aby poinformować użytkownika o procesie Ajax.
Sortowanie wyboru
W przypadku korzystania z filtrów na stronach z listami produktów, jeśli po kliknięciu pola wyboru filtrowane produkty nie będą odpowiednio zarządzane, zwiększy to INP. Używanie mniej złożonego JS i uwzględnienie doświadczenia użytkownika podczas operacji filtrowania może pomóc w utrzymaniu wartości INP na jak najwyższym poziomie.
Galerie zdjęć produktów
Czas oczekiwania użytkowników na załadowanie galerii zdjęć po kliknięciu zdjęcia produktu na stronach ze szczegółami produktu może potencjalnie mieć wpływ na INP.
Przycisk rezerwacji
Opóźnienie interakcji pomiędzy kliknięciem przycisku „Dokonaj rezerwacji” a przejściem na następną stronę jest przykładem INP.
Przycisk Dodaj do koszyka
Milisekundy opóźnienia przy kliknięciu przycisku „Dodaj do koszyka” i zastanawianiu się, czy przedmiot został dodany do koszyka, czy też nie, doskonale definiują INP.
Jak widać w tych przykładach, pułapki INP występują w scenariuszach wpływających zarówno na SEO, jak i współczynniki konwersji bezpośredniej.
Jak poprawić INP?
- Korzystaj z aktualnych bibliotek frontendowych JS: Poprawa wydajności poprzez wykorzystanie nowoczesnych bibliotek frontendowych JS, takich jak Vue, React i Angular, jest korzystna, ponieważ oferują one korzyści w zakresie wydajności i możliwości ponownego użycia.
- Minimalizuj złożoność bibliotek JS: Zalecane jest używanie mniej skomplikowanych bibliotek JS. Osobiście zalecam unikanie jQuery tak bardzo, jak to możliwe.
Akceptowalne poziomy metryczne INP
Wartości progowe dla dobre, średnie i słabe poziomy INP wynoszą 200 milisekund i 500 milisekund. Utrzymanie INP poniżej tych progów ma kluczowe znaczenie dla utrzymania dobrego doświadczenia użytkownika i ogólnej wydajności sieci.
