Opóźnienie pierwszego wejścia (FID): co to jest i jak zoptymalizować pod tym kątem witrynę

Zapewnienie użytkownikom szybkiej obsługi ma kluczowe znaczenie dla sukcesu Twojej witryny. Istnieje jednak wiele sposobów, aby ocenić, jak dobrze to robi. Jednym z nich jest opóźnienie pierwszego wejścia (FID), które mierzy czas w milisekundach (ms) między pierwszą interakcją użytkownika z Twoją witryną a reakcją przeglądarki na tę akcję.

W tym poście wyjaśnimy, czym jest FID i jak go zmierzyć. Omówimy również, czym jest dobry wynik FID, i przeprowadzimy Cię przez proces optymalizacji. Na koniec omówimy kilka często zadawanych pytań. Zacznijmy!

Subskrybuj nasz kanał YouTube

Co to jest opóźnienie pierwszego wejścia (FID)?

Jak wspomnieliśmy, FID (czasami określany również jako „opóźnienie wejścia”) to miara czasu w ms, która występuje między interakcją użytkownika z Twoją witryną a reakcją jego przeglądarki. To podstawowa metryka zawarta w Raporcie z doświadczeń użytkowników Chrome. Ponadto jest to jeden z kluczowych elementów sieci Web. Są to dane, których Google używa do określania jakości UX Twojej witryny (a tym samym jej PageRank).

W tym kontekście dane wejściowe lub interakcja mogą odnosić się do szerokiego zakresu działań. Na przykład może to obejmować kliknięcie łącza, naciśnięcie przycisku lub zaznaczenie pola wyboru. Jednak FID nie ma zastosowania, gdy użytkownik przewija lub powiększa stronę, ponieważ nie wymagają one nowej odpowiedzi między przeglądarką a Twoją witryną.

Na ten wskaźnik może mieć wpływ kilka różnych czynników. Wpływ może mieć szybkość i moc obliczeniowa urządzenia użytkownika. Nie możesz tego kontrolować. Możesz jednak kontrolować rozmiar i złożoność strony internetowej. Mówiąc dokładniej, możesz kontrolować, ile JavaScriptu używa Twoja witryna. Na przykład, jeśli masz wiele obrazów lub skryptów, które ładują się w losowej kolejności, może to spowolnić cały proces i opóźnić odpowiedź użytkownika.

Nawet jeśli Twoja witryna ma solidne FCP i LCP, opóźnienie pierwszego wejścia może być wystarczająco długie, aby spowodować ich odrzucenie. Może im się wydawać, że Twoja witryna nie odpowiada i działa wolno.

W skrócie, FID służy do określenia, jak responsywna jest strona podczas jej ładowania. Być może oczywiście im szybszy jest ten proces, tym lepiej. Dlatego ważne jest, aby wiedzieć, jak mierzyć FID swojej witryny i jak poprawić swój wynik.

Jak zmierzyć FID

Zanim zaczniesz optymalizować swój wynik FID, musisz wiedzieć, na jakim etapie się obecnie znajduje. W idealnym przypadku, aby zapewnić solidne wrażenia użytkownika (UX), chcesz, aby wynik FID wynosił poniżej 100 ms.

Wynik 100 ms lub mniej jest uważany za dobry , natomiast wynik między 100 a 300 ms może ulec poprawie. Wynik FID powyżej 300 ms jest słaby .

Aby zmierzyć swój FID, możesz użyć Google PageSpeed ​​Insights:

To bezpłatne narzędzie firmy Google, które na wiele sposobów testuje wydajność Twojej witryny. Dzięki niemu możesz obserwować różne kluczowe metryki, w tym FID.

Należy pamiętać, że pomiar FID może być czasem trudny do zmierzenia. To dlatego, że wymaga danych wejściowych użytkownika. Jeśli jednak Twoja witryna była ostatnio interaktywna, powinieneś być w stanie znaleźć te dane za pomocą PageSpeed ​​Insights.

Aby rozpocząć, wprowadź adres URL swojej witryny w polu tekstowym i kliknij przycisk Analizuj . Gdy narzędzie zakończy analizę Twojej strony, zaprowadzi Cię do wyników i nada Twojej witrynie ogólny wynik:

Metryka pierwszego opóźnienia wejścia (FID) można znaleźć w sekcji Dane pola . Nieco niżej w sekcji Możliwości znajdziesz sugestie dotyczące optymalizacji strony i wyników.

Pragniemy również zauważyć, że Google oznacza te wyniki jako dane pola . Oznacza to, że informacje są oparte na rzeczywistej interakcji użytkownika, a nie na symulowanych testach (nazywanych danymi laboratoryjnymi lub znajdowanymi za pomocą narzędzi laboratoryjnych ). FID jest dość subiektywny i ściśle powiązany z rzeczywistymi interakcjami użytkownika, dlatego ważne jest, aby korzystać z danych terenowych. Symulacje mogą tylko tyle wyjaśnić.

