2827 wy艣wietlenia
2268 wyraz贸w

First Contentful Paint [FCP] optymalizacja krok po kroku

First Contentful Paint [FCP] optymalizacja krok po kroku

Czas czytania: 11 minut i 20 sekund 2021.12.15 | Aktualizacja: 4 miesi膮ce temu
Udost臋pnij Sirius Pro - Facebook Sirius Pro - Twitter Sirius Pro - Email
First Contentful Paint [FCP] optymalizacja krok po kroku
W tym artykule znajdziesz najlepsz膮 wiedz臋 oraz porady na temat

First Contentful Paint [FCP] optymalizacja krok po kroku

przygotowan膮聽wy艂膮cznie przez naszych 馃 ekspert贸w. Je偶eli jednak chcesz od razu skorzysta膰 z naszej odp艂atnej pomocy to kliknij w przycisk, a nast臋pnie wype艂nij i wy艣lij do nas zg艂oszenie.
Uzyskaj pomoc
Spis tre艣ci
  • Google Core Web Vitals
  • Czym jest First Contentful Paint [FCP]?
  • Optymalizacja First Contentful Paint krok po kroku
    • Krok 1. Wykonaj kopi臋 strony
    • Krok 2. Zaktualizuj stron臋
    • Krok 3. Wybierz najlepszy hosting
    • Krok 4. Sprawd藕 dane od Google
    • Krok 5. Przetestuj adresy URL
    • Krok 6. 聽Sprawd藕 URL w Google Chrome
    • Krok 7. Spr贸buj poprawi膰 wynik FCP
  • Popraw razem z nami First Contentful Paint

W tym poradniku dowiesz si臋 czym jest czynnik rankingowy First Contentful Paint oraz dlaczego ma on tak ogromny wp艂yw na pozycjonowanie strony w Google. Nauczysz si臋 tak偶e razem z nami jak znale藕膰 element First Contentful Paint na stronie oraz poprawi膰 wynik FID w Google PageSpeed Insight.

Nasza strona ma wynik w Google PageSpeed Insight 99/100 i wszystkie czynniki rankingowe Google [First Contentful Paint, First Input Delay, Largest Contentful Paint i Cumulative Layout Shift] na zielono. Chcesz mie膰 podobny wynik, ale nie chcesz czyta膰 do ko艅ca tego poradnika [cho膰 gwarantujemy, 偶e warto]? Kliknij tutaj i napisz do nas, a pomo偶emy Ci osi膮gn膮膰 taki sam wynik na Twojej stronie.

Google Core Web Vitals

Na samym pocz膮tku zanim przejdziemy do dosy膰 trudnego zagadnienia jakim jest czynnik rankingowy First Input Delay opowiemy Ci troch臋 o Google Core Web Vitals. Dla ekspert贸w takich jak my nazwa ta budzi raczej pozytywne skojarzenia, poniewa偶 jest to kolejny krok wykonany przez Google w dobr膮 stron臋. Za艂o偶eniem Core Web Vitals jest poprawa zar贸wno do艣wiadcze艅 u偶ytkownik贸w jak i wyci臋cie z pierwszej strony w Google niskiej jako艣ci witryn. A skoro mowa o SEO to przy okazji przeczytaj wi臋cej o tym czym jest pozycjonowanie stron w Google oraz jak robi膰 je samodzielnie bez agencji.

Wracaj膮c do tematu Google Core Web Vitals to szereg czynnik贸w rankingowych, kt贸re oceniaj膮 Twoj膮 stron膮 internetow膮 pod k膮tem jako艣ci i szybko艣ci dzia艂ania.

Na li艣cie pochodz膮cej od Google, kt贸r膮 mo偶esz zobaczy膰 poni偶ej mamy wi臋c ju偶 od dawna znane nam testy takie jak:
No Intrusive Interstitials –聽Brak natr臋tnych reklam pe艂noekranowych
HTTPS – Certyfikat SSL i protok贸艂 HTTPS na stronie
Safe Browsing – Ochrona przed niebezpiecznymi tre艣ciami na stronie
Mobile Friendly – Przystosowanie strony do urz膮dze艅 mobilnych

