Czym jest wskaźnik INP Google i jak go poprawić w WordPress

Kiedy Google wprowadza nową metrykę, taką jak INP (Interaction to Next Paint), całkowicie normalne jest poczucie przytłoczenia. Możesz martwić się o spadek pozycji swojej witryny WordPress lub być zdezorientowany technicznym żargonem.

Całkowicie rozumiemy frustrację. Nasz zespół spędził niezliczone godziny na testowaniu i naprawianiu problemów z wydajnością na naszym własnym portfolio witryn.

Przetłumaczyliśmy wszystkie mylące terminy na proste, praktyczne kroki, które każdy może wykonać. Nauczysz się dokładnych, sprawdzonych metod, których używamy, aby nasze witryny były szybkie i przyjazne dla Google.

W tym przewodniku pokażemy Ci, czym jest INP i jak możesz poprawić swoje wyniki. Uwzględniliśmy również zaawansowane wskazówki dla programistów, którzy chcą zoptymalizować swój niestandardowy kod.

Oto szybki przegląd tematów, które omówimy w tym przewodniku:

Czym są kluczowe wskaźniki internetowe Google?

Google Core Web Vitals to metryki wydajności witryn internetowych, które Google uważa za ważne dla ogólnego doświadczenia użytkownika. Te wskaźniki internetowe są częścią ogólnego wyniku doświadczenia strony Google, który wpłynie na Twoje rankingi SEO.

Metryki te są przydatne, ponieważ nawet jeśli Twoja strona internetowa WordPress ładuje się szybko, może nie być w pełni funkcjonalna dla użytkowników. Nawet jeśli strona została załadowana, odwiedzający może nie być w stanie zrobić tego, czego chce, ani uzyskać dostępu do potrzebnych informacji.

Core Web Vitals zostały zaprojektowane, aby w tym pomóc. Pozwalają one zmierzyć, jak szybko Twoja witryna ładuje się, staje się widoczna i jest gotowa do użycia przez Twoich odwiedzających.

W przeszłości Google używał trzech testów jakości:

• Largest Contentful Paint (LCP)
• Pierwsze opóźnienie wejściowe (FID)
• Skumulowane przesunięcie układu (CLS)

Więcej o tych testach dowiesz się z naszego obszernego przewodnika na temat optymalizacji Core Web Vitals dla WordPress.

Jednak Google zastąpił FID nowym testem o nazwie INP (Interaction to Next Paint) w marcu 2024 r. Pozostałe dwa testy są nadal używane.

Przyjrzyjmy się, czym jest INP i dlaczego Google przeszedł na niego.

Co to jest Google INP?

INP oznacza „Interaction to Next Paint” (Interakcja do następnego malowania). Jest to nowa metryka Google Core Web Vital, która mierzy interakcje użytkownika powodujące opóźnienia na Twojej stronie internetowej.

Test INP mierzy czas między interakcją użytkownika z Twoją witryną, na przykład kliknięciem czegoś, a wizualną aktualizacją Twojej treści w odpowiedzi. Ta wizualna aktualizacja nazywana jest „następnym malowaniem”.

Na przykład użytkownik może wysłać formularz kontaktowy na Twojej stronie, kliknąć przycisk lub wybrać obraz, który otwiera się w oknie. Test INP zmierzy czas od momentu wykonania tych interakcji przez użytkownika do faktycznego zobaczenia zaktualizowanych treści na Twojej stronie internetowej.

Test Google następnie generuje pojedynczy wynik INP na podstawie czasu trwania większości interakcji użytkownika na Twojej stronie. Wynik będzie „Dobry”, „Wymaga poprawy” lub „Słaby”, w zależności od tego, jak długo Twoja witryna zajmuje aktualizację wizualną.

Dlaczego Google zmienił metrykę FID na INP?

Starszy test FID mierzył, jak szybko Twoja witryna reaguje na pierwsze dane wejściowe użytkownika po załadowaniu strony, takie jak kliknięcie myszą lub naciśnięcie klawisza. Robi to, mierząc czas między pierwszymi danymi wejściowymi od użytkownika a momentem, gdy Twoja witryna zaczyna na nie reagować.

