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

Wraz ze wzrostem ruchu w witrynie będziesz chciał mieć pewność, że wszystko będzie działać płynnie. Jeśli użytkownicy będą musieli czekać dłużej niż kilka sekund na załadowanie strony, prawdopodobnie opuszczą ją i mogą nigdy nie wrócić.

Na szczęście istnieje kilka prostych testów do oceny wydajności, a jeśli potrzebne są ulepszenia, istnieją rozwiązania, które mogą prawie natychmiast poprawić czas ładowania.

W tym poście omówimy jeden aspekt wydajności witryny: opóźnienie pierwszego wejścia. Dowiesz się, co to jest, dlaczego jest to ważne i jak możesz zmierzyć i poprawić wynik FID w swojej witrynie WordPress.

Wprowadzenie do pierwszego opóźnienia wejścia

Opóźnienie pierwszego wejścia (FID) to czas ładowania, jakiego doświadcza odwiedzający po pierwszej interakcji z Twoją witryną. Zasadniczo, gdy ktoś kliknie link lub naciśnie przycisk, musi poczekać na odpowiedź przeglądarki. Jeśli Twoja witryna ma wysoki wynik FID, odwiedzający czekają dłużej.

FID jest jedną z głównych metryk Core Web Vitals. Stworzony przez Google raport mierzy wydajność stron internetowych.

Oto trzy główne wskaźniki wydajności zawarte w raporcie Core Web Vitals:

• Największe malowanie treści (LCP) : mierzy czas potrzebny do załadowania witryny po zażądaniu adresu URL przez użytkownika.
• Opóźnienie pierwszego wejścia (FID) : jest to czas, w którym Twoja witryna reaguje na interakcję użytkownika ze stroną.
• Kumulatywne przesunięcie układu (CLS) : mierzy wszystkie przesunięcia układu, które występują podczas wczytywania strony.

Chociaż wszystkie te wskaźniki oceniają wrażenia użytkownika Twojej witryny, Twój wynik FID jest jednym z najważniejszych. Jeśli Twoja strona nie ładuje się szybko, może pozostawić słabe pierwsze wrażenie. W rzeczywistości jednosekundowe opóźnienie może zmniejszyć satysfakcję odwiedzających o 16 procent.

Oto kilka korzyści z poprawy wyniku FID:

• Zwiększenie średniego czasu odwiedzających stronę
• Zmniejszenie współczynnika odrzuceń
• Wzrost konwersji

Potencjalne przyczyny słabego wyniku FID

Po uruchomieniu testu Core Web Vitals raport poda wynik opóźnienia pierwszego wejścia. Akceptowalny FID to 100 milisekund lub mniej.

Słaby wynik FID jest wyższy niż 300 ms. Może to być spowodowane kilkoma różnymi czynnikami.

Jedną z najczęstszych przyczyn dużego opóźnienia pierwszego wejścia jest ciężki kod JavaScript. Jeśli przeglądarka musi wykonać duży plik JavaScript, może być zbyt zajęta, aby wykonać inne żądania.

Zbyt wiele wtyczek opartych na JavaScript może negatywnie wpłynąć na czas ładowania. Podobnie niektóre motywy mogą zawierać złożone pliki, które powodują ten sam problem.

Innym czynnikiem mogą być skrypty firm trzecich. Jeśli Twoja witryna zawiera wiele kodów i tagów analitycznych innych firm, może to zwiększyć opóźnienie Twojej strony. Czasami przeglądarki mogą nadać priorytet tym skryptom, opóźniając ładowanie innych treści w Twojej witrynie.

Jak zmierzyć wynik FID swojej witryny?

Teraz, gdy już wiesz, czym jest opóźnienie pierwszego wejścia, nadszedł czas, aby przetestować swoją witrynę.

Istnieje kilka narzędzi Core Web Vitals, których możesz użyć do sprawdzenia swojego FID. Jeśli otrzymasz słaby raport z któregokolwiek z tych narzędzi, możesz podjąć działania, aby ulepszyć swoją witrynę.

1. Statystyki PageSpeed

Jednym ze znanych narzędzi, z których możesz skorzystać, jest PageSpeed ​​Insights. Umożliwia to ocenę wydajności witryny pod kątem różnych czynników.

Po wpisaniu adresu URL witryny PageSpeed ​​Insights przedstawi szczegółową analizę skuteczności. U góry strony możesz sprawdzić, czy Twoja witryna przeszła test Core Web Vitals.