Od maja 2021 roku do listy tej do艂膮czy艂y nast臋puj膮ce nowe czynniki rankingowe:
鉁筹笍聽Largest Contentful Paint – Czas wyrenderowania najwi臋kszej tre艣ci na stronie
鉁筹笍聽First Input Delay聽– Op贸藕nienie przed wprowadzeniem pierwszych danych na stronie
鉁筹笍聽Cumulative Layout Shift – Najwi臋ksze przesuni臋cie elementu na stronie

First Contentful Paint - Core Web Vitals

Czynniki rankingowe wchodz膮 w sk艂ad Google Core Web Vitals.

I te ostatnie czynniki rankingowe sk艂adaj膮 si臋 w艂a艣nie na tzw. Google Core Web Vitals, czyli ocen臋 podstawowych wska藕nik贸w internetowych dla witryny. A gdy po艂膮czymy Core Web Vitals z pozosta艂ymi testami Google to ca艂o艣膰 wp艂ywa na tzw. Google Page Experience Signals, czyli informacje zwrotne dla Google, czy Twoja strona internetowa jest przyjazna dla u偶ytkownika, czy te偶 mo偶e jest na odwr贸t i powinna zosta膰 ukarana 馃槨

Zastanawiasz si臋 zapewne dlaczego na tej li艣cie nie ma tytu艂owego testu First Contentful Paint. Na moment, w kt贸rym tworzymy ten specjalistyczny poradnik, FCP nie jest jeszcze czynnikiem rankingowym Google, jednak niebawem tak si臋 stanie. Sk膮d o tym wiemy? 馃 A no np. st膮d:

First Contentful Paint [FCP] - Google PageSpeed Insight

Test First Contentful Paint na przyk艂adzie Google PageSpeed Insight.

Co prawda ko艂o testu strony pod k膮tem FCP nie znajdziesz obecnie聽niebieskiej flagi informuj膮cej o tym, 偶e nale偶y on do zakresu Core Web Vitals, ale Google ju偶 jaki艣 czas temu zapowiedzia艂o, 偶e pewnego dnia tak si臋 w艂a艣nie stanie. Z tego wzgl臋du czytaj膮c obecnie poradnik naszych ekspert贸w WordPress na temat First Contentful Paint na blogu dowiesz si臋 zabezpieczy膰 stron臋 przed spadkami SEO przygotowuj膮c si臋 na kolejne, nadchodz膮ce w 2023 roku aktualizacje Google.

A gdy tak si臋 stanie to lepiej, 偶eby Twoje Google Search Console nie wygl膮da艂o tak:

First Contentful Paint - Google Search Consol

Brak stron spe艂niaj膮cych wymagania Google w Search Console.

Poni偶ej dowiesz si臋 wi臋c czym jest First Contentful Paint, czyli pierwsze wyrenderowanie tre艣ci na stronie internetowej oraz jak poprawi膰 ten wynik w Google.

Czym jest First Contentful Paint [FCP]?

First Contentful Paint, cz臋sto nazywane jako po prostu FCP, to test w narz臋dziu Google PageSpeed Insight [na razie niewidoczny z poziomu Google Search Console]. Sprawdza on jak szybko od momentu za艂adowania strony internetowej pojawi si臋 na niej w ca艂o艣ci widoczny element w sekcji above the fold. Brzmi skomplikowanie? 馃え

No dobra, to od pocz膮tku. Above the fold to okre艣lenie pierwszego widocznego obszaru na stronie internetowej. B臋dzie on oczywi艣cie inny dla urz膮dze艅 mobilnych, tablet贸w, laptop贸w i komputer贸w, poniewa偶 zale偶ny jest od rozdzielczo艣ci i proporcji ekranu nawet w przypadku tej samej strony. W sekcji above the fold znajduje si臋 wi臋c wszystko to co widzimy na stronie internetowej zanim zaczniemy j膮 scrollowa膰 w d贸艂 馃憞 Wczytuj膮c stron臋 internetow膮 wszystkie elementy 艂aduj膮 si臋 w r贸偶nej, cz臋sto zale偶nej od siebie kolejno艣ci. Ten kt贸ry za艂aduje si臋 jako pierwszy okre艣lany jest w艂a艣nie jako First Contentful Paint. A jego czas za艂adowania uwzgl臋dniany jest w te艣cie Google PageSpeed Insight. Ufff, proste prawda? A pomy艣l, 偶e jeszcze nie przeszli艣my do znalezienia tego elementu oraz jego optymalizacji 馃く

