Jak optymalizować First Input Delay (FID)

First Input Delay to metryka wchodząca w skład Core Web Vitals. Pomaga ona monitorować to, jak z technicznego punktu widzenia interaktywna jest Twoja strona. W tym artykule dowiesz się, jak optymalizować FID.

Czym jest First Input Delay?

First Input Delay to metryka, która mierzy czas, jaki mija od pierwszej akcji użytkownika, który właśnie odwiedził daną stronę, do momentu, w którym przeglądarka może zacząć przetwarzać taką interakcję.

Mówiąc prościej, First Input Delay to opóźnienie pomiędzy np. kliknięciem linku, a momentem, w którym przeglądarka reaguje na taką akcję i zaczyna ją przetwarzać. Oczywiście FID dotyczy się jedynie interakcji skończonych, w przypadku których da się ustalić konkretny początek i koniec. Z tego powodu powiększanie strony lub jej przewijanie nie podpada pod omawianą metrykę.

Jaki powinien być maksymalny First Input Delay? Według Google zalecana wartość to mniej niż 100 milisekund. FID powyżej 300 milisekund jest już z kolei traktowane jako bardzo złe.

Jak ulepszyć First Input Delay?

Poprawianie omawianej metryki nie jest prostym zadaniem. W przypadku tego procesu zwykle konieczne jest optymalizowanie kodu strony i ulepszanie tego, jak witryna zarządza procesami. Przyjrzyjmy się zatem temu, co warto zrobić:

• Zoptymalizuj kod JavaScript

Długie zadanie to kod na stronie internetowej, w przypadku którego czas realizacji przekracza 50 milisekund. Obecność takich tasków negatywnie wpływa na FID. W pozbyciu się ich pomaga code splitting, czyli dzielenie kodu JavaScript na mniejsze kawałki, a następnie zastosowanie u nich lazy loadingu.

W przypadku JavaScript warto także ustalić (np. za pomocą Chrome DevTools Coverage Tab), które części kodu mają kluczowe znaczenie dla działania strony. Warto w ich przypadku wyłączyć render-blocking. Choć proces ten jest ogólnie przydatny, to jednak potrafi on negatywnie wpływać na FID.

• Przeanalizuj kod aplikacji trzecich

Kod aplikacji trzecich (third-party scripts) to skrypt, który jest załadowywany na stronę w celu dodania nowych funkcjonalności. Dzięki niemu możliwe jest tworzenie dynamicznych reklam, widżetów czy stosowanie oprogramowania do analityki.

Tego typu kod potrafi czasami zbytnio obciążać sieć, na czym cierpią inne funkcje strony, co przekłada się z kolei na gorszy FID. Rozwiązaniem w takiej sytuacji jest stosowanie ładowania kodu aplikacji trzecich na żądanie.

• Minimalizuj obciążenie zasobów po stronie użytkownika

Staraj się zminimalizować ilość danych, które muszą być przetwarzane po stronie klienta. Zmniejszy to ilość pracy, jaką musi wykonać przeglądarka, aby wyrenderować stronę, co pozytywnie wpłynie na First Input Delay. W tym celu możesz np. generować statycznie jak najwięcej treści po stronie serwera.

First Input Delay – podsumowanie

Dzięki dobrej optymalizacji FID Twoja strona będzie szybko reagować na działania użytkowników, co na pewno przełoży się na wygodniejsze korzystanie z niej. Nie zapomnij zatem odpowiednio zadbać o ten element.

Artykuły, które mogą cię zainteresować

• Cumulative Layout Shift (CLS)
• Largest Contentful Paint (LCP)
• Core Web Vitals