Pierwsze wyrenderowanie treści (FCP) to jeden z 6 rodzajów danych śledzonych w sekcji Skuteczność w raporcie Lighthouse. Poszczególne dane rejestrują pewien aspekt szybkości wczytywania strony.
Lighthouse wyświetla FCP w sekundach:
Co mierzy FCP
FCP mierzy, ile czasu zajmuje przeglądarce wyrenderowanie pierwszego fragmentu treści DOM po przejściu użytkownika na Twoją stronę.
Obrazy, inne niż białe elementy <canvas> i pliki SVG na stronie są uznawane za zawartość DOM. Wszystkie elementy wewnątrz elementu iframe nie są uwzględniane.
Jak Lighthouse określa wynik FCP
Wynik FCP to porównanie czasu FCP strony i czasu FCP w przypadku prawdziwych witryn na podstawie danych z archiwum HTTP. Na przykład witryny działające w 99.centylu renderują FCP w ciągu około 1, 2 sekundy. Jeśli FCP witryny wynosi 1,2 sekundy, wynik FCP wynosi 99. Informacje o tym, jak ustalane są progi wyniku w Lighthouse, znajdziesz w artykule o określaniu wyników danych.
Tabela poniżej pokazuje, jak interpretować wynik FCP:
| Czas FCP (w sekundach) |
Oznaczanie kolorami |
|---|---|
| 0-1,8 | Zielony (szybko) |
| 1,8–3 | Pomarańczowy (umiarkowany) |
| Ponad 3 | Czerwony (wolno) |
Jak poprawić wynik FCP
Jednym z kwestii, które mają szczególne znaczenie w przypadku FCP, jest czas wczytywania czcionki. Przeczytaj posta Zadbaj o to, aby tekst był widoczny podczas wczytywania czcionki na stronie, aby dowiedzieć się, jak przyspieszyć wczytywanie czcionek.
Śledzenie FCP na urządzeniach rzeczywistych użytkowników
Aby dowiedzieć się, jak sprawdzić, kiedy funkcja FCP faktycznie występuje na urządzeniach użytkowników, wejdź na stronę Google Dane dotyczące wydajności ukierunkowane na użytkowników. W sekcji Śledzenie FP/FCP dowiesz się, jak uzyskać dostęp do danych FCP i przesyłać je do Google Analytics.
Więcej informacji o gromadzeniu danych o rzeczywistych użytkownikach znajdziesz w artykule Google o ocenianiu rzeczywistej wydajności wczytywania za pomocą nawigacji i pomiaru zasobów.
Jak poprawić ogólny wynik skuteczności
O ile nie masz konkretnego powodu, aby skupić się na konkretnym rodzaju danych, zwykle lepiej jest skupić się na poprawie ogólnego wyniku skuteczności.
W sekcji Możliwości w raporcie Lighthouse znajdziesz ulepszenia, które przyniosą największe korzyści Twojej stronie. Im większe możliwości, tym większy będzie wpływ na wynik skuteczności. Na przykład na poniższym zrzucie ekranu z Lighthouse widać, że największą poprawę można uzyskać, wyeliminując zasoby blokujące renderowanie:
Informacje o tym, jak wykorzystać możliwości zidentyfikowane w raporcie Lighthouse, znajdziesz na stronie docelowej audytów skuteczności.