Dlaczego Google w og贸le wzi臋艂o pod uwag臋 FCP jako istotny czynnik rankingowy w ocenie strony? Poniewa偶 uwa偶a [i s艂usznie], 偶e dop贸ki u偶ytkowniki widzi bia艂膮 stron臋 lub niepe艂nie za艂adowane na niej tre艣ci to tak naprawd臋 strona jest dla niego nieciekawa i bezu偶yteczna. To oczywi艣cie nasza lu藕na parafraza s艂贸w Google.

Dobra, mniej gadania, wi臋c pokazywania:

First Contentful Pain [FCP] - Google

FCP na przyk艂adzie wyszukiwarki Google.

Co si臋 tutaj zadzia艂o?

  1. Najpierw mieli艣my pust膮 stron臋
  2. Potem pojawi艂a si臋 pierwsza sekcja z tekstem i grafikami 馃敯
  3. Na sam koniec za艂adowa艂a si臋 reszta strony

Element oznaczony przez nas tym symbolem 馃敯 to w艂a艣nie moment, w kt贸rym Google zmierzy艂o FCP tej strony internetowej. Jest to wi臋c okresu czasu, w kt贸rym pierwsza widoczna na stronie sekcja rozpocz臋艂a i zako艅czy艂a pe艂ne renderowanie.

A teraz cyferki i konkrety w odniesieniu do First Contentful Paint:

  • Poni偶ej 1,8 sek.
  • Pomi臋dzy 1,8 a 2 sek.
  • Powy偶ej 2 sek.

A wi臋c otrzymujesz ocen臋聽Google 馃弳 w zale偶no艣ci od tego w jakim przedziale czasu 艂adowany jest element FCP na stronie internetowej. U nas wygl膮da to tak:

First Contentful Paint [FCP] - Wynik strony

Nasz wynik w Google PageSpeed Insight dla Core Web Vitals i FCP.

Je偶eli chcesz mie膰 taki sam wynik to napisz do nas 馃 a je偶eli chcesz zrobi膰 to samodzielnie to przeczytaj poni偶ej jak krok po kroku znale藕膰 element FCP na stronie, a nast臋pnie spr贸bowa膰 dokona膰 poprawy jego czasu 艂adowania.

Pami臋taj jednak, 偶e:

Wynik testu w narz臋dziu Google PageSpeed Insight mo偶e r贸偶ni膰 si臋 od tego co widzisz w Search Console.

A z tych dw贸ch narz臋dzi wa偶niejsze jest to drugie, dlatego je偶eli chcesz sprawdzi膰 jakie wyniki osi膮ga Twoja strona internetowa to dodaj j膮 do Google Search Console i poczekaj kilka dni na uzyskanie pierwszych danych. A potem zacznie si臋 zabawa 鈽猴笍

Optymalizacja First Contentful Paint krok po kroku

Poni偶ej znajdziesz praktyczne porady, kt贸re pomog膮 Ci znale藕膰 na swojej stronie internetowej element First Contentful Paint i poprawi膰 jego wynik w Google PageSpeed Insight. Musisz jednak wiedzie膰, 偶e zazwyczaj dzia艂ania te okre艣lane m.in. jako techniczne SEO, wymagaj膮 bardzo du偶ej wiedzy. Robisz je wi臋c na w艂asn膮 odpowiedzialno艣膰 i mo偶liwe, 偶e po przej艣ciu wszystkich krok贸w wynik First Contentful Paint zmieni si臋 nieznacznie lub nawet w og贸le. Warto jednak skorzysta膰 z naszych wskaz贸wek, poniewa偶 zawsze na koniec mo偶esz skorzysta膰 r贸wnie偶 z naszej pomocy.

Wszystkie dzia艂ania poka偶emy Ci na przyk艂adzie uwielbianej przez nas platformy WordPress 馃 No to zaczynajmy 馃弫

Krok 1. Wykonaj kopi臋 strony