Jak zoptymalizować swój wynik FID

Teraz, gdy rozumiesz, czym jest wynik FID i jak możesz go zmierzyć, nadszedł czas, aby przyjrzeć się, jak faktycznie możesz go poprawić. Poniżej znajduje się kilka wskazówek i strategii, których możesz użyć, aby skrócić czas opóźnienia pierwszego wejścia.

Zoptymalizuj i zminimalizuj swój kod CSS i JavaScript

Jednym z najlepszych sposobów na optymalizację wyniku FID jest kompresja i optymalizacja kodu CSS i JavaScript. Może to zmniejszyć rozmiary plików, a tym samym poprawić responsywność. Usuwając niepotrzebne znaki, spacje i podziały wierszy, zmniejszasz rozmiar pliku, co z kolei zwiększa szybkość strony i zmniejsza liczbę procesów, które musi obsługiwać przeglądarka. W ten sposób masz niższy FID.

Użytkownicy Divi powinni również wiedzieć, że motyw automatycznie minimalizuje HTML, JavaScript i CSS od samego początku. Po prostu aktywacja motywu skompresuje cały ten kod, dzięki czemu Twój FID będzie w lepszej pozycji niż wcześniej.

Jeśli nie jesteś użytkownikiem Divi, masz kilka opcji zminimalizowania kodu. Szybkim i prostym podejściem do tego jest użycie narzędzia online, takiego jak Minify Code. Skopiuj pełnowymiarowy kod, wklej go do witryny, witryna zminifikuje go, a następnie skopiuj/wklej wyniki z powrotem do swojej witryny.

Możesz także zminimalizować swój kod ręcznie za pomocą edytora kodu, chociaż może to być nieco bardziej skomplikowane. Jeśli jednak masz doświadczenie w pracy z kodem, ta metoda może zapewnić większą kontrolę.

Jeszcze inną strategią jest użycie wtyczki, takiej jak Autoptimize lub W3 Total Cache (lub dowolnej liczby innych).

Może to być opłacalne rozwiązanie dla użytkowników WordPressa, jeśli nie masz doświadczenia z kodem i chcesz automatycznie wdrożyć tę modyfikację w swojej witrynie. Ponadto wtyczki te oferują szereg funkcji skoncentrowanych na optymalizacji, takich jak buforowanie obrazów i treści.

Podziel długie zadania JavaScript na mniejsze

Długie zadania mają tendencję do blokowania głównego wątku i mogą powodować rozrost JavaScriptu, negatywnie wpływając na responsywność witryny. Aby temu zapobiec i poprawić swój wynik FID, możesz spróbować podzielić te zadania na mniejsze, asynchroniczne.

Jednym z najskuteczniejszych sposobów rozwiązania tego problemu jest dzielenie kodu. Krótko mówiąc, jest to technika służąca do dzielenia i ładowania tylko mniejszych i niezbędnych fragmentów kodu, a nie jednego dużego pliku naraz. Możesz to zrobić za pomocą narzędzia takiego jak Webpack.

Użytkownicy Divi zyskują również w tym obszarze, ponieważ duża aktualizacja wydajności rozdziela motywy, dużą bibliotekę JavaScript i ładuje je tylko w razie potrzeby. Powinno to zmniejszyć FID w prawie wszystkich witrynach Divi. Motywy WordPress mają zwykle własne biblioteki JS, a użytkownicy mogą nie mieć doświadczenia ani uprawnień do samodzielnego dzielenia kodu i jego optymalizacji. Chcieliśmy, aby z Divi nie było to problemem.

Zmniejsz wpływ kodu stron trzecich i skryptów niekrytycznych

Jeśli masz zbyt wiele skryptów innych firm, może to opóźnić wykonanie własnych danych witryny. Dlatego, aby zoptymalizować swój wynik FID, mądrym pomysłem jest zmniejszenie wpływu kodu stron trzecich i usunięcie wszelkich niekrytycznych skryptów stron trzecich. I odroczyć te, których nie możesz usunąć.

Decydując, które skrypty są najważniejsze, zadaj sobie pytanie, które odgrywają ważną rolę w UX witryny. Na przykład możesz usunąć lub opóźnić niektóre reklamy lub wyskakujące okienka, które nie są bardzo potrzebne. Czy Twoi użytkownicy muszą najpierw zobaczyć ten e-mail, czy możesz opóźnić to do czasu, gdy w jakiś sposób wejdą w interakcję z witryną?

Więcej informacji na temat ograniczania nieużywanego kodu JavaScript i CSS można znaleźć w sekcji Możliwości w raportach PageSpeed ​​Insights:

Jeśli klikniesz, aby rozwinąć dowolną z tych sekcji, wyświetli się lista określonych plików i zadań, które mogą blokować główny wątek. Możesz także znaleźć nieużywany JavaScript i CSS za pomocą Chrome DevTools.

