Jak poprawić opóźnienie pierwszego wejścia (FID) w witrynie WordPress

Niedawno rozpoczęliśmy nową serię dotyczącą wskaźników Google Core Web Vitals od posta na temat największego malowania treści. Tutaj chcemy kontynuować z kolejnym kandydatem w kolejce: First Input Delay lub w skrócie FID i jak go ulepszyć w WordPress.

Poniżej szczegółowo omówimy, czym jest FID i jak zoptymalizować dla niego witrynę WordPress. Nauczysz się rozumieć i mierzyć opóźnienie pierwszego wejścia, do jakiej wartości powinieneś dążyć i jak to poprawić, jeśli to konieczne.

Pamiętaj, że ten post zakłada, że ​​znasz już Google Core Web Vitals i ich wpływ na wygodę użytkownika i optymalizację wyszukiwarek. Jeśli nie masz co do tego pewności, zapoznaj się z pierwszym artykułem z tej serii lub naszym samodzielnym postem w Core Web Vitals .

Co to jest opóźnienie pierwszego wejścia? Definicja

Tak więc, jak już wspomniano, FID jest jednym z trzech wskaźników pomiaru doświadczenia użytkownika witryny, które Google uważa za podstawowe wartości do oceny, jak przyjazna dla użytkownika jest witryna. Jest to również część ich algorytmu wyszukiwania, więc jeśli uzyskasz zły wynik, ucierpi na tym Twój ranking wyszukiwania.

Czym jednak dokładnie jest opóźnienie pierwszego wejścia?

Krótko mówiąc, FID określa ilościowo opóźnienie między interakcją użytkownika ze stroną internetową (np. kliknięciem przycisku) a czasem, w którym przeglądarka jest w stanie zareagować na tę interakcję. Odzwierciedla to responsywność strony internetowej.

Podczas gdy Largest Contentful Paint oblicza, ile czasu zajmuje stronie internetowej, aby stała się użyteczna dla odwiedzającego, FID mierzy, jak dobrze pozostaje użyteczna, wykonując dowolne działanie, jakiego chce odwiedzający - nawet podczas ładowania. Oczywiście, jeśli Twoja witryna jest bardziej responsywna, zapewnia to lepsze wrażenia użytkownika.

Prawdopodobnie znasz to z własnego korzystania z Internetu. Czy kiedykolwiek byłeś na stronie, która trwała zbyt długo, aby zareagować na Twój wpis? Nie podobało ci się to, prawda? Cóż, odwiedzający Twoją witrynę też nie.

Jak oblicza się FID?

FID jest mierzony w milisekundach (ms). Aby to obliczyć, przeglądarka śledzi moment wystąpienia interakcji użytkownika na stronie oraz czas potrzebny głównemu wątkowi przeglądarki na przetworzenie tej interakcji. Wynik FID reprezentuje opóźnienie między dwoma zdarzeniami. W rezultacie niski wynik FID wskazuje, że strona jest wysoce interaktywna i szybko reaguje na działania użytkownika.

W tym miejscu zapewne zadajesz sobie pytania: Co to jest „główny wątek”? A co liczy się jako interakcja?

Oto odpowiedź.

Głównym wątkiem jest w zasadzie potok pracy przeglądarki. Wszystkie procesy, które są niezbędne do renderowania i uruchamiania strony internetowej, przebiegają przez nią. Jeśli jest stale zajęty, potrzeba więcej czasu, zanim będzie mógł zareagować na nowe dane wejściowe.

Jeśli chodzi o to, co liczy się jako interakcja, może to być kliknięcie łącza, dotknięcie przycisku, użycie menu rozwijanego, pola tekstowego, pól wyboru lub przycisków opcji, a także naciśnięcie klawisza na klawiaturze (np. Esc , aby zamknąć wyskakujące okienko).

Co powoduje FID?

Opóźnienie pierwszego wejścia jest często największe między pierwszym malowaniem treści (kiedy pierwszy element strony pojawia się w oknie przeglądarki) a czasem interaktywnym (kiedy strona po raz pierwszy staje się użyteczna i reaguje na dane wprowadzane przez użytkownika).

