Czym jest First Input Delay (FID)?
Pierwsze wrażenie, jakie robi Twoja strona na użytkownikach, ma bardzo duże znaczenie. Samą szybkość ładowania się zasobów można dobrze określić za pomocą First Contentful Paint oraz Largest Contentful Paint. Jak jednak ustalić, czy odwiedzający są w stanie szybko wejść w interakcję z witryną? Do tego służy już First Input Delay.
W tym artykule bliżej przyjrzymy się temu, czego dotyczy owa metryka.
First Input Delay (FID) – czym jest?
First Input Delay (opóźnienie przy pierwszym działaniu), to jeden z 3 elementów Core Web Vitals, czyli podstawowych wskaźników internetowych, które są czynnikiem rankingowym Google od maja 2021 roku.
FID mierzy czas od momentu, kiedy użytkownik po raz pierwszy wchodzi w interakcję ze stroną (np. klika link lub korzysta z funkcji obsługiwanej przez JavaScript) do chwili, w której przeglądarka jest w stanie rozpocząć przetwarzanie zdarzeń w odpowiedzi na taką akcję.
Dlaczego metryka ta ma duże znaczenie? W praktyce kod obsługujący witrynę internetową nie działa natychmiastowo. Zapewne nieraz zdarzyło Ci się, że załadowałeś stronę, chciałeś coś kliknąć, ale przeglądarka nie reagowała.
Z technicznego punktu widzenia tytułowy input delay (lub input latency) ma miejsce, ponieważ główny wątek przeglądarki jest zajęty innym procesem, przez co nie jest w stanie (jeszcze) odpowiedzieć użytkownikowi.
Jednym z częstych powodów takiego zjawiska jest sytuacja, w której przeglądarka jest zajęta parsowaniem i realizowaniem dużego pliku JavaScript załadowanego przez aplikację. W takiej sytuacji nie może ona uruchomić kolejnych procesów obsługiwania zdarzeń, gdyż obecnie załadowany JavaScript wymusza realizację innych czynności.
Takie opóźnienia występują zazwyczaj między First Contentful Paint (FCP) a Time to Interactive (TTI), gdyż to właśnie w tym momencie strona załadowała część swojej zawartości, ale nie jest jeszcze w pełni interaktywna.
Jako że informacje wejściowe są podawane, gdy przeglądarka jest jeszcze w trakcie wykonywania innego zadania, musi ona poczekać, aż zostanie ono zakończone, zanim będzie mogła odpowiedzieć na dane wejściowe użytkownika. Czas, jaki wtedy minie, to wartość FID dla tej osoby odwiedzającej stronę.
Co dokładnie jest brane pod uwagę w przypadku FID?
FID jest metryką, która mierzy responsywność strony podczas ładowania. Z tego powodu skupia się ona jedynie na zamkniętych akcjach jak kliknięcia kursorem, dotknięcie ekranu na telefonie i naciśnięcia klawiszy.
Inne interakcje, jak przewijanie czy powiększanie, są akcjami ciągłymi i z technicznego punktu widzenia są traktowane zupełnie inaczej. Z tego powodu z myślą o ocenie ich wydajności stosuje się inne metryki.
Dlaczego pierwsza interakcja jest taka ważna?
Spowolnienia w procesie interakcji oczywiście nie występują jedynie podczas wstępnego załadowywania zasobów strony. Google wybrało jednak owo pierwsze opóźnienie (jak sama nazwa wskazuje – First Input Delay) jako element Core Web Vitals z następujących powodów:
- Największe problemy z interaktywnością strony mają miejsce właśnie podczas jej wstępnego ładowania. Google chce dlatego kłaść nacisk na ten segment, aby usprawnić responsywność witryn internetowych.
- Wstępne opóźnienie wpływa jednocześnie na pierwsze wrażenie użytkownika na temat responsywności strony, które to ma ogromny wpływ na to, jak dana osoba będzie traktować Twoją witrynę.
- Zalecane rozwiązania dla stron, które chcą naprawić FID, różnią się od tych, jakie stosuje się w przypadku opóźnień zachodzących już po załadowaniu się najważniejszych zasobów. Google chce dlatego rozdzielić owe metryki, aby dzięki temu dostarczać lepszych wskazówek w kontekście optymalizacji tych czynników.
FID – jaki wynik można uznać za dobry?
Google zaleca, aby wartość FID była mniejsza niż 100 milisekund (0,1 sekundy). Gdy limit ten nie jest przekraczany, użytkownik czuje, że przeglądarka reaguje natychmiastowo na jego akcje.
Poszczególne wartości można ująć następująco:
Pamiętaj jednak, że przeglądarka dalej musi wykonać zadanie powiązane z interakcją użytkownika, co zajmuje oczywiście czas, ale nie jest już ujmowane przez FID. W niektórych przypadkach wartość First Input Delay może być zatem mniejsza niż 100 milisekund, ale korzystanie ze strony dalej nie będzie w pełni responsywne.
Jak zmierzyć FID?
W przeciwieństwie do Largest Contentful Paint FID nie może być analizowane przy pomocy tzw. danych laboratoryjnych, które pozwalają na symulowanie zachowań użytkowników i tego, jak reaguje na nie witryna.
Z drugiej strony metrykę TBT (Total Blocking Time) da się badać w ten sposób. Co najważniejsze, dobrze koreluje ona w praktyce z FID, a także wychwytuje podobne problemy, które wpływają na interaktywność. Optymalizacja TBT przeprowadzona na podstawie danych laboratoryjnych powinna także poprawić FID.
Niemniej jednak jedynym sposobem na dokładny pomiar First Input Delay jest skorzystanie z danych generowanych przez prawdziwych użytkowników. W tym zadaniu pomogą Ci następujące narzędzia:
First Input Delay – jak go poprawić?
Poprawa FID wiąże się z optymalizacją licznych aspektów związanych z działaniem strony i obsługą zasobów. Oto kilka przydatnych sposobów:
Przyspiesz realizację kodu JavaScript
Jak już wcześniej wspomniano, kod JavaScript często obciąża główne zasoby przeglądarki przez długi czas, co przeszkadza w przetwarzaniu akcji użytkownika. Możesz ulepszyć jego realizację dzięki następującym metodom:
- Wysyłaj tylko ten kod, który jest potrzebny użytkownikowi.
- Skompresuj kod swojej strony tak, aby jego rozmiar był mniejszy, dzięki czemu będzie się szybciej ładował.
- Usuń nieużywany kod JavaScript.
- Nadaj priorytet skryptom, które są niezbędne do interakcji i opóźniaj ich wykonywanie do momentu, w którym będzie miała miejsce interakcja ze strony użytkownika.
- Rozbudowane zadania blokują główny wątek i nie pozwalają mu na przetwarzanie akcji osoby odwiedzającej stronę. Jeśli podzielisz je na mniejsze taski (postaraj się, aby ich realizacja nie zajmowała więcej niż 50 milisekund), dane wejściowe użytkownika będą mogły być przetwarzane między nimi.
Popraw kod CSS
Aby przeglądarka była w stanie sprawnie wyrenderować układ strony, pliki CSS muszą być pobierane tak szybko, jak to możliwe. Z tego powodu warto regularnie usuwać nieużywane fragmenty CSS oraz stosować takie metody jak minifikacja kodu oraz kompresja plików.
Zmniejsz obciążenie po stronie użytkownika
Dąż do tego, aby przeglądarka musiała wykonywać jak najmniej zadań. Dzięki temu będzie ona w stanie szybciej przetworzyć zasoby, jak i akcje użytkownika. W tym celu możesz wykorzystać np. statyczne generowanie treści po stronie serwera.
FID – podsumowanie
First Input Delay to metryka, która przez Google jest teraz brana pod uwagę, jeśli chodzi o pozycjonowanie. Postaraj się zatem zoptymalizować ją najlepiej, jak to możliwe.