First Contentful Paint (FCP) to kolejny wskaźnik, który pomaga ocenić wydajność strony. Określa czas potrzebny na załadowanie pierwszego elementu, jaki wyświetla się na ekranie. Jak nietrudno się domyślić, powinien być możliwie jak najkrótszy, aby strona od razu sprawiała wrażenie gotowej do interakcji. W artykule wyjaśniamy, czym dokładnie jest FCP, jak wpływa na doświadczenia użytkowników oraz jakie działania możesz podjąć, aby go zoptymalizować.
Co to jest FCP?
FCP (First Contentful Paint) to jeden z wielu wskaźników określających wydajność strony internetowej. Określa czas, w jakim pierwszy element na danej stronie – tekst, obraz lub inna zawartość – pojawia się na ekranie użytkownika. Im krótszy FCP, tym szybciej odwiedzający widzi pierwsze treści, co bezpośrednio wpływa na jego doświadczenia i ocenę strony.
Choć FCP jest ważnym elementem analizy wydajności, nie jest aż tak istotny, jak inne wskaźniki Core Web Vitals, czyli:
- LCP (Largest Contentful Paint) – mierzy czas w jakim ładuje się największy element widoczny na stronie,
- FID (First Input Delay) – określa czas reakcji strony na pierwszą interakcję użytkownika,
- CLS (Cumulative Layout Shift) – ocenia poziom niekontrolowanych zmian układu strony podczas jej ładowania.
FCP jest wskaźnikiem pomocniczym, który pomaga zrozumieć, jak szybko strona zaczyna się ładować.
First Contentful Paint a Largest Contentful Paint
Podczas analizy i ewentualnej późniejszej optymalizacji FCP należy rozróżnić dość zbliżone do siebie parametry, mianowicie First Contentful Paint i Largest Contentful Paint. Oba parametry dotyczą czasu potrzebnego na wczytanie pierwszych elementów na stronie, jednak są pomiędzy nimi pewne różnice.
LCP dotyczy czasu potrzebnego na wczytanie pierwszego największego widocznego elementu na stronie.
FCP dotyczy czasu potrzebnego na wczytanie pierwszego widocznego elementu na stronie.
Do pierwszych elementów widocznych na stronie FCP zalicza:
- teksty,
- zdjęcia,
- elementy tła pod warunkiem, że nie są białe.
Jeśli element tła wczytuje się jako pierwszy, wówczas powinien być on zauważalny dla użytkownika. W sytuacji, w której wczytany element tła będzie biały, a doświadczenie użytkownika na tym etapie nadal będzie na poziomie “białego ekranu”, wynik FCP nie uwzględni tego elementu.
Innymi słowy, FCP analizuje czas wczytywania pierwszego widocznego elementu, dzięki któremu użytkownik jest w stanie zauważyć, że strona faktycznie się ładuje.
Jak przeanalizować FCP za pomocą Google Lighthouse?
FCP, podobnie jak pozostałe parametry CWV, najlepiej przeanalizować w Google Lighthouse bezpośrednio w przeglądarce Chrome:
- Krok 1 – Po przyciśnięciu klawisza F12 otwiera się narzędzie Chrome DevTools.
- Krok 2 – Klikamy w zakładkę „Lighthouse” i rozpoczynamy test.
Dobry wynik FCP
Podobnie jak w przypadku pozostałych parametrów Core Web Vitals, Google określa, jaki wynik First Contentful Paint kwalifikuje się do optymalizacji. Jak widać pierwszy element na stronie nie powinien ładować się w czasie dłuższym niż 1,8 s.
Jak zoptymalizować słaby wynik FCP?
Do optymalizacji FCP można podejść na kilka różnych sposobów. Warto jednak wiedzieć, że przyczyny słabego wyniku FCP często są zbieżne z tymi prowadzącymi do niskiego LCP. Tym samym, nadając wyższy priorytet wczytywania dla pierwszego największego widocznego elementu na stronie (optymalizacja LCP), możemy też wpłynąć na poprawę wyniku FCP, o ile ten element jest również pierwszym w kolejności podczas wczytywania.
W przypadku LCP największym elementem na stronie najczęściej są zdjęcia, np. w galerii zdjęć (karta produktowa), czy na listingu (pierwsze wyświetlane produkty). Aby uzyskać możliwie jak najlepszy wynik FCP, lepiej skupić się jednak na mniejszych elementach (o jak najmniejszej wadze) jak np. logo. Po skutecznej optymalizacji powinny się one wczytywać jeszcze szybciej niż np. zdjęcia produktu.
Dodatkowe metody optymalizacji FCP znajdziemy jak zwykle w sekcji “Diagnostic” w Google Lighthouse. Do najczęstszych wskazówek należą:
- minifikacja CSS i JS,
- eliminacja zasobów blokujących renderowanie,
- zmniejszenie nieużywanych CSSów,
- zmniejszenie nieużywanych JavaScript’ow.
Bardzo często są to elementy, które dodatkowo opóźniają wczytanie pierwszego widocznego elementu na stronie. Ich optymalizacja może skutecznie poprawić końcowy wynik FCP.
Podsumowanie
Dobry wynik FCP to jeden z wielu elementów składających się na strategię działań SEO. Koncentracja całej uwagi na poprawie FCP w sytuacji, w której serwis boryka się z innymi problemami technicznymi, raczej nie przyniesie spektakularnych rezultatów poza poprawą użyteczności. Warto zatem potraktować poprawę wyniku FCP jako część szerszej i długofalowej strategii SEO uwzględniającej całościową optymalizację techniczną serwisu, regularny rozwój treści oraz rozbudowę profilu linków zewnętrznych.
Wojciech Bębenek
SEO Expert