Jak zawsze na pocz膮tek zach臋camy do wykonania kopi zapasowej strony internetowej, kt贸ra pomo偶e Ci w razie problem贸w na szybki powr贸t do poprzedniej dzia艂aj膮cej wersji. W przypadku platformy WordPress mo偶esz do tego celu skorzysta膰 z darmowego narz臋dzia opisanego przez nas w poradniku聽Kopie zapasowe WordPress [backup].

Gdy to zrobisz pora na drugi krok.

Krok 2. Zaktualizuj stron臋

Kolejnym wa偶nym krokiem w przypadku systemu CMS jest jego aktualizacja. Pozwoli Ci to zapewni膰 szybkie i bezpieczne dzia艂anie strony internetowej, a tak偶e nierzadko zgodno艣膰 z nowymi wymogami Google. Bardzo istotne jest tak偶e korzystanie z najnowszej wersji motywu [je偶eli zosta艂 on zakupiony], a tak偶e ostatniego wydania interpretatora PHP jak i wydajnego hostingu.

A skoro mowa o hostingu no to pora na krok trzeci.

Krok 3. Wybierz najlepszy hosting

Hosting ma ogromny wp艂yw na wydajno艣膰 strony. Ta z kolei wp艂ywa na wynik w Google PageSpeed Insight. Warto wi臋c wykorzysta膰 t臋 koneksj臋 i sprawdzi膰, czy aby na pewno Tw贸j hosting strony internetowej jest wystarczaj膮co wydajny. Twoja jak i nasza praca by艂aby na marne, gdyby okaza艂o si臋, 偶e serwer na kt贸rym stoi Twoja strona internetowa stanowi jej w膮skie gard艂o.

Dokonaj por贸wnania czytaj膮c nasz ranking na najlepszy hosting WordPress. Nie przejmuj si臋 tym, 偶e dotyczy on WordPress – polecane przez nas hostingi b臋d膮 znakomite dla wi臋kszo艣ci rodzaj贸w stron internetowych opartych tak偶e o inne systemy CMS.

Krok 4. Sprawd藕 dane od Google

O Twojej stronie internetowej w narz臋dziu Google Search Console. Chocia偶 nie znajdziesz tam na ten moment stron, kt贸re nie przesz艂y testu First Contentful Paint, to jednak istnieje du偶e prawdopodobie艅stwo, 偶e najwolniejsze adresy URL testowane pod k膮tem Largest Contentful Paint b臋d膮 mia艂y r贸wnie偶 problem z FCP.

Przejd藕 wi臋c do zak艂adki聽Podstawowe wska藕niki internetowe i sprawd藕, czy s膮 tam聽podstrony, kt贸re posiadaj膮 nisk膮 ocen臋 Google pod k膮tem LCS lub CLS.

First Contentful Paint - Podstawowe wska藕niki internetowe

Sprawdzanie jako艣ci adres贸w URL w Google Search Console.

Je偶eli tak to kliknij w jeden z element贸w na li艣cie, a nast臋pnie sprawd藕 jakie adresy URL powoduj膮 problem na stronie internetowej. Skopiuj i zapisz je, poniewa偶 przydadz膮 si臋 Ci one w kolejnym kroku.

Krok 5. Przetestuj adresy URL

Kt贸re wcze艣niej powodowa艂y problem. Zr贸b to za pomoc膮 narz臋dzia Google PageSpeed Insight, aby upewni膰 si臋, 偶e idziesz w dobrym kierunku. Sprawdzaj je wi臋cej jeden po drugim, a偶 natrafisz na podobno wynik:

First Contentful Paint [FCP] - Dane Google

S艂aby wynik First Contentful Paint w Google PageSpeed Insight.

Bingo 馃拋鈥嶁檪锔 teraz zachowaj ten adres URL do kolejnego testu.

Krok 6. 聽Sprawd藕 URL w Google Chrome

Otw贸rz problematyczny adres URL w Google Chrome i przetestuj go otwieraj膮c konsol臋 przegl膮darki. Przejd藕 do zak艂adki Performance i prze艂aduj聽stron臋 za pomoc膮 przycisku w lewym g贸rnym rogu konsoli.

Gdy zobaczysz widok jak poni偶ej najed藕 myszk膮 na element FCP:

First Contentful Paint [FCP] - Google Chrome

Testowanie FCP za pomoc膮 przegl膮darki Google Chrome.

