First contentful paint – co to za wskaźnik?
First Contentful Paint (FCP) – jest to kolejna metryka związana z wydajnością strony. Dzięki niemu można określić, jaki jest czas ładowania pierwszego elementu na stronie internetowej, który zobaczy użytkownik (obraz lub treść). Wartość FCP gra istotną rolę, ponieważ może wpłynąć na doświadczenia użytkowników. W przypadku wolnego ładowania odbiorcy mogą opuścić stronę.
Parametr FCP nie obrazuje całej zawartości witryny, a jedynie moment, w którym do użytkownika dociera sygnał, że strona zaczęła się ładować. Ta chwila może zaważyć na decyzji o pozostaniu na stronie. Dlatego odgrywa znaczącą rolę pośród wskaźników wydajności Core Web Vitals.
Jak zmierzyć first contentful paint?
Istnieje wiele narzędzi do wykonania pomiarów FCP. Można to zrobić za pomocą programów do analizy wydajności stron np.:
- Google PageSpeed Insights,
- Lighthouse w przeglądarce Chrome,
- Web Page test,
- GTmetrix.
Oprócz nich mierzyć FCP można w bibliotece JavaScript (Vital-Core), jak i sprawdzając szybkość witryny poprzez Google Search Console. Jak widać sposoby pomiarów wydajności, a w tym first contentful paint można dobrać indywidualnie. Przykładowy sposób wykonania pomiaru poprzez Lighthouse:
- Otwórz przeglądarkę chrome,
- Wciśnij klawisz F12, aby uruchomić Chrome DevTools,
- Przejdź do zakładki „Lighthouse”,
- Uruchom testowanie.
Interpretacja wyników FCP
First Contentful Paint określa czas od rozpoczęcia ładowania strony. Wszystkie parametry Web Core Vitals mają przedział wyników. W przypadku wskaźnika First Contentful Paint dobry wynik mieści się w przedziale:
od 1.8 sec. do 3.0 sec.
Wynika z tego, że czas ładowania się pierwszego elementu nie powinien trwać dłużej niż 1.8 sec. Większy wynik może odbić się niekorzystnie na odczuciach użytkowników i spowodować opuszczenie witryny.
Jak poprawić wynik First Contentful Paint?
Są różne strategie optymalizacji FCP, a wszystko zależy od przyczyny słabego wyniku. Na poprawę FCP działa odpowiedni dobór strategii, która ma poprawić wynik. Zależy to również od wielkości serwisu, czy systemu strony. Oto kilka przykładów, które pomogą przyspieszyć proces ładowania:
- optymalizacja obrazów – Często gorsze wyniki spowodowane są LCP (Largest Contentful Paint) i czasem ładowania największego elementu na stronie, który zwykle ma priorytet podczas wczytywania, a ładuje się dłużej niż małe elementy. Warto początkowo zacząć od małych obrazów na stronie, ponieważ ich optymalizacja przyczyni się do przyspieszenia FCP. W rezultacie, jako pierwsze na ekranie pojawią się małe elementy.
- minimalizacja kodu JavaScript i plików CSS – aby ilość zapytań do serwera nie opóźniała wczytywania strony, warto połączyć pliki. Jeśli nie jest to możliwe, można także nadać priorytet ładowania (asynchroniczne ładowanie skryptów).
- Lazy loading – sprawia, że grafika i inne elementy, nie ładują się podczas pierwszego wczytywania. Ta technika znacząco poprawi FCP.
- Content Delivery Network – przyspiesza wczytywanie strony, korzystając z wielu rozmieszczonych serwerów (PoP).
- korzystanie z pamięci podręcznej – bardzo często wykorzystywany system, który czasem przyspiesza ładowanie strony.
FCP i jego znaczenie dla SEO
First contentful paint jest jednym z elementów świadczącym o wydajności stron internetowych. Dlatego też parametr FCP jest ważny z punktu widzenia SEO. Gorszy wskaźnik znacząco wpływa na odbiór strony przez użytkowników. Moment, w którym użytkownik po raz pierwszy natknie się na kłopoty, wpłynie również na czas spędzony na stronie, a co za tym idzie na wskaźnik odrzuceń. Wiadomo również, że lepsze wyniki, to wzrost konwersji i zadowolenia odbiorców.
Również wyszukiwarka Google uwzględnia FCP i uznaje ten wskaźnik, jako czynnik rankingowy. Jest tak, ponieważ największa wyszukiwarka traktuje priorytetowo odczucia odbiorców i wysoko w rankingu przeglądarka wyświetla tylko szybie strony internetowe. Jeśli zatem czas potrzebny do załadowania pierwszego elementu witryny wynosi więcej niż 1.8 sec, to koniecznie trzeba przyśpieszyć ładowanie. Jest kluczowa sprawa w pozycjonowaniu jeśli chcemy mieć wyższą pozycję w wynikach wyszukiwania.
Błędy, które powodują wysokie FCP
Szybkość ładowania strony zależy od wielu czynników. Na niektóre z nich mamy wpływ. Warto sprawdzić, co jest przyczyną wolnego ładowania się pierwszych treści na stronie. Z reguły stoi za tym nieprawidłowa optymalizacja obrazów. Efektowne, ale duże i skomplikowane pliki często obciążają witrynę i wpływają na czas załadowania strony. Także przesadne dodawanie dużej ilości zewnętrznych zasobów, odbija się na szybkości. Jeśli przyczyna nie leży po naszej stronie, warto również sprawdzić, czy przyczyną nie są powody techniczne np. zbyt wolny serwer.
FCP, ważny wskaźnik, który służy ocenie wydajności stron internetowych
FCP mierzy czas, który upływa od momentu wyświetlenia się pierwszego elementu na stronie, może zaważyć o ocenie użytkowników. Zniecierpliwienie długim ładowaniem szybko zniechęca odbiorców, którzy opuszczą witrynę, zanim się załaduje. First Contentful Paint określa ten czas i dzięki temu mamy rozeznanie i pełniejszy obraz wydajności strony. Jeśli ten proces przebiega zbyt wolno, możemy przyspieszać FCP, z pomocą różnych strategii. Warto to zrobić, bo ten wskaźnik ma wpływ na użytkowników, na ranking Google i SEO.