Korzystając z tego raportu, możesz sprawdzić wynik FID swojej witryny, który będzie mierzony w milisekundach. Jak wspomnieliśmy wcześniej, każdy wynik poniżej 100 ms zda test.

Pamiętaj, że musisz sprawdzić wydajność swojej witryny zarówno w przeglądarkach mobilnych, jak i stacjonarnych. Możesz zauważyć niewielkie różnice w wyniku FID na tych dwóch urządzeniach.

Jest to jeden z najszybszych sposobów pomiaru opóźnienia pierwszego wejścia w Twojej witrynie. Jeśli potrzebujesz szybkiego przeglądu wydajności sieci, może to być odpowiednie narzędzie dla Ciebie.

2. Konsola wyszukiwania Google

Podobnie jak PageSpeed ​​Insights, Google Search Console to bezpłatne narzędzie, którego możesz użyć do oceny wydajności witryny. Dzięki tej usłudze możesz przeglądać dane o ruchu w swojej witrynie i rozwiązywać określone problemy, takie jak opóźnienie pierwszego wejścia.

Aby zacząć korzystać z Google Search Console, musisz zweryfikować własność witryny. Można to zrobić na kilka sposobów, ale omówimy metodę przesyłania plików HTML. Zacznij od wpisania swojej domeny lub prefiksu adresu URL.

Następnie pobierz wygenerowany plik HTML. Aby móc korzystać z funkcji Google Search Console, musisz przesłać ten plik do katalogu głównego witryny.

Po weryfikacji uzyskasz dostęp do swojego pulpitu nawigacyjnego. Tutaj możesz przejść do zakładki Core Web Vitals .

W przeciwieństwie do PageSpeed ​​Insights dostęp do raportu może zająć trochę czasu, jeśli nie masz doświadczenia z tym narzędziem. Ponadto możesz nie być w stanie wyświetlić raportu, jeśli Twoja witryna nie ma wystarczającej liczby odwiedzających.

Google Search Console może podać podobne dane dotyczące wyniku FID. Otrzymasz ocenę Słaba , Wymaga poprawy lub Dobra na podstawie rzeczywistych danych dotyczących użytkowania.

3. Latarnia morska

Lighthouse to narzędzie do tworzenia stron internetowych, którego możesz użyć do audytu wydajności dowolnej strony internetowej. Chociaż nie mierzy bezpośrednio opóźnienia pierwszego wejścia, podaje całkowity czas blokowania (TBT). Możesz użyć tego jako proxy dla FID.

Mówiąc prościej, TBT ocenia, jak dobrze Twoja witryna reaguje na dane wejściowe użytkowników. Podobnie jak FID, TBT mierzy opóźnienie między pierwszym wyrenderowaniem treści (FCP) a czasem do interakcji (TTI). Ponieważ są tak podobne, możesz użyć TBT, aby ocenić swój wynik FID.

Aby wyświetlić raport Lighthouse w swojej witrynie, musisz kliknąć ją prawym przyciskiem myszy. Następnie wybierz Sprawdź .

U góry wygenerowanego kodu znajdź ikonę podwójnej strzałki. Następnie kliknij na nią i wybierz Lighthouse .

Na następnej stronie zobaczysz opcję wygenerowania raportu. Po kliknięciu Lighthouse przeprowadzi audyt Twojej witryny.

Po zakończeniu audytu możesz wyświetlić szczegółowe dane analityczne dotyczące wydajności Twojej witryny. Zobaczysz także raporty dotyczące SEO i dostępności sieci.

Następnie przewiń w dół, aż zobaczysz Metryki . W tej sekcji zobaczysz łączny czas blokowania .

Chociaż TBT i FID są podobne, należy pamiętać, że FID jest metryką pola. Ponieważ opiera się na użytkownikach w czasie rzeczywistym, nie można go zmierzyć w warunkach laboratoryjnych.

Lighthouse jest narzędziem metrycznym laboratoryjnym, więc jego metryka Całkowitego czasu blokowania nie ocenia rzeczywistej interaktywności. Na szczęście poprawa wyniku TBT może również poprawić opóźnienie pierwszego wejścia.

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

Gdy testujesz swoją witrynę za pomocą jednego z powyższych narzędzi, możesz otrzymać niski wynik opóźnienia pierwszego wejścia. Na szczęście możesz poprawić swój wynik, wdrażając kilka skutecznych strategii.

Zobaczmy, jak zmniejszyć opóźnienie pierwszego wejścia w WordPress.

1. Zainstaluj wtyczkę optymalizacyjną

