3 sprawdzone sposoby na poprawę Largest Contentful Paint (LCP)

Jednym z czynników, który wpływa na wygodę korzystania ze strony, jest to, jak szybko jej główna treść zostanie wyrenderowana na ekranie. Z tym zjawiskiem powiązana jest jedna z metryk Core Web Vitals, czyli Largest Contentful Paint (LCP). W tym artykule dowiesz się, czym ona jest i jak ją poprawić.

LCP – czym jest?

Largest Contentful Paint mierzy, ile czasu zajmuje załadowanie głównej treści danej strony internetowej. Dopóki LCP nie stanie się widoczne, użytkownik nie widzi praktycznie niczego.

LCP to zazwyczaj obraz, blok tekstu, video albo animacja. Element ten zawsze znajduje się above the fold – jest od razu widoczny po wejściu na stronę bez konieczności jej przewijania. W zależności od tego, czy mowa o urządzeniach mobilnych czy desktop, Largest Contentful Paint może dotyczyć innej zawartości.

Od maja 2021 roku Core Web Vitals są brane pod uwagę podczas pozycjonowania, dlatego LCP to czynnik rankingowy stron. Według zaleceń Google czas ładowania Largest Contentful Paint powinien być krótszy niż 2,5 sekundy. Jeśli realizacja tego procesu przekracza 4 sekundy, należy koniecznie go poprawić.

Omówmy zatem to, jak możesz poprawić LCP w przypadku swojej strony.

1. Ulepsz szybkość odpowiedzi serwera

Załóżmy, że przeglądarka kieruje żądanie do serwera, jednak przesłanie wymaganej treści zajmuje po jego stronie zbyt dużo czasu. Jako że klient nie otrzymuje contentu wystarczająco szybko, potrzeba więcej czasu, aby cokolwiek zostało wyrenderowane na ekranie. Cierpi na tym sama prędkość ładowania strony, a więc i LCP.

Problem ten można naprawić dzięki optymalizacji wskaźnika Time to First Byte, korzystaniu z CDN (Content Delivery Network) i jak najszybszemu nawiązywaniu połączeń ze skryptami podmiotów trzecich.

2. Popraw kod JavaScript

Przeglądarka zgłasza żądanie i pobiera treść z serwera. Aby ją jednak wyrenderować musi najpierw przeanalizować kod HTML strony i sprawić, by był czytelny w strukturze DOM-u (Document Object Model) witryny.

Czy treść może już zostać wyrenderowana? Tak, o ile proces ten nie zostanie powstrzymany przez pewne skrypty lub arkusze określane jako zasoby blokujące renderowanie. Sprawiają one, że parsowanie danych jest opóźnione. Wydłuża to załadowanie potrzebnych treści i negatywnie wpływa na LCP.

Aby zaradzić temu problemowi wystarczy usunąć niewykorzystywane pliki JavaScript lub opóźnić ich adresowanie.

3. Zoptymalizuj zasoby strony

LCP odnosi się do dużych zasobów strony jak bloki tekstu, obrazy, czy filmy, które znajdują się above the fold. Warto dlatego zoptymalizować ich rozmiary. Grafikę da się łatwo skompresować, znacznie pomniejszając jej wagę bez utraty jakości. Podobne „odchudzanie” da się także zastosować w przypadku plików CSS, HTML i JavaScript.

Możesz także spróbować ograniczyć ilość contentu zawartego above the fold, aby sekcja ta była łatwiejsza w załadowaniu.

Poprawa LCP – podsumowanie

Zastosuj się do powyższych wskazówek, a na pewno poprawisz LCP swojej strony. Dzięki temu będzie wygodniej się z niej korzystać, co na pewno przełoży się na wyższe pozycje w Google.

Artykuły, które mogą cię zainteresować

• Cumulative Layout Shift (CLS)
• First Input Delay (FID)
• Core Web Vitals