Pierwsze wyrenderowanie treści (FCP) to jeden z 6 wskaźników śledzonych w raporcie Lighthouse w sekcji Skuteczność. Każdy z tych wskaźników odzwierciedla pewien aspekt szybkości wczytywania strony.
Lighthouse wyświetla FCP w sekundach:
Co mierzy FCP
FCP mierzy czas potrzebny przeglądarce na wyrenderowanie pierwszego elementu zawartości DOM po przejściu użytkownika na Twoją stronę.
Obrazy, elementy <canvas> inne niż białe i pliki SVG na stronie są uznawane za zawartość DOM; wszystko, co znajduje się w ramce iFrame, nie jest uwzględniane.
Jak Lighthouse określa wynik FCP
Wynik FCP to porównanie czasu FCP Twojej strony z czasami FCP w rzeczywistych witrynach na podstawie danych z archiwum HTTP. Na przykład witryny, które należą do 99.procentyla, renderują FCP w około 1,2 sekundy. Jeśli czas FCP Twojej witryny wynosi 1,2 sekundy, Twój wynik FCP wynosi 99. Aby dowiedzieć się, jak ustawiane są progi wyników Lighthouse, przeczytaj artykuł Jak określamy wyniki danych.
Z tej tabeli dowiesz się, jak interpretować wynik dotyczący zgodności z zasadami FCP:
| Czas FCP (w sekundach) |
Kodowanie kolorami |
|---|---|
| 0–1,8 | Zielony (szybki) |
| 1.8–3 | Pomarańczowy (średni) |
| Ponad 3 | Czerwony (wolny) |
Jak poprawić wynik w testach FCP
Jednym z problemów, które są szczególnie ważne w przypadku FCP, jest czas wczytywania czcionek. Aby dowiedzieć się, jak przyspieszyć wczytywanie czcionek, przeczytaj artykuł Zapewnij widoczność tekstu podczas ładowania czcionek internetowych.
Śledzenie FCP na urządzeniach rzeczywistych użytkowników
Aby dowiedzieć się, jak mierzyć czas wystąpienia FCP na urządzeniach użytkowników, zapoznaj się z artykułem Google Wskaźniki wydajności z uwzględnieniem użytkownika. W sekcji Śledzenie FP/FCP opisano, jak uzyskać dostęp do danych FCP za pomocą kodu i przesłać je do Google Analytics.
Więcej informacji o zbieraniu danych o rzeczywistych użytkownikach znajdziesz w artykule Google Ocena rzeczywistej szybkości wczytywania strony za pomocą interfejsów Navigation Timing i Resources Timing.
Jak poprawić ogólny wynik skuteczności
Jeśli nie masz konkretnego powodu, aby skupić się na określonych danych, lepiej jest skupić się na poprawie ogólnego wyniku skuteczności.
W sekcji Diagnostyka raportu Lighthouse określ, które ulepszenia będą najbardziej wartościowe dla Twojej strony. Im większa możliwość, tym większy wpływ na wynik skuteczności. Na przykład zrzut ekranu Lighthouse poniżej pokazuje, że usunięcie zasobów blokujących renderowanie przyniesie największe korzyści:
Aby dowiedzieć się, jak wykorzystać możliwości wskazane w raporcie Lighthouse, zapoznaj się z audytami wydajności.