Czym jest Largest Contentful Paint (LCP)

Czym jest Largest Contentful Paint (LCP)?

Użytkownicy chcą, aby najważniejsze elementy przeglądanej przez nich strony były załadowywane jak najszybciej. Jak zatem dokładnie mierzyć i monitorować to zjawisko? W tym celu Google wprowadziło i w ostatnim czasie położyło większy nacisk na Largest Contentful Paint – LCP. W tym artykule dokładniej przyjrzymy się tej metryce.

Largest Contentful Paint – czym jest?

Largest Contentful Paint (Największe Wyrenderowanie Treści) to jeden z 3 głównych elementów Core Web Vitals, czyli podstawowych wskaźników internetowych. Od maja 2021 roku są one już czynnikiem rankingowym Google.

Metryka LCP raportuje czas renderowania największej zawartości znajdującej się w sekcji określanej jako viewport, czyli obszarze okna przeglądarki, w którym dochodzi do renderowania treści strony internetowej.

Viewport zazwyczaj nie przyjmuje tego samego rozmiaru, co renderowana strona, gdyż przeglądarki zapewniają paski przewijania, które pozwalają użytkownikowi wybrać, kiedy chce dotrzeć do pozostałego contentu. W efekcie w kontekście LCP brane są pod uwagę takie elementy jak obraz, animacja, video lub blok tekstu, które znajdują się above the fold, czyli w tej sekcji witryny, która jest od razu widoczna bez scrollowania.

Należy też pamiętać, że LCP jest mierzone z uwzględnieniem momentu, od którego zaczyna ładowanie się strony. W zależności od tego, czy mowa o urządzeniach mobilnych lub desktop, Largest Contentful Paint może dotyczyć różnych elementów witryny i przyjmować w rezultacie inne wartości.

LCP – jak ustalany jest rozmiar głównego elementu?

Wielkość elementu traktowanego jako Largest Contentful Paint jest zazwyczaj rozmiarem widocznym dla użytkownika we viewport’cie.

Od tej reguły istnieje kilka następujących wyjątków:

  • Element wykracza poza viewport
  • Jakakolwiek część elementu jest przycięta
  • Jakakolwiek część elementu jest za duża, aby mieścić się w przydzielonym mu bloku tekstu

Tego typu części elementu nie są wliczane w jego ostateczny rozmiar.

W przypadku obrazów, których wielkość została zmieniona w stosunku do ich rozmiaru rzeczywistego, do pomiarów jest wybierany ich obecny, widoczny rozmiar lub ten rzeczywisty (w zależności od tego, który jest mniejszy).

Przykładowo w przypadku obrazów, których wielkość została znacznie zmniejszona w stosunku do ich oryginalnej wartości, w analizie będzie brany pod uwagę właśnie ów mniejszy rozmiar.

Jeśli jednak mowa o obrazach, które zostały rozciągnięte i powiększone w porównaniu do oryginału, w pomiarach będą analizowane ich niezmienione, rzeczywiste rozmiary.

Dla wszystkich elementów marginesy, wypełnienia lub obramowania zastosowane przez CSS nie są brane pod uwagę.

Largest Contentful Paint – powiązane metryki

Istnieją oczywiście inne powiązane metryki, które zostały stworzone z myślą o podobnych aspektach funkcjonowania strony. Nie skupiały się one jednak na całokształcie procesu ładowania głównych treści, dlatego Google postanowiło wprowadzić i kłaść nacisk na LCP.

Przykładowo Load oraz DOMContentLoaded dotyczą głównie wstępnych treści HTML, które nie zawsze odpowiadają temu, co użytkownik widzi na ekranie.

Z kolei nowsze First Contentful Paint (FCP), wychwytuje tylko sam początek procesu ładowania. Jeśli strona pokazuje wtedy ekran startowy lub wyświetla wskaźnik ładowania, to taki moment nie jest zbyt istotny dla użytkownika.

Swego czasu w Google Lighthouse wprowadzono takie metryki jak First Meaningful Paint (FMP) i Speed Index (SI), które miały usprawnić pomiar wstępnego procesu ładowania strony. Obie są jednak złożone, trudne do wyjaśnienia i często generują błędne wartości. W rezultacie First Meaningful Paint zostało wycofane w nowszych wersjach Lighthouse, a na Speed Index nie jest kładziony aż taki nacisk.

LCP – jak go poprawić?

Istnieje kilka sprawdzonych sposobów na poprawę omawianej metryki:

1. Popraw zawartość strony

Na LCP największy wpływ mają „ciężkie” zasoby jak obrazy, filmy oraz duże bloki tekstu, które znajdują się above the fold. Postaraj się zatem je zoptymalizować. Zdjęcia można łatwo skompresować, zmniejszając ich rozmiar nawet kilkukrotnie bez praktycznie żadnej utraty jakości.

Innym wyjściem jest zmniejszenie ilości treści zawartych w sekcji above the fold, aby była ona łatwiejsza w załadowaniu.

2. Korzystaj z dobrego hostingu

Świetnie zoptymalizowana strona nie pomoże, jeśli komunikacja między nią, a przeglądarką użytkownika napotyka problemy z powodu hostingu. Jeśli okres oczekiwania na odpowiedź serwera jest zbyt długi, wpływa to na czas ładowania zasobów i w efekcie na LCP.

3. Zoptymalizuj kod JavaScript i CSS

Renderowanie treści może być powstrzymywane lub spowalniane przez niektóre skrypty, które opóźniają parsowanie danych. Z tego powodu ich załadowanie wymaga więcej czasu, co źle wpływa na Największe Wyrenderowanie Treści. Aby to poprawić, warto przyjrzeć się zastosowaniu JavaScript na witrynie.

Jeśli zaś chodzi o pliki CSS, to mogą one zawierać liczne spacje, wcięcia czy komentarze, dzięki czemu są one przystępniejsze w odbiorze dla obsługujących je programistów. Wszystkie te dodatki są jednak niepotrzebne przeglądarce, dlatego warto pozbyć się ich w procesie minifikacji. Nie wpłynie to w żaden sposób na funkcjonowanie skryptów, a jedynie poprawi szybkość działania strony oraz usprawni LCP.

LCP – jak go mierzyć?

Pomiary LCP można przeprowadzać na tzw. danych laboratoryjnych, czyli za pomocą programów, które symulują zachowania użytkowników. Warto to robić w początkowych etapach testowania strony internetowej lub podczas wprowadzania usprawnień.

W przypadku takiego podejścia skorzystaj z następujących narzędzi:

Oczywiście nic nie zastąpi pomiaru zrealizowanego z wykorzystaniem danych generowanych przez prawdziwych użytkowników. W tym celu należy już przeprowadzić Real User Monitoring (RUM).

W przypadku takiego podejścia skorzystaj z następujących narzędzi:

Według Google wartość LCP powinna wynosić mniej niż 2,5 sekundy:

LCP – podsumowanie

Largest Contentful Paint to metryka, na którą Google będzie kłaść w najbliższej przyszłości coraz większy nacisk. Postaraj się zatem, aby odpowiednio zoptymalizować swoją stronę z myślą o tej wartości.

Twój komentarz zostanie poprawiony przez stronę w razie potrzeby.

Czym jest First Input Delay (FID)?
Headless e-commerce – wszystko, co powinieneś wiedzieć