Łatwym sposobem na rozpoczęcie jest zainstalowanie wtyczki, która skupia się na Core Web Vitals. W ten sposób możesz poprawić opóźnienie pierwszego wejścia bez podnoszenia ciężarów.

Jetpack Boost to potężna, łatwa w użyciu wtyczka, której możesz użyć do optymalizacji podstawowych wskaźników internetowych. Zapewnia wiele sposobów na zwiększenie wydajności sieci i poprawę wyniku FID.

Po aktywacji Jetpack Boost narzędzie automatycznie da Twojej witrynie wynik wydajności. Możesz sprawdzić, jak szybko Twoje strony ładują się zarówno w widokach mobilnych, jak i stacjonarnych.

Następnie możesz dostosować jego ustawienia, aby zoptymalizować pliki pod kątem szybkiego ładowania. Optymalizując CSS, odraczając JavaScript i wdrażając leniwe ładowanie, możesz poprawić swój wynik FID.

Jetpack Boost to darmowa wtyczka. Jeśli masz już zainstalowany Jetpack na swojej stronie WordPress, możesz aktywować Jetpack Boost z pulpitu nawigacyjnego.

2. Odrocz blokowanie renderowania JavaScript

Innym skutecznym sposobem na optymalizację wyniku FID jest odroczenie kodu JavaScript blokującego renderowanie. Domyślnie cały JavaScript w Twojej witrynie blokuje renderowanie. Oznacza to, że przeglądarka przestanie ładować określoną stronę, dopóki nie będzie mogła pobrać i wykonać tych skryptów.

W takim przypadku możesz odroczyć wykonanie JavaScript. To powie przeglądarce, aby najpierw wyrenderować najtrafniejszą treść.

Aby zidentyfikować ten blokujący renderowanie kod JavaScript, możesz użyć PageSpeed ​​Insights. Najpierw wpisz adres URL swojej witryny w pasku wyszukiwania.

Następnie przewiń w dół do sekcji Możliwości . Tutaj zobaczysz sugestie dotyczące poprawy wydajności sieci. Sprawdź, gdzie jest napisane Wyeliminuj zasoby blokujące renderowanie .

Po rozwinięciu tej sekcji pojawi się lista zasobów, które możesz odroczyć lub całkowicie wyeliminować. Po prawej stronie PageSpeed ​​Insights dowiesz się, jak te zmiany mogą wpłynąć na czas wczytywania.

Gdy zdecydujesz się odroczyć nieistotny JavaScript w swojej witrynie, możesz użyć wtyczki, aby uprościć ten proces. Dzięki Jetpack Boost możesz to zrobić w jednym kroku.

Na pulpicie WordPress przejdź do Jetpack → Boost . Następnie znajdź ustawienie oznaczone jako Odroczenie nieistotnego kodu JavaScript .

Na koniec włącz tę funkcję. Po wdrożeniu przełącznik zmieni kolor na zielony. Teraz spróbuj ponownie uruchomić swoją witrynę przez PageSpeed ​​Insights, aby sprawdzić, czy Twój wynik FID się poprawił.

3. Odłóż niekrytyczny CSS

Gdy oceniasz swoją witrynę w PageSpeed ​​Insights, możesz również zobaczyć inne zasoby blokujące renderowanie. Podobnie jak w przypadku JavaScript, pewne kodowanie może uniemożliwić ładowanie strony podczas czytania ich przez przeglądarkę.

Podobnie jak w przypadku JavaScript, możesz odroczyć niekrytyczny CSS. Zacznij od uruchomienia swojej witryny przez narzędzie wydajności, aby sprawdzić, czy Twój CSS wymaga optymalizacji.

Następnie możesz użyć wtyczki Jetpack Boost, aby zoptymalizować CSS. Na pulpicie WordPress przejdź do Jetpack → Boost . Następnie znajdź ustawienie oznaczone Optymalizuj ładowanie CSS .

Po kliknięciu tej opcji wtyczka automatycznie wygeneruje krytyczny CSS dla Twojej witryny. Przeniesie te ważne informacje na początek strony, co może przyspieszyć ładowanie treści.

Odroczenie niekrytycznego CSS może poprawić ogólną wydajność. Powinno to również poprawić Twój wynik FID w PageSpeed ​​Insights.

4. Wyeliminuj niepotrzebny JavaScript