Innymi słowy, mierzył, jak responsywna jest Twoja witryna po jej pierwszym załadowaniu i jakie pierwsze wrażenie wywarła na prawdziwych użytkownikach.

Jednakże, ta metryka nie była tak pomocna, jak mogłaby być. Test FID miał dwie wady:

1. Mierzył tylko pierwszą interakcję użytkownika, a nie wszystkie.
2. Mierzono tylko do momentu rozpoczęcia przetwarzania interakcji przez witrynę, a nie do momentu, gdy użytkownik faktycznie zobaczył wizualną informację zwrotną na ekranie.

Google zmieniło test, aby zapewnić pełniejszy obraz ogólnej responsywności strony internetowej. INP będzie mierzyć cały czas, który użytkownik spędza na stronie, dopóki jej nie opuści.

Jak zmierzyć wynik Google INP w WordPress

Najprostszym sposobem na sprawdzenie wyniku Google Core Web Vitals jest użycie narzędzia PageSpeed Insights. Wystarczy wprowadzić adres URL, który chcesz przetestować, i kliknąć przycisk „Analizuj”.

Narzędzie przeanalizuje stronę internetową przez kilka sekund, a następnie pokaże wyniki testu.

Teraz, oprócz innych Google Core Web Vitals, zobaczysz również wynik Interaction to Next Paint (INP) strony.

Będą różne wyniki dla użytkowników mobilnych i stacjonarnych.

Na powyższym zrzucie ekranu widać wynik INP dla użytkowników komputerów stacjonarnych przeglądających tę stronę internetową na WPBeginner, wynoszący 47 ms. Zielona kropka oznacza, że jest to dobry wynik.

Gdy zobaczysz wynik dla swojej własnej witryny, prawdopodobnie zastanowisz się, jak wypada ona na tle innych witryn i czy wymaga poprawy.

Google udostępnił wytyczne dotyczące interpretacji wyniku INP:

• Szybciej niż 200 milisekund – dobra responsywność
• 200-500 milisekund – wymaga poprawy
• Wolniej niż 500 milisekund – słaba responsywność

Upewnij się, że sprawdzasz swój wynik zarówno dla użytkowników mobilnych, jak i stacjonarnych i dąż do dobrej responsywności.

Następnie możesz poprawić swój wynik INP, postępując zgodnie ze wskazówkami w poniższych sekcjach.

Studium przypadku: Znajdowanie wolnych interakcji na stronach internetowych Awesome Motive

Ale najpierw warto przyjrzeć się studium przypadku. Zaczęliśmy mierzyć wyniki INP na naszych markowych stronach, w tym All in One SEO, MonsterInsights i WPForms.

Kiedy nasz zespół sprawdził wyniki INP naszej strony internetowej, początkowe wyniki pokazały, że nasze najpopularniejsze strony wymagają poprawy.

Korzystając z pulpitu nawigacyjnego Chrome User Experience (CrUX), mogliśmy zobaczyć, że:

• 80% naszych sesji oceniono jako „dobre”
• 12% naszych sesji zostało ocenionych jako „wymaga poprawy”
• 8% naszych sesji zostało ocenionych jako „słabe”

Raport PageSpeed Insights daje nam ogólny wynik INP, ale nie mówi nam, które konkretne przyciski lub pola formularza powodują opóźnienie u rzeczywistych użytkowników. Aby to ustalić, musimy zagłębić się nieco głębiej, korzystając z innych narzędzi, które analizują dane z rzeczywistych sesji odwiedzających.

Oznacza to, że następnie będziemy musieli przeprowadzić własne testy, aby znaleźć wolne interakcje na stronach z niższymi wynikami INP. Jest to szczegółowe i zaawansowane zadanie, które najlepiej wykonać deweloper.