Zasadniczo opóźnienie wejścia wynika z sytuacji, gdy przeglądarka jest zajęta czymś innym, podczas gdy użytkownik próbuje coś zrobić. W takim przypadku nie może zareagować w odpowiednim czasie na dane wejściowe, co skutkuje czasem oczekiwania dla odwiedzającego witrynę.

Od strony technicznej typowymi winowajcami są:

• Duże pliki JavaScript, które przeglądarka musi przeanalizować i wykonać
• Zasoby blokujące renderowanie, na które musi czekać
• Ciężkie obliczenia, manipulacja DOM lub procesy wymagające dużej ilości zasobów
• Powolne połączenia sieciowe lub duże opóźnienia, które mogą prowadzić do opóźnień w pobieraniu plików witryny i innych zasobów
• Czynności, które blokują główny wątek, takie jak rozbudowane animacje, długotrwałe przejścia CSS lub przetwarzanie dużych obrazów

Ostatnią rzeczą, na którą warto zwrócić uwagę w przypadku opóźnienia pierwszego wejścia, jest to, że w marcu 2024 r. zostanie ono zastąpione innym wskaźnikiem o nazwie Interaction to Next Paint (INP). Jednak na razie pracujemy z FID, więc nadal ma to znaczenie zapoznasz się z nią.

Jak zmierzyć opóźnienie pierwszego wejścia

Możesz przetestować FID swojej witryny za pomocą prawie tych samych narzędzi, co inne podstawowe wskaźniki internetowe:

• PageSpeed ​​Insights — po prostu wprowadź adres URL strony i otrzymaj raport zawierający wartość FID.
• Raport dotyczący wrażeń użytkownika Chrome — Google gromadzi i kompiluje rzeczywiste dane dotyczące wrażeń użytkowników z wielu witryn internetowych za pośrednictwem swojej przeglądarki. Możesz uzyskać dostęp do tych danych za pomocą różnych narzędzi, w tym wymienionych tutaj.
• Search Console — raport Web Vitals w Google Search Console informuje o stronach ze złymi odczytami FID.
• biblioteka web-vitals JavaScript — jeśli jesteś bardziej techniczny, możesz wbudować tę bibliotekę JavaScript w swoją stronę internetową i stamtąd uzyskać informacje o Core Web Vitals.

Większość z tych narzędzi po prostu pokazuje wartość FID w swoich wynikach, więc wiesz, z czym masz do czynienia.

Należy zauważyć, że dla tego wskaźnika potrzebna jest rzeczywista interakcja użytkownika. Nie jest to coś, co można symulować w środowisku laboratoryjnym. Dlatego najlepszym źródłem tego są prawdziwe dane użytkowników, takie jak raport CrUX.

Jeśli chcesz wcześniej przetestować swoją witrynę w środowisku laboratoryjnym, najlepszą miarą proxy jest całkowity czas blokowania. Możesz to również znaleźć na przykład w PageSpeed ​​Insights.

Ponadto skup się na naprawdę najgorszych przypadkach FID na swojej stronie, to powie Ci najwięcej o tym, co jest nie tak.

Co to jest dobre opóźnienie pierwszego wejścia?

Pozostaje tylko pytanie, do jakiego numeru należy strzelać? Dobry wynik FID wynosi zazwyczaj poniżej 100 milisekund. Uważa się, że wyniki od 100 do 300 milisekund wymagają poprawy. Wszystko powyżej 300 milisekund wskazuje na złe wrażenia użytkownika.

Pamiętając o tych testach porównawczych, dowiedzmy się, jak poprawić opóźnienie pierwszego wejścia w witrynie.

Jak poprawić opóźnienie pierwszego wejścia w witrynie WordPress

Poprawa FID polega głównie na optymalizacji wydajności strony internetowej i ograniczeniu wszelkich zadań blokujących, które mogą opóźniać reakcję przeglądarki na dane wprowadzane przez użytkownika. Najczęstszym winowajcą tego ostatniego jest intensywne lub nieprawidłowe użycie JavaScript. Z tego powodu wiele z poniższych środków będzie koncentrować się na tym. Jednak są też inne rzeczy, które możesz zrobić.

Ogólne środki poprawy wydajności

Wiele technik, które już omówiliśmy, jak poprawić największą zawartość, ma również zastosowanie, gdy chcesz ulepszyć swój FID, w tym:

