Co to jest Largest Contentful Paint (LCP) oraz dlaczego warto zoptymalizować LCP?

Largest Contentful Paint (Największe wyrenderowanie treści) jest jednym z trzech podstawowych wskaźników Google Core Web Vitals, który pokazuje jak szybko dostarczany, jest użytkownikowi największy element na stronie.

Od maja 2021 roku wskaźniki internetowe zaczęły mieć większy wpływ na pozycję wyszukiwanej frazy w internecie dlatego, jeśli zależy nam na większej liczbie użytkowników odwiedzających naszą stronę, powinniśmy zainteresować się czy wskaźniki prędkości na naszej stronie są prawidłowe oraz jak je zoptymalizować.

Ile powinien wynosić Largest Contentful Paint?

Według Google wynik LCP strony internetowej powinien wynosić maksymalnie 2,5 sekundy. Dobry wynik largest contentful paint przekłada się na lepszą konwersję, czyli większą szansę, że potencjalny odbiorca pozostanie na naszej stronie. Warto dodać, że ocenie LCP poddawany jest tylko pierwszy ekran, który wyświetla się po wejściu na stronę.

Powiązane metryki z Largest Contentful Paint

LCP odgrywa bardzo ważną rolę wśród wskaźników Google Core Web Vitals, lecz istnieją również inne metryki, które również są ważnymi czynnikami rankingowymi google.

• FCP (First Contentful Paint) – Czas potrzebny do pierwszego wyrenderowanego contentu (obrazki, treści lub filmy) na stronie.
• TBT (Total Blocking Time) – Czas wyrażony w milisekundach między pierwszym wyrenderowaniem treści a czasem do pełnej interaktywności.
• CLS (Cumulative Layout Shift) – Metryka sprawdzająca stabilność wizualną układu strony.
• TTI (Time to Interactive) – Czas do pełnej interaktywności to czas, po którym strona staje się w pełni interaktywna.

Jak sprawdzić ile wynosi LCP na mojej stronie?

Do pomiaru stosujemy narzędzia, które przedstawiają nam wyniki w postaci danych zgromadzonych oraz danych laboratoryjnych. Dane zgromadzone to takie, które przedstawiają rzeczywiste informacje odwiedzających użytkowników naszą stroną zaś dane laboratoryjne to symulacja odwiedzin użytkownika.

Pomiar najlepiej jest sprawdzać, sugerując się danymi zgromadzonymi, lecz jeśli nasza strona jest krótko zaindeksowana lub nie mamy zbyt wielu odwiedzin, zostaje nam sugerować się danymi laboratoryjnymi.

Google Search Console

Google Search Console to narzędzie, które pozwala na monitorowanie i analizowanie jakości witryny internetowej pod kątem wyszukiwarek. W ramach Google Search Console można znaleźć wiele przydatnych wskaźników, które pozwalają na ocenę jakości strony i wskazują na potencjalne problemy, które należy rozwiązać.

W przypadku largest contentful paint informację o naszej stronie możemy znaleźć w zakładce „Podstawowe wskaźniki internetowe”.

Google PageSpeed Insights

Najpopularniejsze narzędzie od Google przedstawiające zarówno dane rzeczywiste, jak i symulację. Dodatkowo PageSpeed Insights przedstawia wskazówki dotyczące optymalizacji strony WWW. Jest to program w zupełności wystarczający do wyciągnięcia wniosków, lecz możemy również skorzystać z innych narzędzi.

Dane zgromadzone:

Dane laboratoryjne:

Wskazówki optymalizacyjne:

Google Chrome Devtools network

Najlepsze i zarazem najbardziej zaawansowane narzędzie. Pozwala sprawdzić wszystkie żądania, czas odpowiedzi serwera oraz pobrania treści. W łatwy sposób możemy określić jakie pliki przyczyniają się do długiego wczytywania strony. Dodatkowo możemy, ograniczyć łączę internetowe, by sprawdzić jak zachowuje się strona dla użytkowników z wolniejszym internetem. Aby uruchomić narzędzie w przeglądarce Google Chrome, wystarczy nacisnąć prawy przycisk myszki, z listy wybrać „zbadaj”, a następnie przejść do zakładki „sieć”.