Aby to zrobić, musisz odwiedzić każdą stronę, która wymaga poprawy. Następnie przetestuj każdą interakcję samodzielnie, wykonując rzeczywiste kliknięcia, dotknięcia i naciśnięcia klawiszy. Będziesz mierzyć czas i oceniać je za pomocą narzędzi deweloperskich.

Blog Chrome Developers Blog wymienia szereg narzędzi, które można wykorzystać do testowania, takich jak rozszerzenie Chrome Web Vitals oraz nowy tryb czasowy w panelu Lighthouse w DevTools. Możesz również zapoznać się z artykułem Google na temat debugowania za pomocą rozszerzenia Web Vitals.

Ważne jest, aby zauważyć, że sesje z niższymi ocenami najprawdopodobniej odbyły się na wolniejszych urządzeniach lub połączeniach. Oznacza to, że podczas testowania zaleca się ograniczenie prędkości przeglądarki, w przeciwnym razie możesz nie zauważyć wolnych interakcji.

Możesz to zrobić za pomocą funkcji Chrome Inspect Element, przechodząc do Widok » Deweloper » Inspect Elements. Możesz przełączyć się na kartę „Network” i wybrać opcję ograniczania przepustowości z menu rozwijanego.

Aby dokładniej przetestować INP, powinieneś również ograniczyć moc obliczeniową procesora. Możesz to zrobić, przechodząc do zakładki „Performance” (Wydajność), klikając ikonę zębatki i ustawiając ograniczenie procesora na „4x slowdown” (spowolnienie 4x) lub „6x slowdown” (spowolnienie 6x).

Ważne jest, aby testować na wolniejszym połączeniu, ponieważ wielu Twoich użytkowników może korzystać z urządzeń mobilnych lub mieć niedoskonałe połączenie internetowe. Problem, który jest niewidoczny na Twoim szybkim komputerze biurowym, może być dla nich głównym źródłem frustracji.

Po znalezieniu wyników INP dla swoich stron, możesz skorzystać ze wskazówek z następnej sekcji tego samouczka, aby je poprawić.

Jak poprawić wynik Google INP w WordPressie

Większość pracy nad optymalizacją wyniku INP będzie musiała zostać wykonana przez deweloperów. Obejmuje to autorów motywu i wtyczek, których używasz na swojej stronie, a także deweloperów wszelkich niestandardowych skryptów JavaScript, których używasz.

Dzieje się tak, ponieważ wynik INP jest w większości związany z czasem wymaganym do wykonania interakcji JavaScript na Twojej stronie internetowej.

Na przykład, gdy użytkownik klika przycisk, uruchamiany jest kod JavaScript, który wykonuje funkcję oczekiwaną przez kliknięcie przycisku. Ten kod jest pobierany na komputer użytkownika i uruchamiany w jego przeglądarce internetowej.

Aby zoptymalizować swój wynik INP, należy zredukować opóźnienia występujące podczas interakcji użytkownika z JavaScript. Istnieją trzy składniki tego opóźnienia:

1. Opóźnienie wejścia: Oczekiwanie na zakończenie przez witrynę innych zadań w tle, zanim zrealizuje kliknięcie użytkownika.
2. Czas przetwarzania: Czas potrzebny na faktyczne wykonanie kodu witryny i zrobienie tego, o co prosił użytkownik.
3. Opóźnienie prezentacji: Czas potrzebny przeglądarce na wyświetlenie nowej, zaktualizowanej zawartości na ekranie.

Jako właściciel strony internetowej, możesz podjąć kroki w celu poprawy pierwszego i trzeciego opóźnienia. Pokażemy Ci, jak to zrobić w następnej sekcji.

Jednakże, aby uzyskać rzeczywiste ulepszenia w swoim wyniku INP, będziesz musiał poprawić drugie opóźnienie, którym jest czas przetwarzania samego kodu. Tego nie możesz zrobić sam.

Deweloperzy Twojego motywu WordPress, wtyczek i niestandardowych skryptów JavaScript mogą potrzebować zoptymalizować swój kod, aby natychmiast udzielać informacji zwrotnej użytkownikom. Dobra wiadomość jest taka, że renomowani deweloperzy prawdopodobnie już zoptymalizowali swój kod, odkąd Google wprowadził tę zmianę w marcu 2024 r.

