First Contentful Paint (FCP)

Philip Walton

Obsługa przeglądarek

  • 60
  • 79
  • 84
  • 14.1

Źródło

Pierwsze wyrenderowanie treści (FCP) to ważny wskaźnik skupiony na użytkownikach, który służy do pomiaru widocznej szybkości wczytywania. Oznacza to pierwszy punkt na osi czasu wczytywania strony, w którym użytkownik może zobaczyć dowolny element ekranu. Szybkie FCP zapewnia użytkownikowi pewność, że coś się dzieje.

FCP to czas od pierwszego otwarcia strony przez użytkownika do momentu wyrenderowania dowolnej części jej treści na ekranie. W przypadku tego wskaźnika „treść” odnosi się do tekstu, obrazów (w tym obrazów tła), elementów <svg> lub elementów <canvas> innych niż białe.

Oś czasu FCP w witrynie google.com
Na tej osi czasu wczytywania FCP odbywa się w drugiej klatce, ponieważ to wtedy na ekranie renderują się pierwsze elementy tekstowe i graficzne.

Po wyrenderowaniu pierwszego elementu treści nie wszystkie treści są renderowane. To ważna różnica między FCP a największym wyrenderowaniem treści (LCP), która mierzy, kiedy zakończy się wczytywanie głównej zawartości strony.

Jaki jest dobry wynik FCP?

Aby użytkownicy byli zadowoleni, witryna musi mieć FCP o długości maksymalnie 1,8 sekundy. Aby mieć pewność, że w przypadku większości użytkowników osiągasz ten cel, dobrym progiem jest 75 centyl wczytywania stron w podziale na urządzenia mobilne i komputery.

Dobre wartości FCP to 1,8 sekundy lub mniej, niskie wartości – powyżej 3,0 s, a wszystkie pozostałe wymagają poprawy
Dobre wartości FCP wynoszą maksymalnie 1,8 sekundy. Niskie wartości są dłuższe niż 3,0 sekundy.

Jak mierzyć FCP

FCP można mierzyć w module lub w terenie. Są one dostępne w tych narzędziach:

Narzędzia terenowe

Narzędzia laboratoryjne

Mierz FCP w JavaScript

Aby mierzyć FCP w JavaScript, użyj Paint Timing API. Z przykładu poniżej dowiesz się, jak utworzyć PerformanceObserver, który nasłuchuje wpisu paint o nazwie first-contentful-paint i rejestruje go w konsoli.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'paint', buffered: true});

W tym przykładzie zarejestrowany wpis first-contentful-paint informuje, kiedy wyrenderowano pierwszy element treści. Jednak w niektórych przypadkach ten wpis nie nadaje się do pomiaru FCP.

W tej sekcji opisujemy różnice między danymi w raportach interfejsu API a sposobem obliczania tych danych.

Różnice między danymi a interfejsem API

  • W przypadku stron wczytywanych na karcie w tle interfejs API wysyła wpis first-contentful-paint, ale te strony należy zignorować przy obliczaniu FCP. Czas pierwszego wyrenderowania jest brany pod uwagę tylko wtedy, gdy strona przez cały czas znajdowała się na pierwszym planie.
  • Interfejs API nie zgłasza wpisów first-contentful-paint, gdy strona jest przywracana z pamięci podręcznej stanu strony internetowej, ale w takich przypadkach należy mierzyć wartość FCP, ponieważ użytkownicy postrzegają je jako odrębne wizyty na stronie.
  • Interfejs API może nie zgłaszać czasu renderowania z elementów iframe z innych domen, ale aby prawidłowo mierzyć FCP, musisz wziąć pod uwagę wszystkie klatki. Ramki podrzędne mogą używać interfejsu API do zgłaszania czasu renderowania do ramki nadrzędnej na potrzeby agregacji.
  • Interfejs API mierzy FCP od początku nawigacji, ale w przypadku wstępnie renderowanych stron należy mierzyć wartość FCP od activationStart, ponieważ odpowiada to czasowi FCP zarejestrowanemu przez użytkownika.

Zamiast zapamiętywać wszystkie te subtelne różnice, deweloperzy mogą użyć biblioteki JavaScript web-vitals do pomiaru FCP, która w miarę możliwości eliminuje te różnice (z wyjątkiem elementów iframe):

import {onFCP} from 'web-vitals';

// Measure and log FCP as soon as it's available.
onFCP(console.log);

Pełny przykład pomiaru FCP w JavaScript znajdziesz w kodzie źródłowym onFCP().

Jak poprawić FCP

Aby dowiedzieć się, jak poprawić FCP w przypadku konkretnej witryny, przeprowadź audyt wydajności w Lighthouse i zwróć uwagę na konkretne możliwości i diagnostykę sugerowaną w aukcji.

Aby dowiedzieć się, jak ogólnie poprawić FCP (w dowolnej witrynie), zapoznaj się z tymi przewodnikami po wydajności:

Historia zmian

Czasami błędy wykrywane są w interfejsach API używanych do pomiaru danych, a niekiedy w definicjach samych wskaźników. Dlatego czasem trzeba wprowadzać zmiany, które mogą się pojawiać jako ulepszenia lub regresje w wewnętrznych raportach i panelach.

Aby Ci w tym pomóc, wszystkie zmiany w implementacji lub definicji tych danych są opisane w tej historii zmian.

Jeśli chcesz podzielić się opinią na temat tych danych, umieść ją w grupie dyskusyjnej Google web-vitals-feedback.