Najwyższe wyrenderowanie treści (LCP) to stabilne podstawowe wskaźniki internetowe do pomiaru widocznej szybkości wczytywania. Oznacza to na osi czasu wczytywania strony punkt, w którym prawdopodobnie wczyta się główna zawartość strony. Szybki LCP zapewnia użytkownikowi, że strona jest przydatna.
W przeszłości dla programistów stron internetowych wyzwaniem było zmierzenie, jak szybko główna treść strony internetowej wczytuje się i jest widoczna dla użytkowników. Starsze wskaźniki, takie jak load lub DOMContentLoaded, nie działają dobrze, ponieważ nie muszą być zgodne z tym, co użytkownik widzi na ekranie. Z kolei nowsze, skoncentrowane na użytkownikach dane o wydajności, takie jak pierwsze wyrenderowanie treści (FCP), odnotowują dopiero początek procesu wczytywania. Jeśli na stronie pojawia się ekran powitalny lub wskaźnik wczytywania, użytkownik nie ma zbyt dużego znaczenia.
Wcześniej zalecaliśmy takie dane o skuteczności jak pierwsze wyrenderowanie znaczącej wartości (FMP) i indeks szybkości (SI) (oba funkcje dostępne w Lighthouse), aby lepiej uchwycić czas wczytywania strony po wstępnym wyrenderowaniu. Są one jednak złożone, trudne do wyjaśnienia i często błędne, co oznacza, że nadal nie wykrywają, kiedy główna zawartość strony została wczytana.
Na podstawie dyskusji w grupie W3C Web Performance Activity Group i badań przeprowadzonych w Google doszliśmy do wniosku, że dokładniejszym sposobem na zmierzenie, kiedy główna zawartość strony jest wczytywana, jest wyrenderowanie największego elementu.
Co to jest LCP?
LCP podaje czas renderowania największego bloku graficznego lub tekstowego widocznego w widocznym obszarze w odniesieniu do czasu, w którym użytkownik po raz pierwszy odwiedził stronę.
Jaki jest dobry wynik LCP?
Aby zadbać o wygodę użytkowników, witryna powinna mieć LCP na poziomie 2,5 sekundy lub krótszym. Aby mieć pewność, że w przypadku większości użytkowników osiągasz ten cel, dobrym progiem jest 75 centyl wczytań strony podzielony na urządzenia mobilne i komputery.
Jakie elementy są uwzględniane?
Zgodnie z opisem w interfejsie Largest Contentful Paint API typy elementów uwzględniane w przypadku największego wyrenderowania treści to:
<img>(czas wyświetlania pierwszej klatki jest używany w przypadku treści animowanych, takich jak pliki GIF czy animowane pliki PNG).- Elementy
<image>w elemencie<svg> - Elementy
<video>(w przypadku filmów używany jest czas wczytywania obrazu plakatu lub czas wyświetlania pierwszej klatki w przypadku filmów – zależnie od tego, co nastąpi wcześniej). - Element z obrazem tła wczytanym za pomocą funkcji
url()(w odróżnieniu od gradientu CSS). - elementów na poziomie bloku, które zawierają węzły tekstowe lub inne elementy podrzędne elementów tekstowych na poziomie elementu).
Ograniczenie elementów do tego ograniczonego zestawu było zamierzone, aby zmniejszyć złożoność.
W przyszłości w miarę prowadzenia kolejnych badań możemy dodawać kolejne elementy (takie jak pełna obsługa <svg>).
Pomiary LCP uwzględniają nie tylko niektóre elementy, ale też korzystają z metod heurystycznych w celu wykluczenia elementów, które użytkownicy prawdopodobnie uznają za „bez treści”. W przypadku przeglądarek opartych na Chromium są to:
- elementów o przezroczystości 0, przez co są niewidoczne dla użytkownika;
- elementy zasłaniające cały widoczny obszar i mogące być elementami tła;
- obrazy zastępcze lub inne obrazy o niskiej entropii, które prawdopodobnie nie odzwierciedlają rzeczywistej treści strony;
Przeglądarki zapewne będą nadal ulepszać te heurystyki, by spełniać oczekiwania użytkowników dotyczące największego elementu treści.
Te „trafne” heurystyki różnią się od tych używanych przez FCP, który może uwzględniać niektóre z tych elementów, np. obrazy zastępcze lub obrazy w całości widocznego obszaru, nawet jeśli nie kwalifikują się do kandydatów LCP. Choć w nazwie są używane słowa „trafne”, ich cel jest inny. FCP określa, kiedy jakakolwiek treść jest wyświetlana na ekranie, a LCP – gdy główna treść jest wyrenderowana.
Jak określa się rozmiar elementu?
Rozmiar elementu raportowanego w związku z LCP jest zwykle taki, który jest widoczny dla użytkownika w widocznym obszarze. Jeśli element wychodzi poza widoczny obszar lub którykolwiek z elementów jest przycięty bądź ma niewidoczne overflow, te części nie są uwzględniane w rozmiarze elementu.
W przypadku elementów graficznych, których rozmiar został zmieniony z rozmiaru wewnętrznego, w raportach uwzględniany jest rozmiar widoczny lub wewnętrzny (w zależności od tego, który rozmiar jest mniejszy).
W przypadku elementów tekstowych LCP bierze pod uwagę tylko najmniejszy prostokąt, który może zawierać wszystkie węzły tekstowe.
W przypadku wszystkich elementów LCP nie uwzględnia marginesów, dopełnienia ani obramowań zastosowanych za pomocą CSS.
Kiedy raport LCP jest raportowany?
Strony internetowe często wczytują się etapowo, w związku z czym podczas wczytywania może zmienić się jej największy element.
Aby uwzględnić tę możliwość, przeglądarka wysyła kod PerformanceEntry typu largest-contentful-paint identyfikujący największy element treści, gdy tylko wyrenderuje pierwszą klatkę. Po wyrenderowaniu kolejnych klatek wysyła kolejny element PerformanceEntry za każdym razem, gdy zmienia się największa zmiana elementu treści.
Na przykład na stronie z tekstem i banerem powitalnym przeglądarka może początkowo renderować tylko tekst, a potem wysłać wpis largest-contentful-paint, którego właściwość element odwołuje się do właściwości <p> lub <h1>. Po zakończeniu wczytywania banera powitalnego wysyłany jest drugi wpis largest-contentful-paint z właściwością element odwołującą się do <img>.
Element może zostać uznany za największy element treści dopiero po wyrenderowaniu i wyświetleniu się użytkownikowi. Obrazy, które nie zostały jeszcze wczytane, nie są uznawane za „wyrenderowane”. Ani węzły tekstowe, które korzystają z czcionek internetowych w okresie blokowania czcionek.
W takich przypadkach mniejszy element może zostać uznany za największy element treści, ale gdy tylko większy element zakończy renderowanie, tworzony jest kolejny element PerformanceEntry.
Oprócz późno wczytywanych obrazów i czcionek strona może dodawać do DOM nowe elementy w miarę pojawiania się nowych treści. Jeśli którykolwiek z tych nowych elementów jest większy od poprzedniego największego elementu treści, tworzony jest nowy PerformanceEntry.
Jeśli największy element treści zostanie usunięty z widocznego obszaru lub nawet z DOM, pozostaje on największym elementem treści, chyba że zostanie wyrenderowany większy element.
Przeglądarka przestaje raportować nowe wpisy, gdy tylko użytkownik wejdzie w interakcję ze stroną (kliknie, przewinie lub naciśnie klawisz), ponieważ interakcja użytkownika często zmienia to, co jest dla niego widoczne (zwłaszcza podczas przewijania).
Do celów analitycznych zgłaszaj do usługi analitycznej tylko ostatnio wysłane żądanie PerformanceEntry.
Czas wczytywania a czas renderowania
Ze względów bezpieczeństwa sygnatura czasowa renderowania obrazów nie jest dostępna w przypadku obrazów z innych domen, które nie mają nagłówka Timing-Allow-Origin. Zamiast tego dostępny jest tylko czas wczytywania, który został już udostępniony przez inne interfejsy API.
Może to prowadzić do sytuacji, w której LCP jest zgłaszane przez internetowe interfejsy API jako wcześniejsze niż FCP. Wynika to tylko z tego ograniczenia i nie odzwierciedla rzeczywistej sytuacji.
W miarę możliwości zalecamy ustawienie nagłówka Timing-Allow-Origin, aby zwiększyć dokładność danych.
Jak są wprowadzane zmiany układu i rozmiaru elementów?
Aby zmniejszyć nakład pracy związany z obliczaniem i wysyłaniem nowych wpisów o skuteczności, zmiana rozmiaru lub pozycji elementu nie powoduje generowania nowych kandydatów LCP. Uwzględniany jest tylko początkowy rozmiar i położenie elementu w widocznym obszarze.
Oznacza to, że obrazy, które są początkowo renderowane poza ekranem, a potem przeniesione na ekran, mogą nie być raportowane. Oznacza to również, że elementy początkowo renderowane w widocznym obszarze, a potem wypchnięte poza widoczny obszar, nadal podają informację o swoim początkowym rozmiarze widocznego obszaru.
Przykłady
Oto kilka przykładów sytuacji, w której w kilku popularnych witrynach pojawia się największe wyrenderowanie treści:
Na obu tych osiach czasu największy element (wyróżniony na zielono) zmienia się podczas wczytywania treści. W pierwszym przykładzie do DOM jest dodawana nowa treść, która zmienia największy element. W drugim przykładzie zmienia się układ, usuwając z widocznego obszaru poprzedni największy element treści.
Treści ładowane później są często większe niż te, które są już na stronie, ale nie jest to konieczne. Kolejne 2 przykłady pokazują LCP przed pełnym wczytaniem strony.
W pierwszym przykładzie logo Instagrama wczytuje się stosunkowo wcześnie i pozostaje największym elementem, nawet gdy zostaną dodane inne treści. W przypadku strony z wynikami wyszukiwania Google największym elementem jest akapit tekstu wyświetlany przed każdym z obrazów lub przed zakończeniem wczytywania logo. Każdy obraz jest mniejszy niż ten akapit, więc pozostaje największym elementem podczas procesu wczytywania.
Jak mierzyć LCP
LCP można mierzyć w module lub w terenie. Ten wskaźnik jest dostępny w tych narzędziach:
Narzędzia terenowe
- Raport na temat użytkowania Chrome
- PageSpeed Insights
- Search Console (raport dotyczący podstawowych wskaźników internetowych)
- Biblioteka JavaScript
web-vitals
Narzędzia laboratoryjne
Mierz LCP w JavaScript
Aby mierzyć LCP w JavaScript, użyj interfejsu Largest Contentful Paint API.
Poniższy przykład pokazuje, jak utworzyć PerformanceObserver, który nasłuchuje wpisów largest-contentful-paint i rejestruje je w konsoli.
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('LCP candidate:', entry.startTime, entry);
}
}).observe({type: 'largest-contentful-paint', buffered: true});
W poprzednim przykładzie każdy zarejestrowany wpis largest-contentful-paint reprezentuje bieżący kandydat do LCP. Ogólnie wartość startTime ostatniej wysłanej pozycji jest wartością LCP. Jednak nie wszystkie largest-contentful-paintwpisy nadają się do pomiaru LCP.
W tej sekcji opisujemy różnice między danymi w raportach interfejsu API a sposobem obliczania tych danych.
Różnice między danymi a interfejsem API
- W przypadku stron wczytywanych na karcie w tle interfejs API wysyła wpisy
largest-contentful-paint, ale należy je zignorować przy obliczaniu LCP. - Interfejs API nadal wysyła wpisy
largest-contentful-paintpo odtworzeniu strony w tle, ale należy je zignorować podczas obliczania LCP. Elementy można uwzględniać tylko wtedy, gdy przez cały czas strona znajdowała się na pierwszym planie. - Interfejs API nie zgłasza wpisów
largest-contentful-paint, gdy strona jest przywracana z pamięci podręcznej stanu strony internetowej, ale w takich przypadkach należy mierzyć LCP, ponieważ użytkownicy postrzegają je jako osobne wizyty na stronie. - Interfejs API nie uwzględnia elementów w elementach iframe, ale dane są uwzględniane, ponieważ są one częścią strony wpływającej na wrażenia użytkownika. W przypadku stron z LCP w elemencie iframe, np. w przypadku obrazu plakatu umieszczonego w filmie, będzie to różnica między wartościami CrUX i RUM.
Aby prawidłowo mierzyć LCP, musisz uwzględnić elementy iframe. Ramki podrzędne mogą używać interfejsu API do raportowania swoich wpisów
largest-contentful-paintdo ramki nadrzędnej na potrzeby agregacji. - Interfejs API mierzy LCP od początku nawigacji. W przypadku wstępnie renderowanych stron mierz LCP z
activationStart, ponieważ odpowiada to czasowi LCP postrzeganemu przez użytkownika.
Zamiast zapamiętywać wszystkie te subtelne różnice, zalecamy deweloperom korzystanie z biblioteki JavaScript web-vitals do pomiaru LCP, która obsługuje większość tych różnic. (Nie obejmuje
problemów z elementami iframe).
import {onLCP} from 'web-vitals';
// Measure and log LCP as soon as it's available.
onLCP(console.log);
Pełny przykład pomiaru LCP w JavaScript znajdziesz w kodzie źródłowym onLCP().
Co zrobić, jeśli największy element nie jest najważniejszy?
W niektórych przypadkach najważniejszy element (lub elementy) na stronie nie jest taki sam jak największy. Deweloperzy mogą być bardziej zainteresowani pomiarami czasu renderowania tych elementów. Możesz to zrobić, korzystając z interfejsu Element Timing API, jak opisano w artykule o danych niestandardowych.
Jak poprawić LCP
Dostępny jest pełny przewodnik dotyczący optymalizacji LCP, który przeprowadzi Cię przez proces identyfikowania czasów LCP w terenie oraz korzystania z danych laboratoryjnych do ich analizy i analizy.
Dodatkowe materiały
- Wnioski z monitorowania wydajności w Chrome napisane przez Annie Sullivan, performance.now() (2019)
Historia zmian
Czasami błędy wykrywane są w interfejsach API używanych do pomiaru danych, a niekiedy w definicjach samych wskaźników. Dlatego czasem trzeba wprowadzać zmiany, które mogą się pojawiać jako ulepszenia lub regresje w wewnętrznych raportach i panelach.
Aby Ci w tym pomóc, wszystkie zmiany w implementacji lub definicji tych danych są opisane w tej historii zmian.
Jeśli chcesz podzielić się opinią na temat tych danych, prześlij ją w grupie dyskusyjnej Google web-vitals-feedback.