Poniżej w tym artykule przedstawiamy kilka konkretnych wskazówek dla deweloperów wraz z przykładami.

Jak właściciele stron internetowych mogą optymalizować swoje witryny pod kątem INP

Chociaż największy wpływ na wynik INP Twojej witryny będzie miał optymalizacja kodu przez deweloperów, istnieje kilka rzeczy, które właściciele witryn mogą zrobić.

W szczególności możesz zapewnić, że kliknięcia myszą i naciśnięcia klawiszy przez użytkowników są rozpoznawane jak najszybciej, optymalizując procesy w tle na Twojej stronie. Możesz również zapewnić, że odpowiedź na ich dane wejściowe jest wyświetlana na ekranie tak szybko, jak to możliwe.

Chociaż te kroki mogą nie przepisać bezpośrednio kodu powodującego powolną interakcję, poprawiają ogólny stan Twojej witryny. Szybsza, lżejsza witryna daje przeglądarce więcej zasobów do szybkiego obsługiwania interakcji użytkownika, co z pewnością może pomóc w uzyskaniu lepszego wyniku INP.

Oto kilka kroków, które możesz podjąć, aby to osiągnąć.

1. Upewnij się, że używasz najnowszej wersji WordPressa

Pierwszą rzeczą, którą powinieneś zrobić, jest upewnienie się, że używasz najnowszej wersji WordPress.

Dzieje się tak, ponieważ wersje WordPress 6.2 i 6.3 wprowadziły znaczące ulepszenia wydajności. Poprawią one wydajność Twojej witryny po stronie serwera i po stronie klienta, co poprawi Twój wynik INP.

Szczegółowe instrukcje znajdziesz w naszym przewodniku na temat bezpiecznej aktualizacji WordPress.

2. Optymalizacja procesów w tle w WordPressie

Procesy w tle to zaplanowane zadania w WordPressie, które działają w tle. Mogą one obejmować sprawdzanie aktualizacji WordPressa, publikowanie zaplanowanych postów i tworzenie kopii zapasowych Twojej witryny.

Jeśli Twoja witryna jest zbyt obciążona wykonywaniem tych zadań w tle, może nie zarejestrować od razu, że użytkownik kliknął myszą lub nacisnął klawisz, co skutkuje słabym wynikiem INP.

Możesz skonfigurować swoje skrypty w tle i wtyczki, aby zmniejszyć ilość wykonywanej przez nie pracy, co zmniejszy obciążenie Twojej witryny. Alternatywnie, możesz uruchamiać je tylko wtedy, gdy są potrzebne, zamiast pozostawiać je działające w tle.

Szczegółowe instrukcje znajdziesz w sekcji Optymalizacja procesów w tle naszego obszernego przewodnika po tym, jak przyspieszyć i zoptymalizować działanie WordPress.

3. Sprawdź rekomendacje dotyczące wydajności w PageSpeed Insights

Po przeprowadzeniu testu PageSpeed Insights na swojej stronie internetowej, możesz przewinąć w dół do sekcji Wydajność w wynikach testu.

Tutaj znajdziesz kilka możliwości poprawy wydajności swojej witryny wraz z szacowanym oszczędnością czasu, jeśli zastosujesz się do tych rad.

Na przykład, możesz zobaczyć zalecenia dotyczące eliminacji zasobów blokujących renderowanie. Możesz to zrobić, postępując zgodnie z naszym przewodnikiem na temat jak naprawić blokowanie renderowania JavaScript i CSS w WordPress.

Możesz również zobaczyć zalecenie dotyczące redukcji nieużywanego JavaScript. Ustawienie do tego celu znajdziesz w wielu najlepszych wtyczkach do cachowania WordPress, takich jak WP Rocket.

4. Minifikuj JavaScript w WordPress