Wskazany element to w艂a艣nie pierwsze wyrenderowanie tre艣ci zwane jako First Contetful Paint. Zostanie on tak偶e zaznaczony na stronie internetowej, dzi臋ki czemu masz pewno艣膰, 偶e dla tego widoku to w艂a艣nie ta sekcja odpowiada za s艂aby wynik FCP.

Pami臋taj jednak, 偶e:

Elementy FCP, FID, LCP i CLS mog膮 r贸偶ni膰 si臋 w zale偶no艣ci od uk艂adu, czy te偶 szablonu podstrony.

Nale偶y wi臋c dokona膰 takiego testu dla ca艂ej witryny internetowej, aby wsz臋dzie rozwi膮za膰 problem ze s艂abym wynikiem First Contentful Paint. Co dalej zrobi膰 z uzyskanymi informacjami? 鈽猴笍 Masz dwa wyj艣cia.

Krok 7. Spr贸buj poprawi膰 wynik FCP

Mo偶esz samodzielnie spr贸bowa膰 przyspieszy膰 艂adowanie elementu First Contentful Paint na stronie internetowej. Pomo偶e Ci w tym na pewno nasz poradnik聽Przyspieszanie WordPress, z kt贸rego dowiesz si臋 jak przyspieszy膰 stron臋 internetow膮 na przyk艂adzie platformy WordPress.

W poprawieniu wyniku FCP na pewno pomo偶e Ci wdro偶enie na stronie internetowej minifikacji CSS i JS oraz zapewnienie jak najlepszego hostingu. To co jednak ma kluczowy wp艂yw na First Contentful Paint to opisana wcze艣niej sekcja above the fold. Z tego powodu bardzo wa偶ne jest, aby wdro偶y膰 na stronie internetowej critical CSS o czym przeczytasz wi臋cej w tym poradniku聽Jak wyeliminowa膰 zasoby blokuj膮ce renderowanie.

Bardzo wa偶na jest tak偶e optymalizacja i op贸藕nienie 艂adowania zdj臋膰 tzw. lazy loading. Dotyczy to tak偶e skrypt贸w, kt贸re powinny by膰 jak najmniejsze, a ich wczytywanie powinno przebiega膰 asynchronicznie. Znacz膮cy wp艂yw na First Contentful Paint ma tak偶e stosowanie atrybut贸w takich jak preload, preconnect, dns-prefetch i prefetch. I to tak na prawd臋 ca艂y i wystarczaj膮cy zbi贸r porad od nas. Zastosuj si臋 do wszystkich z nich, a w 100% oka偶膮 si臋 one dla Ciebie pomocne w rozwi膮zaniu problemy=y ze s艂abym wynikiem FCP, ale i FID, LCP i CLS 馃

Drugie rozwi膮zanie, znacznie 艂atwiejsze to skorzystanie z naszej pomocy.

Popraw razem z nami First Contentful Paint

Istnieje spora szansa, 偶e wi臋kszo艣膰 opisanych tutaj rzeczy dla Ciebie to czarna 馃敭 magia. Poprawa First Contentful Paint to zadanie dla specjalist贸w, cho膰 mamy nadziej臋, 偶e powy偶sze wskaz贸wki przynajmniej cz臋艣ciowo pomog艂y Ci upora膰 si臋 z problemem. Zamiast jednak traci膰 nerwy napisz do nas, a my przygotujemy dla Ciebie wycen臋 optymalizacji strony pod k膮tem FCP jak i og贸lnie Core Web Vitals.

Doradzimy, pomo偶emy i ustalimy dalszy plan dzia艂ania 馃 do us艂yszenia wi臋c niebawem, czy to na blogu, czy to na emailu 馃枑

Jeste艣my by pomaga膰

Skorzystaj z natychmiastowej pomocy ekspert贸w WordPress. Wy艣lij nam wiadomo艣膰 za pomoc膮 formularza kontaktowego i opisz nam sw贸j problem lub to czego potrzebujesz.

Nazwa firmy
Sirius Pro

Dane firmy
ul. Grzybowska 87
00-844 Warszawa

Identyfikator
PL 9111958679

U偶ywamy pliki cookies w zakresie niezb臋dnym do prawid艂owego dzia艂ania strony oraz analityki Google.