• Zoptymalizuj środowisko witryny — im szybsza jest witryna, tym szybciej można dostarczać zasoby, skracając czas potrzebny na interakcję. Dlatego zainwestuj w wysokiej jakości hosting, motywy i wtyczki. Ponadto zmniejsz liczbę wtyczek w swojej witrynie i aktualizuj ją. Ponadto zaimplementuj buforowanie i kompresję.
• Zaimplementuj CDN — Sieci dostarczania treści pozwalają skrócić dystans między serwerem a użytkownikiem, co skutkuje również szybszym dostarczaniem plików.
• Wyeliminuj zasoby blokujące renderowanie — wszelkie części witryny, które spowalniają proces ładowania, negatywnie wpływają na wszystkie elementy doświadczenia użytkownika i podstawowe wskaźniki sieciowe. Wyeliminowanie ich z witryny pomoże rozwiązać ten problem. Więcej szczegółów na temat JavaScriptu blokującego renderowanie poniżej.

Aby uzyskać więcej wskazówek, zapoznaj się z naszym artykułem na temat przyspieszenia WordPressa, zmniejszenia liczby żądań serwera i testowania szybkości witryny.

Zmniejsz, odłóż, asynchronizuj i zminimalizuj swój JavaScript

Jak wspomniano, JavaScript jest zwykle głównym czynnikiem powodującym złe wyniki FID. Oto, w jaki sposób możesz zoptymalizować znaczniki w swojej witrynie, aby nie stanowiły problemu.

Zmniejsz ogólny znacznik

Oczywiście najlepszą rzeczą, jaką możesz zrobić, to zmniejszyć ogólny JavaScript na stronie. Sprawdź kartę Zasięg w narzędziach programistycznych przeglądarki, aby znaleźć nieużywany kod JavaScript na stronie internetowej.

Sprawdź, czy jest to konieczne dla Twojej witryny jako całości lub czy możesz całkowicie usunąć nieużywany JavaScript.

W WordPressie nadmierna liczba JavaScript jest często wynikiem zbyt wielu wtyczek lub motywów, które mają wiele dzwonków i gwizdków powodujących opóźnienie pierwszego wejścia. Jeśli więc chcesz się go pozbyć, sprawdź, czy istnieje sposób na wyeliminowanie niektórych z nich lub przejście na odchudzoną wersję.

Skrypty asynchroniczne i odroczone

Następnym krokiem jest optymalizacja dostarczania JavaScript do przeglądarki. Główny problem polega na tym, że o ile nie określono inaczej, gdy przeglądarka napotyka skrypt JavaScript w znacznikach witryny, przestaje renderować kod HTML, dopóki skrypt nie zostanie pobrany i wykonany. Odnosi się to również do wspomnianych powyżej „zasobów blokujących renderowanie”.

Istnieją jednak sposoby na obejście tego problemu i opierają się one na dwóch słowach kluczowych:

• async – dodanie tego do wywołania skryptu umożliwia przeglądarce pobieranie go w tle bez wstrzymywania przetwarzania strony. Zostanie uruchomiony dopiero po pobraniu, niezależnie od reszty strony.
• defer – bardzo podobny do async . Mówi przeglądarce, aby nie czekała na skrypt i zamiast tego kontynuowała budowanie strony. Jednak w tym przypadku skrypt zostanie załadowany jako ostatni, gdy reszta strony zostanie w pełni zbudowana.

Oto jak w praktyce wygląda użycie async i defer :

 <script async src="https://mywebsite.com/wp-content/themes/mytheme/analytics.js"></script> <script defer src="https://mywebsite.com/wp-content/themes/mytheme/analytics.js"></script>

Jak możesz sobie wyobrazić, obie te metody mogą skutkować znaczną oszczędnością czasu podczas ładowania strony. Ich główna różnica: defer zachowuje względną kolejność skryptów w taki sposób, w jaki pojawiają się one w dokumencie, podczas gdy async używa kolejności, w jakiej skrypty są pobierane.

Możesz użyć obu do późniejszego załadowania nieużywanego i niekrytycznego kodu JavaScript. Obejmuje to skrypty innych firm, takie jak narzędzia analityczne.

Zminimalizuj JavaScript, aby przyspieszyć pobieranie