JavaScript musi zostać pobrany na komputer użytkownika, zanim będzie mógł zostać uruchomiony. Minimalizując rozmiar plików JavaScript, możesz uzyskać niewielkie zyski w wydajności.

Minifikacja JavaScript sprawia, że pliki są mniejsze poprzez usuwanie białych znaków, linii i niepotrzebnych znaków z kodu źródłowego.

Nie będzie to miało drastycznego wpływu na Twoją wydajność, ale jeśli chcesz zredukować kilka dodatkowych milisekund z Twojego wyniku INP, możesz uznać to za wartościowe.

Aby dowiedzieć się, jak to zrobić, zapoznaj się z naszym przewodnikiem na temat jak minifikować pliki CSS i JavaScript w WordPress.

Jak programiści mogą optymalizować swój kod pod kątem INP

Jeśli jesteś programistą, największe zyski w wyniku INP będą pochodzić z optymalizacji kodu. Oto kilka rzeczy, które możesz zrobić.

1. Natychmiastowe wizualne potwierdzenie interakcji użytkownika

Oto jedna rzecz, która przyniesie największą różnicę podczas optymalizacji wyniku INP Twojego kodu: Musisz natychmiast zapewnić wizualne informacje zwrotne na wszystkie dane wejściowe użytkownika.

Użytkownik powinien od razu zobaczyć, że jego dane wejściowe zostały rozpoznane i że na nie reagujesz. Sprawi to, że Twój kod będzie bardziej responsywny dla użytkownika i zapewni świetny wynik INP.

Oto kilka przykładów:

• Jeśli użytkownik kliknie element, powinieneś wyświetlić coś, co pokazuje, że element został kliknięty.
• Jeśli użytkownik prześle formularz, musisz natychmiast wyświetlić coś, co to potwierdzi, na przykład komunikat lub wskaźnik ładowania.
• Jeśli użytkownik kliknie obraz, aby otworzyć go w oknie lightbox, nie czekaj tylko na załadowanie obrazu. Zamiast tego powinieneś natychmiast pokazać obraz demonstracyjny lub spinner. Następnie, gdy obraz zostanie załadowany, możesz wyświetlić go w oknie lightbox.

Przede wszystkim poprawi to Twój wynik INP, zwłaszcza jeśli musisz przetwarzać duże ilości JavaScript w odpowiedzi na dane wejściowe użytkownika.

Po prostu upewnij się, że zaktualizowałeś interfejs użytkownika przed rozpoczęciem zadania.

Następnie możesz zaplanować ciężką pracę do wykonania nieco później, używając funkcji zwrotnej setTimeout. Daje to przeglądarce chwilę na zaktualizowanie ekranu, zanim zajmie się intensywnym zadaniem.

Gdy już to zrobisz, możesz zrobić kilka dodatkowych rzeczy, aby zoptymalizować swój kod.

2. Optymalizuj tam, gdzie przeglądarka spędza najwięcej czasu

Następną rzeczą, którą powinieneś zrobić, jest zbadanie, gdzie przeglądarka spędza najwięcej czasu, a następnie zoptymalizowanie tych części.

W Google Chrome, gdy przejdziesz do Widok » Deweloper » Narzędzia deweloperskie » Wydajność, możliwe jest sprawdzenie funkcji JavaScript i programów obsługi zdarzeń, które blokują następne malowanie.

Mając tę wiedzę, możesz zobaczyć, co można zoptymalizować, aby skrócić czas do następnego malowania po interakcji użytkownika.

3. Zredukuj swoje układy

Czasami duża część aktywności procesora polega na pracy związanej z układem.

Kiedy to się zdarza, powinieneś sprawdzić, czy Twój kod powoduje, że przeglądarka wielokrotnie przelicza układ strony. Jest to często nazywane „layout thrashing” (przeciążeniem układu), a przykład, jak tego uniknąć, podajemy później w tym przewodniku.

4. Najpierw pokaż zawartość powyżej pierwszego zwinięcia

Jeśli renderowanie zawartości strony jest powolne, może to wpłynąć na Twój wynik INP.