Jeśli zainstalowałeś wiele wtyczek lub skomplikowany motyw, Twoja witryna może uruchamiać zbyt wiele skryptów. Jeśli przeglądarka musi wykonać długą listę skryptów, aby załadować Twoją witrynę, może to prowadzić do spowolnienia.

Wiele skryptów jest potrzebnych do wyświetlenia Twojej witryny, ale są szanse, że masz niepotrzebne CSS i JavaScript. Jeśli nie wiesz, jak odróżnić, możesz wrócić do PageSpeed ​​Insights.

Podobnie jak w przypadku pierwszych trzech metod, przewiń do sekcji Możliwości . Tym razem poszukaj nieużywanego JavaScript i CSS.

Obok każdego nieużywanego skryptu znajduje się adres URL z informacją, skąd pochodzi. W tym przykładzie Google Analytics i Google Tag Manager tworzyły niepotrzebny kod JavaScript.

Jeśli wiesz, który motyw lub wtyczki powodują problem, możesz rozważyć ich usunięcie. Następnie możesz zainstalować różne wersje, które są dobrze zakodowane i lżejsze.

Alternatywnie możesz użyć wtyczki, takiej jak Asset CleanUp, aby usunąć nieużywane CSS i JavaScript. To narzędzie może wyeliminować zasoby blokujące renderowanie, aby zmniejszyć liczbę żądań HTTP w Twojej witrynie.

Po zainstalowaniu i aktywowaniu funkcji Oczyszczanie zasobów w witrynie przejdź do opcji Oczyszczanie zasobów → Menedżer CSS/JS na pulpicie nawigacyjnym. Na tej stronie możesz wybrać różne elementy swojej witryny, aby wyświetlić jej CSS i JavaScript.

Na przykład możesz kliknąć Strona główna , aby wyświetlić wszystkie załadowane pliki na tej stronie.

Te informacje będą wyświetlane na podstawie lokalizacji. Możesz przewinąć stronę w dół, aby zobaczyć skrypty z wtyczek, motywów, podstawowego oprogramowania i źródeł zewnętrznych.

Istnieją dwa sposoby na usunięcie fragmentu skryptu. Możesz go usunąć na tej konkretnej stronie lub w całej witrynie.

Po usunięciu nieużywanych skryptów kliknij Aktualizuj . Następnie możesz wyczyścić pamięć podręczną, aby natychmiast zastosować te zmiany.

5. Zminimalizuj CSS i JavaScript

Chociaż możesz łatwo usunąć skrypty ze swojej witryny, będziesz chciał pozbyć się tylko tych, których nie używasz. Aby uzyskać niezbędne CSS i JavaScript, możesz je po prostu zminimalizować.

Prostym sposobem na to jest zainstalowanie wtyczki Autoptimize. Jest to bezpłatne narzędzie, które może automatycznie minimalizować pliki CSS i JavaScript po prostym procesie konfiguracji.

Po instalacji przejdź do Ustawienia → Autooptymalizacja . W sekcji Opcje JavaScript możesz zaznaczyć pole obok Optymalizuj kod JavaScript .

Następnie musisz zrobić to samo z opcjami CSS . Dostosowując te ustawienia, narzędzie automatycznie zminimalizuje istniejący CSS i JavaScript w Twojej witrynie.

Po zakończeniu zapisz zmiany. Masz również możliwość opróżnienia pamięci podręcznej po tym procesie.

6. Opóźnienie czasu wykonania JavaScript

Aby jeszcze bardziej zoptymalizować JavaScript, możesz opóźnić jego wykonanie. Wiąże się to z informowaniem przeglądarki, aby ładowała kod JavaScript dopiero po interakcji użytkownika z treścią. O ile odwiedzający nie przewinie strony lub nie kliknie przycisku, te skrypty nie zostaną przetworzone.

Aby to zrobić, możesz użyć wtyczki, takiej jak Flying Scripts. Za pomocą tego narzędzia możesz opóźnić wykonanie plików JavaScript do momentu pojawienia się aktywności użytkowników w Twojej witrynie.

Po aktywowaniu Latających Skryptów przejdź do Ustawienia → Latające Skrypty . Spowoduje to otwarcie strony ustawień wtyczki, na której możesz rozpocząć wdrażanie opóźnień JavaScript.

Zacznij od napisania słów kluczowych, które identyfikują skrypty, które chcesz opóźnić. Możesz na przykład użyć „gtag” w skrypcie Menedżera tagów Google.

Następnie możesz zaimplementować limit czasu. Zasadniczo spowoduje to wykonanie JavaScript, gdy przez pewien czas nie będzie żadnej aktywności. Możesz ustawić minutnik na maksymalnie dziesięć sekund. Po zakończeniu kliknij Zapisz zmiany.