GTmetrix

GTmetrix podobnie jak poprzednie narzędzie symuluję odwiedziny użytkowników, lecz w tym narzędziu możemy wybrać czy test ma zostać przeprowadzony z Wielkiej Brytanii, USA, czy Chin.

Largest Contentful Paint – Jak go poprawić?

Przyczyn wysokiego LCP może być wiele, lecz postaram się przedstawić te najczęściej spotykane.

Zaczynając od początku, powinniśmy sprawdzić, na jakim hostingu mamy postawioną stronę. Hosting odgrywa bardzo ważną rolę, a nie trzeba wcale płacić milionów za dobre usługi. Zachęcam do zapoznania się z recenzją SeoHost, gdzie czeka rabat dla moich czytelników. W mojej opinii jest to najlepszy hosting w przystępnej cenie.

Korzystanie z możliwości serwera

W panelu zarządzania serwerem (direct admin) mamy wiele dostępnych funkcji przyśpieszenia naszej strony, a o to jedne z nich:

• Wersja PHP — warto sprawdzić, jaką mamy ustawioną wersję PHP, najlepsza wersja będzie najnowsza, lecz nie polecam korzystania z wersji beta. Dodatkowo po zmienieniu wersji PHP zalecam przetestowania strony czy nic się nie wysypało.
• Serwer Redis — Object cache przyśpieszający działanie serwera.
• Autorskie rozwiązania optymalizacyjne — czasami hostingi oferują własne rozwiązania optymalizujące dostępne w panelu.
• Rozszerzenia PHP — Zazwyczaj hostingi same wybierają najlepsze rozszerzenia, lecz niektóre pozwalają na wybór według własnych preferencji. W ustawieniach PHP mamy dostępne dodatkowe opcje rozszerzeń takich jak np. Brotli czy Gzip.

Optymalizacja zdjęć

Najczęstszą przyczyną długiego wczytywania stron są wysokiej jakości zdjęcia w dużych rozdzielczościach.

Przykładowe rozwiązania optymalizacji zdjęć:

• Kompresja zdjęć za pomocą programów graficznych np. PhotoShop lub konwerterów jpg/png online.
• Nowsze formaty plików graficznych — kompresja jpg/png na WebP i AVIF za pomocą konwerterów online. Warto pamiętać, że strona również musi oferować pliki graficzne w standardowym formacie. Nie każda przeglądarka może obsłużyć nowszy format.
• Optymalizacja rozdzielczości obrazów — dopasowanie rozdzielczości zdjęcia do rozdzielczości wyświetlanej na monitorze np. logo strony jest wyświetlane w rozdzielczości 150x150px, a jego rzeczywisty wymiar to 3000x3000px. W tej sytuacji zalecam skorzystanie z HTML, by strona oferowała jedno zdjęcie w wielu rozdzielczościach i dobierała najlepsze zdjęcie w zależności czy jest to telefon, czy telewizor.
• Opóźnione ładowanie zdjęć — w pierwszej kolejności powinno ładować się zdjęcie gorszej jakości, loader gif czy nawet białe pole. Docelowy obrazek powinien ładować się, dopiero gdy powinien być widoczny na monitorze.

Optymalizacja skryptów oraz arkuszy stylów

• Minifikacja CSS, HTML, JS
• Ograniczenie ilości żądań (połączenie plików JS, CSS)
• Usunięcie nieużywanych stylów/skryptów

Pozostałe możliwe przyczyny wysokiego LCP:

• Długi czas trwania animacji
• Nadmierna ilość fontów
• Fonty powinny ładować się asynchronicznie z lokalnego serwera.

Largest Contentful Paint, a SEO

Z każdym dniem Google stawia coraz większy nacisk nie tylko na dobrej jakości treści, ale i również prędkość czy bezpieczeństwo strony. Powinniśmy bardzo poważnie się zastanowić czy nasza strona nie potrzebuje audytu zrobionego przez specjalistów.