Wreszcie, w przypadku kodu JavaScript, który zostanie załadowany, należy go zminimalizować. Minifikacja oznacza usunięcie wszystkich znaczników i formatowania kodu, które służą tylko do uczynienia plików czytelnymi dla ludzi.

Ponadto zmniejsza rozmiar plików i przyspiesza ich pobieranie przez przeglądarkę. Istnieje wiele narzędzi do tego celu, w tym poniższe zalecenia dotyczące wtyczek.

Rozdziel długie zadania

Oprócz zmniejszenia ogólnego kodu JavaScript w Twojej witrynie i poprawy dostarczania, możesz zoptymalizować opóźnienie pierwszego wejścia w swojej witrynie WordPress, dzieląc to, co pozostaje, na mniejsze części. Jest to szczególnie przydatne, jeśli masz wiele „długich zadań” na swojej stronie.

Co to są długie zadania, pytasz?

Wszystko, co blokuje główny wątek na dłużej niż 50 ms. Możesz je zobaczyć w narzędziach programistycznych Chrome oznaczonych czerwonymi flagami.

Jeśli podzielisz je na mniejsze części, możesz ładować je asynchronicznie, co skutkuje mniejszą nieprzerwaną pracą w głównym wątku.

Jak to zrobić?

Za pomocą dzielenia kodu. Umożliwia warunkowe ładowanie fragmentów kodu JavaScript, dzięki czemu od początku ładowany jest tylko kod o krytycznym znaczeniu. Reszta wchodzi w grę tylko wtedy, gdy jest to konieczne. Możesz także podzielić zadania na mniejsze oddzielne funkcje. Oba sposoby zapewniają responsywność stron.

Aby uzyskać bardziej techniczne wskazówki dotyczące obsługi długich zadań, sprawdź ten zasób.

Przydatne wtyczki WordPress do poprawy FID

Rozumiemy, że optymalizacja plików JavaScript nie jest domeną wszystkich, zwłaszcza jeśli nie jesteś programistą. Z tego powodu skompilowaliśmy kilka wtyczek i narzędzi WordPress, które mogą pomóc w poprawie wartości opóźnienia pierwszego wejścia.

• Oczyszczanie zasobów — ta wtyczka umożliwia wyłączenie nieużywanych CSS i JavaScript, wstępne ładowanie czcionek, minimalizację plików, odroczenie JavaScript i nie tylko.
• Flying Scripts — pozwala opóźnić wykonanie niekrytycznego kodu JavaScript do czasu braku aktywności użytkownika.
• Organizator wtyczek — Zmień kolejność wczytywania wtyczek w Twojej witrynie i wybiórczo je wyłączaj na wybranych stronach lub typach treści.
• Autoptimize — może automatycznie łączyć i minimalizować pliki CSS i JS, a także dodawać async i defer do skryptów. Jest również bardzo łatwy w użyciu.
• WP Rocket — płatna wtyczka do buforowania, która może zrobić wiele z tego, o czym mówiliśmy powyżej. Ogólnie rzecz biorąc, większość wtyczek do buforowania oferuje podobną funkcjonalność.

Ostatnie przemyślenia: pierwsze opóźnienie wejścia w WordPress

FID jest jednym z wskaźników składających się na triumwirat Core Web Vitals i mierzy interaktywność stron internetowych. Ponieważ nikt nie lubi powolnego korzystania z Internetu, jest to ważna część doświadczenia użytkownika. Koncentrując się na poprawie opóźnienia przy pierwszym wejściu, właściciele witryn i programiści mogą zapewnić użytkownikom bardziej responsywne wrażenia, a ostatecznie zwiększyć satysfakcję i zaangażowanie użytkowników.

Powyżej omówiliśmy, jak mierzyć, testować i ulepszać FID w witrynie WordPress. Chociaż optymalizacja JavaScript może wydawać się nieco poza zasięgiem mniej technicznych użytkowników, nadal możesz wiele zrobić, aby poprawić ogólną wydajność swojej witryny, w tym FID. Mam nadzieję, że czujesz się już na siłach, aby to zrobić.

Czy masz jakieś inne wskazówki, jak poprawić opóźnienie pierwszego wejścia na stronach WordPress? Podziel się swoimi przemyśleniami i zaleceniami poniżej!