7. Wdróż sieć dostarczania treści

Inną skuteczną opcją poprawy opóźnienia pierwszego wejścia jest użycie sieci dostarczania treści (CDN). Jest to grupa połączonych serwerów, które mogą dystrybuować Twoje treści online do użytkowników na całym świecie.

Korzystając z CDN, możesz zmniejszyć odległość między serwerem a odwiedzającymi online. Dzieje się tak, ponieważ gdy ktoś odwiedza Twoją witrynę, zawartość jest dostarczana z serwera znajdującego się najbliżej jego lokalizacji. Jeśli masz tylko jeden serwer w jednej lokalizacji, wysyłanie danych do użytkowników międzynarodowych może zająć dużo czasu.

Na szczęście witryny korzystające z Jetpack są już wyposażone w bezpłatny CDN. Jeśli przejdziesz do Jetpack → Ustawienia → Wydajność , możesz włączyć Site Accelerator.

Jetpack zoptymalizuje Twoje obrazy i pliki statyczne. W przeciwieństwie do innych dostawców CDN nie ma limitu plików. Dodatkowo nie musisz się martwić dodatkowymi opłatami miesięcznymi ani skomplikowanym procesem zarządzania.

Często zadawane pytania dotyczące opóźnienia pierwszego wejścia

Do tej pory przyjrzeliśmy się, jak działa opóźnienie pierwszego wejścia i jak możesz poprawić swój wynik. Przyjrzyjmy się teraz kilku typowym pytaniom dotyczącym FID.

Jak mogę zmierzyć wynik FID mojej witryny WordPress?

Możesz łatwo zmierzyć wynik opóźnienia pierwszego wejścia swojej witryny za pomocą narzędzia Core Web Vitals. PageSpeed ​​Insights to łatwa w użyciu opcja. Wystarczy wpisać adres URL witryny, a narzędzie wygeneruje szczegółowy raport o wydajności witryny.

Google Search Console działa bardzo podobnie. Po zweryfikowaniu, że jesteś właścicielem witryny, możesz wyświetlić raport FID oparty na rzeczywistych danych odwiedzających.

Możesz także użyć Lighthouse. To narzędzie podaje całkowity czas blokowania (TBT) Twojej witryny. Chociaż nie wyświetli to wyników od prawdziwych użytkowników, może zapewnić lepsze zrozumienie responsywności strony.

Jaki jest dobry wynik FID?

Mówiąc prościej, Twoja witryna znajdzie się w jednym z trzech wyników:

• Dobrze : 100 milisekund lub mniej
• Potrzeby poprawy : waha się od 100ms do 300ms
• Słaba : większa niż 300 ms

Po zmierzeniu wyniku FID wszelkie wyniki powyżej 100 milisekund będą wymagały pewnych korekt.

Jak mogę łatwo zoptymalizować swój wynik FID?

Możesz poprawić swój wynik FID, optymalizując skrypty na swojej stronie. Zwykle złożone pliki JavaScript i CSS proszą przeglądarkę o zatrzymanie ładowania, dopóki ich nie przetworzy. Usuwając, odraczając lub minimalizując skrypty, możesz zwiększyć szybkość swojej witryny.

Chociaż możesz użyć różnych narzędzi do tego procesu, Jetpack Boost może pomóc Ci wdrożyć wiele rozwiązań jednocześnie. Korzystając z tej wtyczki, możesz zoptymalizować strukturę CSS i odroczyć nieistotny JavaScript.

Popraw swoje pierwsze wrażenie

Gdy nowy użytkownik wchodzi w interakcję z Twoją witryną, oczekuje, że jego przeglądarka szybko zareaguje. Jeśli Twoja witryna ma duże opóźnienie pierwszego wejścia (FID), może to spowodować, że użytkownicy opuszczą stronę bez czytania treści. Koncentrując się na czasie reakcji witryny, możesz poprawić wrażenia użytkownika i zatrzymać więcej odwiedzających.

Twoja witryna może mieć słaby wynik FID z powodu ciężkiego i nieefektywnego kodowania JavaScript i CSS. Na szczęście możesz łatwo zidentyfikować te problemy za pomocą narzędzia takiego jak Google PageSpeed ​​Insights. Następnie możesz zainstalować wtyczkę, taką jak Jetpack Boost, aby zminimalizować lub odroczyć CSS i JavaScript.