Możesz rozważyć wyświetlanie najpierw tylko ważnych treści „powyżej zagięcia”, aby szybciej dostarczyć następną klatkę.

Przykłady dobrych praktyk kodowania JavaScript dla programistów

Może być pomocne pokazanie kilku przykładów, jak zły kod może skutkować niskim wynikiem INP.

Przygotowaliśmy przykładowy projekt na CodePen, z którym możesz poeksperymentować. Możesz przejrzeć nasz przykładowy kod, przeczytać krótkie wyjaśnienia i zobaczyć, jaką różnicę wprowadza, klikając przyciski.

Oto animacja z tego projektu CodePen. Możesz zobaczyć, że niezoptymalizowany przykładowy kod skutkuje słabym wynikiem INP wynoszącym 965 milisekund. Naciśnięcie przycisku będzie odczuwane przez użytkowników jako opóźnione.

W przeciwieństwie do tego, zoptymalizowany kod natychmiast aktualizuje tekst przycisku, co skutkuje najlepszym możliwym wynikiem INP.

Czytaj dalej, aby zobaczyć cztery przykłady, jak możesz ulepszyć swój kod, aby zoptymalizować wynik INP.

Przykład 1: Zaktualizuj ekran przed wykonaniem zadania obciążającego procesor

Ciężkie zadania CPU zajmują czas, a to może prowadzić do słabych wyników INP, chyba że napiszesz dobry kod. W takim przypadku najlepiej jest zaktualizować ekran przed uruchomieniem tego zadania.

Oto zły przykład, w którym interfejs użytkownika jest aktualizowany po ciężkim zadaniu CPU. Powoduje to wysoki INP:

// Bad example
button.addEventListener('click', () => {
  // Heavy CPU task
  for (let i = 0; i < 10000000; i++) {
    console.log(i);
  }
  // UI update
  button.textContent = 'Clicked!';});

W tym ulepszonym przykładzie interfejs użytkownika jest natychmiast aktualizowany po kliknięciu przycisku.

Po tym zadanie intensywnie wykorzystujące procesor jest przenoszone do wywołania zwrotnego setTimeout:

// Better example
button.addEventListener('click', () => {
  // UI update
  button.textContent = 'Processing...';

  // Heavy CPU task
  setTimeout(() => {
    for (let i = 0; i < 10000000; i++)
 {
      console.log(i);
    }
    // Final UI update
    button.textContent = 'Done!';
  }, 0);
});

Pozwala to przeglądarce na zaktualizowanie ekranu przed rozpoczęciem powolnego zadania, co skutkuje dobrym wynikiem INP.

Przykład 2: Zaplanuj przetwarzanie niepilnych zadań

Należy również upewnić się, że nie wykonujesz pilnych lub nieistotnych zadań w skrypcie natychmiast, gdy może to opóźnić odpowiedź, której oczekuje użytkownik.

Powinieneś zacząć od natychmiastowego zaktualizowania strony, aby potwierdzić dane wejściowe użytkownika. Następnie możesz użyć requestIdleCallback do zaplanowania reszty skryptu, gdy będzie wolny czas na końcu ramki lub gdy użytkownik będzie nieaktywny.

Oto przykład:

button.addEventListener('click', () => {
  // Immediate UI update
  button.textContent = 'Processing...';

  // Non-essential processing  window.requestIdleCallback(() => {
    // Perform non-essential processing here...    button.textContent = 'Done!';
  });
});

Sprawi to, że strona internetowa będzie bardziej responsywna dla użytkownika i uzyskasz lepszy wynik INP.

Przykład 3: Zaplanuj funkcję do uruchomienia przed następnym malowaniem

Możesz również użyćrequestAnimationFrame do zaplanowania funkcji do wykonania przed następnym odmalowaniem:

button.addEventListener('click', () => {
  // Immediate UI update
  button.textContent = 'Processing...';

  // Visual update
  window.requestAnimationFrame(() => {
    // Perform visual update here...    button.style.backgroundColor = 'green';    button.textContent = 'Done!';
  });
});

