Czym jest metryka Largest Contentful Paint?
LCP, jako podstawowa metryka Core Web Vitals, mierzy wydajność ładowania strony internetowej. Jest to jeden z trzech podstawowych wskaźników internetowych, razem z First Input Delay (FID) oraz Cumulative Layout Shift (CLS).
Zadaniem LCP jest pomiar czasu dla załadowania największego pojedynczego elementu na stronie internetowej. Takim największym elementem może być zarówno obraz, jak i wideo czy blok tekstowy. Jako dobry wynik LCP uznajemy 2,5 sekundy lub mniej. Z kolei słaby wynik to wszystko na równi lub więcej niż 4 sekund.
Za tymi granicznymi wartościami nie stoi żadna skomplikowana fizyka kwantowa. Google analizując astronomiczne liczby podstron w ramach wyszukiwań internetowych ustaliło, że wszystko to co załaduje się do 2,5 sekund sprawia wrażenie dobrego, natomiast 4 sekundy to już o tyle za długo, że userzy tracą zainteresowanie. Z kolei niski czas załadowania największego pojedynczego elementu serwisu zapewnia dobre wrażenia użytkownika i prowadzi do wzrostu endorfin na tle dalszej eksploracji serwisu oraz późniejszego dokonania szeroko zdefiniowanej konwersji.
Jakie czynniki wpływają na wysoki wskaźnik LCP?
Na czas potrzebny do załadowania największego zasobu wpływa wiele czynników. Zebraliśmy blisko 12 najczęstszych powodów, przez które Twój serwis może być niedostatecznie zoptymalizowany.
- Długi czas odpowiedzi serwera. Jeśli Twój serwer wolno odpowiada na zapytania może skutkować to dłuższym czasem załadowania strony.
- Niska prędkość sieci. Wolne połączenie sieciowe stanowczo wpływa na czas ładowania strony.
- Duża liczba zasobów. Im większy serwis tym dłuższe ładowanie kluczowych zasobów.
- Nieoptymalne grafiki. Niewłaściwa optymalizacja grafik może mieć kluczowe znaczenie dla wysokiego LCP.
- Blokowanie JavaScript. Często nawet nieświadomie JavaScript może powodować blokowanie renderowania niektórych z elementów Twojej strony.
- CSS blokujący renderowanie. Analogicznie jak dla JavaScript, CSS może blokować renderowanie Twojej strony. Równie analogicznie wpłynie to na zwiększenie czasu ładowania strony.
- Zasoby stron trzecich. Jeśli serwis opiera się na zasobach z witryn stron trzecich, ładowanie może potrwać dłużej.
- Używanie zbędnych wtyczek. Jeśli korzystasz z wtyczek, które nie są potrzebne to pamiętaj, że mogą one dodać niepotrzebnej wagi do Twojej strony, a w konsekwencji spowolnić czas ładowania.
- Nieaktualna wersja przeglądarki. Używanie przestarzałej przeglądarki, może spowodować, że ładowanie strony potrwa dłużej.
- Buforowanie. Kiedy Twoje strony nie są odpowiednio buforowane, wymuszają na userach ponowne ładowanie za każdym razem, gdy użytkownik je odwiedza.
- Brak wykorzystania Sieci Dostarczania Treści (CDN). Nie korzystając z CDN, Twoje zasoby ładowane są wyłącznie z jednego serwera.
- Nadmierne wykorzystanie JavaScript stanowczo opóźnia renderowanie Twojej strony.
Jak zmierzyć wartości LCP w obrębie serwisu?
Istnieje wiele sposobów mierzenia LCP. Jedną z popularnych metod jest użycie narzędzia Google Chrome Lighthouse. Lighthouse to narzędzie typu open-source, które pomoże Ci zmierzyć wydajność Twojej strony internetowej. Aby zmierzyć LCP za pomocą Lighthouse, najpierw otwórz narzędzie (wystarczy, że w dowolnym miejscu na stronie przycisniesz PPM i kolejno wybierzesz funkcję “Zbadaj”). i wybierz zakładkę “Performance”. Następnie kliknij przycisk “Generate report”. Lighthouse wygeneruje raport szczegółowo opisując wydajność witryny, a w tym i czas LCP.
Obecnie dostępny jest również szereg płatnych narzędzi, które można wykorzystać na potrzeby pomiaru LCP. Jednym z takich narzędzi jest GTmetrix. GtMetrix to narzędzie wydajności witryny, które zapewnia szczegółowe raporty dotyczące wydajności witryny. Aby skorzystać z GTMetrix wystarczy wprowadzić adres URL strony, którą chcemy przetestować i nacisnąć przycisk “Test your site”. Po zakończeniu testu otrzymasz raport równie szczegółowy, co ten wygenerowany z rozwiązania typu open-source, czyli Lighthouse.
Co zrobić aby wyeliminować problemy związane z LCP?
Jednym ze sposobów na poprawę wyników LCP jest optymalizacja obrazów. Nawet prosta zmiana rozmiaru pliku graficznego i użycie odpowiedniego tekstu alternatywnego może mieć pozytywne przełożenie na wyniki LCP.
Jeszcze innym sposobem zoptymalizowania wskaźnika Largest Contentful Paint jest użycie sieci dostarczania treści (tzw. CDN). Dzięki CDN poprawisz wydajność Twojej witryny, odpowiednio buforując jej zawartość i dostarczając ją userom z serwera, który znajduje się najbliżej ich bieżącej lokalizacji.
Dodatkowo, warto rozważyć żmudne, jednak w ogólnym rozrachunku opłacalne rozwiązanie i spróbować wpłynąć na wydajność dzięki minifkacji kodów HTML, CSS czy JavaScript. Zrobisz to dzięki różnym zewnętrznym narzędziom, np. Google Closure Compiler.