W wielu przypadkach te zasoby „blokujące renderowanie” zatrzymują tak szybkie wczytywanie strony, co wpływa również na FID. Usunięcie i/lub odroczenie ich może nie tylko poprawić interaktywność Twojej witryny, ale także postrzeganą responsywność i szybkość.

Divi ma przełączniki do odraczania niekrytycznych skryptów, takich jak ten. W opcjach motywu możesz wybrać odroczenie skryptów jQuery i zastosowanie wbudowanego odroczenia CSS, które w połączeniu z funkcją Critical CSS motywu usuwa wszystkie blokujące renderowanie CSS. Możesz także przełączać odroczenie arkusza stylów edytora Google Fonts i Gutenberg. Wszystko to jest postrzegane jako „blokowanie renderowania”, więc członkowie Elegant Themes niemal natychmiast zobaczą poprawiony wynik FID.

Opóźnienie pierwszego wejścia (FID) — często zadawane pytania

W tym momencie prawdopodobnie dobrze rozumiesz, czym jest FID i jego znaczenie dla UX Twojej witryny, a także jak go poprawić. Mając to na uwadze, chcemy mieć pewność, że omówiliśmy wszystkie kluczowe punkty. Przejdźmy więc do kilku najczęściej zadawanych pytań dotyczących FID.

Jak FID pasuje do ogólnej wydajności mojej witryny?

Zasadniczo FID mierzy pierwszą interakcję odwiedzających z Twoją witryną. Jest to zarówno wskaźnik ilościowy, jak i postrzegany, ponieważ wpływa na pierwsze wrażenie użytkownika w Twojej witrynie. Możesz obiektywnie zobaczyć, kiedy witryna reaguje na dane wprowadzane przez użytkownika, ale na podstawie interakcji użytkownika z witryną możesz również zobaczyć, kiedy oni również ją postrzegają.

FID mierzy czas między pierwszą interakcją wykonaną przez użytkownika a czasem reakcji przeglądarki na tę akcję. Innymi słowy, dane te oceniają responsywność Twojej witryny, gdy wciąż się ładuje . Im szybciej, tym lepsze wrażenia będą mieli Twoi goście.

Ponadto, jako Core Web Vital (obok Largest Contentful Paint (LCP) i Cumulative Layout Shift (CLS)), FID odgrywa ważną rolę w rankingu Twojej witryny przez Google. Dlatego oprócz wygody użytkowników może również wpływać na optymalizację witryn pod kątem wyszukiwarek (SEO). Wiele z tych samych strategii ulepszania FID również znacznie obniży ogólną wydajność Twojej witryny.

Jak mogę zmierzyć mój FID?

Istnieje kilka różnych sposobów pomiaru wyniku FID. Najszybszą i najłatwiejszą metodą jest uruchomienie witryny przez Google PageSpeed ​​Insights. Raport wyszczególni szereg ważnych wskaźników, w tym FID. Zawiera również sugestie, w jaki sposób możesz poprawić swój wynik.

Dodatkowo możesz użyć kilku innych narzędzi, aby uzyskać dostęp do swojego wyniku FID. Obejmują one raport z doświadczeń użytkowników przeglądarki Chrome, raport dotyczący podstawowych wskaźników internetowych Google Search Console oraz bibliotekę JavaScript Web Vitals. Przydatne mogą być również narzędzia takie jak GT Metrix i Pingdom's Speed ​​Test.

Jak poprawić mój wynik FID?

Poprawa FID może pomóc poprawić zarówno rankingi UX, jak i SEO Twojej witryny. Zazwyczaj słaby wynik FID można przypisać kilku czynnikom, w tym:

• Ciężki JavaScript
• Nieużywane skrypty
• Długie zadania JavaScript
• Długie pliki skryptów

Aby poprawić swój wynik, możesz wykonać kilka kroków. Obejmują one minimalizację kodu witryny, usuwanie lub opóźnianie nieużywanych skryptów innych firm oraz dzielenie długich zadań JavaScript (i plików CSS) na mniejsze.

Wniosek

Masz tylko jedną szansę, aby wywrzeć pozytywne pierwsze wrażenie na użytkownikach Twojej witryny. Dlatego ważne jest, aby wykorzystać każdą możliwą szansę, aby zoptymalizować swój wynik FID. Konieczne jest upewnienie się, że pierwsze interakcje użytkowników są szybkie.

Pamiętaj, że idealny wynik FID to 100 ms lub mniej. Jeśli chcesz poprawić swój i skrócić ten czas, kilka strategii, które omówiliśmy powyżej (takie jak odraczanie nieużywanego JavaScript, optymalizacja kodu CSS i JavaScript oraz odraczanie/usuwanie zasobów blokujących renderowanie) bez wątpienia skróci Twój czas do punktu muszą być.

Masz pytania dotyczące FID? Daj nam znać w sekcji komentarzy poniżej!

Polecany obraz za pośrednictwem wan wei / shutterstock