FCP (First Contentful Paint) – co to za wskaźnik i jak go poprawić?
Spis treści
Wydajność strony ma ogromny wpływ na doświadczenie użytkownika. Nic dziwnego, że wskaźników oceniających sam proces ładowania witryny jest aż kilka. First Contentful Paint to jeden z nich – poniżej omawiamy, jakie ma znaczenie i jak go poprawić.
First Contentful Paint – co to za wskaźnik?
First Contentful Paint (FCP) to jeden z podstawowych wskaźników określających szybkość ładowania strony WWW. Bierze on pod lupę czas renderowania pierwszego elementu na stronie – może być nim tekst, obraz lub dowolny inny element, który nie jest białym tłem.
Zdj 1. FCP jest wynikiem pomiaru czasu między pierwszą a drugą klatką, na której zaczęły pojawiać się pierwsze elementy interfejsu strony.
Źródło: web.dev/articles/fcp?hl=pl
FCP opisuje tylko jeden moment na osi czasu ładowania strony – ale jest to moment kluczowy. Użytkownik czekający na załadowanie witryny nie chce patrzeć na pustą kartę; potrzebuje informacji, że strona faktycznie się ładuje. Pierwsza wyrenderowana treść jest sygnałem, który mówi mu „Twoja przeglądarka pracuje, ale musisz jeszcze chwilę poczekać na efekty”. A to zmniejsza szanse na to, że użytkownik sfrustrowany opuści stronę, zanim ta zdąży się w ogóle wyświetlić.
FCP a Core Web Vitals
First Contentful Paint – choć bardzo przydatny – jest jedynie dodatkiem do wskaźników Core Web Vitals, które algorytm Google bierze pod uwagę w pierwszej kolejności przy układaniu wyników wyszukiwania. Przypomnijmy, co się do nich zalicza:
- LCP (Largest Contentful Paint) – czas renderowania największego elementu widocznego na stronie;
- INP (Interaction to Next Paint) – czas najwolniejszej reakcji strony na interakcję;
- CLS (Cumulative Layout Shift) – suma wszystkich niekontrolowanych przesunięć układu strony podczas jej ładowania.
FCP i LCP są do siebie dosyć podobne – oba określają czas renderowania elementów strony. Różnica polega na tym, że Largest Contentful Paint stawia granicę na największym elemencie – może być to, na przykład, główna grafika wyświetlona na ekranie albo blok tekstu. Gdy taki element się załaduje, użytkownik już wie, co czeka na niego na stronie, a sama witryna często jest – przynajmniej częściowo – funkcjonalna.
Jaka jest optymalna wartość FCP?
Zgodnie z wytycznymi Google, czas ładowania pierwszego elementu nie powinien przekraczać 1,8 sekundy. FCP poniżej 3 sekund jest jeszcze przyzwoite, ale nie idealne; strony, które ten czas przekraczają, Google postrzega jako źle zoptymalizowane.
Zdj 2. Im niższa wartość wskaźnika FCP, tym lepiej i dla użytkownika, i dla SEO Twojej strony.
Źródło: web.dev/articles/fcp?hl=pl
Jak mierzyć wartość tego wskaźnika?
W zasadzie każde narzędzie do analizy wydajności stron podaje również informacje o wartości First Contentful Paint.
Najprościej będzie oczywiście skorzystać z PageSpeed Insights – narzędzie od Google i zmierzy czas ładowania kolejnych elementów strony, i dostarczy wskazówek, co można poprawić. Inną opcją jest WebPageTest, który oferuje bardzo podobne dane, ale dodatkowo pozwala wybrać, na jakim serwerze (jest ich ok. 30, rozsianych po całym świecie), urządzeniu oraz przeglądarce mają być dokonywane pomiary.
Bardziej zaawansowanym polecamy wbudowane narzędzia developerskie od Google, czyli Chrome DevTools. Oprócz podstawowego audytu wydajności możesz z ich pomocą przeprowadzić też analizę Waterfall, obrazującą jak kolejno pobierane elementy strony wpływają na jej czas ładowania – bardzo przydatna opcja gdy chcesz określić, które zasoby przydałoby się w pierwszej kolejności zoptymalizować.
Jak poprawić First Contentful Paint?
Jeżeli Twoja strona w testach wydajności regularnie osiąga wyniki FCP powyżej 1,8 sekundy – trzeba reagować. Jakie działania mogą skrócić czas ładowania?
- Optymalizacja obrazów – zmiana formatu na WebP i zmniejszenie ich rozdzielczości. Na FCP największy wpływ powinny mieć grafiki, które współtworzą interfejs – to on często jest tym pierwszym ładującym się elementem.
- Optymalizacja kodu JavaScript oraz stylów CSS – warto się skupić na minimalizacji samego kodu oraz, w miarę możliwości, łączeniu plików z kodem, tak aby ograniczyć liczbę zapytań do serwera).
- Lazy loading – czyli celowe opóźnienie niektórych zasobów tak, aby przeglądarka w pierwszej kolejności mogła skupić się na renderowaniu lżejszych elementów (co powinno bardzo skutecznie poprawić FCP).
- Zastosowanie CDN (Content Delivery Network) – dla skrócenia czasu odpowiedzi serwera.
