Od czasu wprowadzenia Lighthouse pojawiły się nowe parametry związane z szybkością strony. Jednym z najważniejszych z tych parametrów jest First Contentful Paint (FCP). W wersji Lighthouse 10, obowiązującej od czerwca 2024 r., wpływ FCP na ogólny wynik wynosi 10%.
Aby przyjąć i zrozumieć FCP jako miernik, konieczne jest najpierw zbadanie kryjącej się za nim psychologii. Koncepcja jest podobna do lustra instalowane w windach:
Podsumowując w skrócie: W pierwszej połowie XX wieku znacznie wzrosło wykorzystanie wind w wysokich budynkach, ale systemy wind były prymitywne w porównaniu z obecnymi. Dlatego pojawił się pomysł zamontowania w windach luster, które sprawią, że czas spędzony w windzie będzie odczuwalny krócej.
Wracając do naszego tematu: Punktem, który percepcyjnie powoduje oczekiwanie podczas ładowania podczas próby uzyskania dostępu do strony, jest FCP. Definicja First Contentful Paint to czas potrzebny użytkownikowi na wyświetlenie pierwszego tekstu, obrazu, innego niż białe płótno itp.. Jednostką FCP są sekundy.
W Lighthouse skala kolorów FCP jest określana w następujący sposób:
- 0-2 sekundy: Zielony => Szybki
- 2-4 sekundy: Pomarańczowy => wymaga poprawy
- 4+ sekund: Czerwony => Wolno
Według danych HTTP Archive liczba witryn, które można uwzględnić szybko wynosi 25%, a 50% istniejących witryn jest klasyfikowanych jako powolne.
Co można zrobić, aby ulepszyć FCP?
Skróć czas odpowiedzi serwera
Ogólnie można to interpretować jako konieczne ulepszenia serwera i oprogramowania po stronie serwera. Aby wymienić problemy, które negatywnie wpływają na czas odpowiedzi serwera:
- Problemem może być współdzielenie serwera, konfiguracja (tj. ustawienia serwera) i zasoby serwera. Pojemność serwera powinna zostać zwiększona w zależności od ruchu. W niektórych przypadkach źle napisane zapytania do bazy danych i bardzo złożone komponenty oprogramowania mogą poważnie wpłynąć na czas odpowiedzi serwera.
- Niekorzystanie z CDN (Content Delivery Network) może powodować opóźnienia w dostępie do treści, wpływając na FCP. W miarę wzrostu rozmiaru zawartości, na przykład, jeśli próbuje się wywołać duży animowany plik GIF lub wideo bez CDN, a główny serwer znajduje się na innym kontynencie, może być konieczne rozważenie rozwiązań CDN w celu rozwiązania problemu FCP.
- Nie udostępnianie treści statycznych z właściwymi i spójnymi zasadami pamięci podręcznej może spowodować przeciążenie niepotrzebnie obciąża Twój serwer w miarę wzrostu liczby odwiedzających. Na przykład, jeśli nie będziesz przechowywać swojego logo w długoterminowej pamięci podręcznej podczas ładowania go na każdej stronie, niepotrzebnie zaszkodzisz czasowi odpowiedzi serwera.
- Niepotrzebne przekierowania strony podczas uzyskiwania dostępu do strony może niepotrzebnie wpłynąć na Twój FCP.
Na przykład w przeszłości istniały takie konfiguracje: gdy użytkownik chciał wejść na witrynę, następowało przekierowanie HTTP na HTTPS, a jeśli było to urządzenie mobilne, przekierowanie HTTPS na telefon komórkowy (np. https:// www na https://m), a jeśli strona została usunięta i przekierowana w inne miejsce z kodem 301, wydawało się, że użytkownik jest przekazywany od biurka do biurka w urzędzie skarbowym. To skrajny przykład pozwalający lepiej zrozumieć, ale jeśli przekierujesz stronę na inny adres URL za pomocą przekierowania 301, a następnie przekierujesz tę stronę na inną za pomocą przekierowania 301, możesz dokonać tej samej nielogicznej konfiguracji.
- Jeśli ty nie używaj wstępnego łączenia ani wstępnego pobierania DNS prefiksów podczas łączenia się z usługami stron trzecich i łączenia się z wieloma usługami stron trzecich, nie robisz nic korzystnego dla FCP.
Zmniejsz zasoby blokujące renderowanie
Muszę przyznać, że rozwiązanie tego pojedynczego punktu zapisanego jako pozycja może zająć miesiące.
Aby to osiągnąć, istnieje metoda rozwiązania, w której wszyscy JS, CSS i podobne zasoby, które blokują renderowanie strony, są ładowane po utworzeniu strony, ale początkowo widoczna część witryny jest ładowana jako pierwsza podczas ładowania witryny. Jednak aby to zrobić, należy zbadać wszystkie zasoby JS, CSS i podobne, a także oddzielić najbardziej czasochłonne procesy. Ponadto korzystanie z jak najmniejszej liczby usług stron trzecich pomaga zoptymalizować FCP.