Może to być przydatne w przypadku animacji lub aktualizacji wizualnych w odpowiedzi na interakcje użytkownika.

Ponownie, powinieneś udzielić użytkownikowi informacji zwrotnej, natychmiast potwierdzając jego dane wejściowe.

Przykład 4: Unikaj zrywania układu

Przerywanie układu (layout thrashing) występuje, gdy wielokrotnie odczytujesz i zapisujesz do DOM (Document Object Model), powodując, że przeglądarka wielokrotnie przelicza układ.

Oto przykład layout thrashing:

// Bad example
elements.forEach(element => {
  const height = element.offsetHeight; // read  element.style.height = height + 'px'; // write});

Można tego uniknąć, grupując odczyty i zapisy.

To jest lepszy przykład:

// Good example
const heights = elements.map(element => element.offsetHeight); // batched read
elements.forEach((element, index) => {
  element.style.height = heights[index] + 'px'; // batched write
});

Często zadawane pytania dotyczące Google INP

Rozumiemy, że techniczny temat, taki jak INP, może rodzić wiele pytań. Aby pomóc, odpowiedzieliśmy na niektóre z najczęściej zadawanych pytań, które otrzymujemy od naszych czytelników.

Czym jest Google Interaction to Next Paint (INP)?

Interaction to Next Paint (INP) to metryka Google Core Web Vitals, która mierzy ogólną responsywność witryny na interakcje użytkownika. Oblicza czas od momentu, gdy użytkownik kliknie, dotknie lub wpisze coś na stronie, do pojawienia się następnej aktualizacji wizualnej na ekranie.

Daje to szerszy obraz doświadczenia użytkownika niż poprzednia metryka FID.

Dlaczego Google zastąpiło First Input Delay (FID) przez INP?

Google zastąpiło FID przez INP, ponieważ zapewnia ono bardziej kompleksowy pomiar responsywności strony. FID mierzył tylko opóźnienie pierwszej interakcji.

W przeciwieństwie do tego, INP ocenia opóźnienie wszystkich interakcji użytkownika podczas wizyty, oferując pełniejszy obraz doświadczenia użytkownika.

Jaki jest dobry wynik INP?

Zgodnie z wytycznymi Google, dobry wynik INP wynosi 200 milisekund lub mniej. Wynik między 200 a 500 milisekund „wymaga poprawy”, a wszystko powyżej 500 milisekund jest uważane za „słabą responsywność”.

Jak poprawić mój wynik INP w WordPress?

Poprawa wyniku INP w WordPressie wymaga kilku kroków. Właściciele stron internetowych mogą optymalizować procesy w tle, minimalizować JavaScript i upewnić się, że ich strona jest aktualna.

Deweloperzy mogą znacząco wpłynąć na optymalizację kodu, aby zapewnić natychmiastową informację zwrotną wizualną na działania użytkowników, na przykład wyświetlając wskaźnik ładowania, oraz poprzez odraczanie ciężkich zadań.

Dodatkowe zasoby dotyczące poprawy wydajności WordPressa

Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak poprawić swój wynik Google INP w WordPress. Możesz również zapoznać się z innymi artykułami dotyczącymi poprawy wydajności WordPress:

• Ważne metryki do zmierzenia na Twojej witrynie WordPress
• Jak zoptymalizować Core Web Vitals dla WordPress (kompletny przewodnik)
• Jak zmniejszyć czas do pierwszego bajtu (TTFB) w WordPress – Porady ekspertów
• Jak prawidłowo przeprowadzić test prędkości strony internetowej
• Jak przeprowadzić test obciążeniowy strony WordPress
• Jak używać wtyczki GTmetrix do poprawy wydajności witryny WordPress
• Jak zoptymalizować obrazy pod kątem wydajności sieci bez utraty jakości
• Kompleksowy przewodnik po zwiększaniu szybkości i wydajności WordPress
• Jak przyspieszyć wydajność WooCommerce
• Najszybszy hosting WordPress (testy wydajności)

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.