Farba o największej zawartości (LCP)

Largest Contentful Paint mierzy czas od rozpoczęcia ładowania strony do zakończenia renderowania największego elementu treści widocznego w obszarze widoku. Jest to jeden z podstawowych wskaźników internetowych Google i służy jako przybliżony wskaźnik postrzeganej szybkości ładowania, ponieważ strona wydaje się załadowana, gdy wyświetla się jej główna treść, a nie gdy wszystkie zasoby zostaną pobrane.

Mierzony element to zazwyczaj obraz główny, plakat wideo, obraz tła zastosowany do dużego bloku lub obszerny blok tekstu. To, który element spełnia kryteria, może się zmieniać podczas ładowania, gdy treść jest renderowana, a ostateczna wartość odpowiada największemu elementowi w momencie pierwszej interakcji użytkownika lub zakończenia ładowania strony. Opublikowany przez Google próg uznaje 2.5 sekundy lub mniej za dobry, mierzony w siedemdziesiątym piątym percentylu rzeczywistych doświadczeń użytkownika, co oznacza, że ​​celem nie jest przeciętny użytkownik, ale wolniejsza ćwiartka z nich.

Przyczyny niskich wyników można podzielić na kilka powtarzających się kategorii. Powolna odpowiedź serwera opóźnia wszystkie procesy, więc długi czas reakcji na pierwszy bajt ogranicza osiągalny wynik. Blokujące renderowanie kody CSS i JavaScript w nagłówku dokumentu uniemożliwiają rozpoczęcie renderowania do momentu ich pobrania i przetworzenia. Przesyłanie i dekodowanie dużych, niezoptymalizowanych obrazów zajmuje więcej czasu, szczególnie w przypadku połączeń mobilnych. Zasoby wykryte późno, takie jak obrazy odwoływane z CSS lub wstrzykiwane przez JavaScript, rozpoczynają się po rozpoczęciu pobierania przez przeglądarkę. Renderowanie po stronie klienta komplikuje wszystkie te procesy, ponieważ treść nie może zostać narysowana, dopóki pakiet nie zostanie pobrany i wykonany.

Rozwiązania te są bezpośrednio związane z tym problemem i stanowią w większości mało efektowną pracę inżynierską. Wyświetlanie obrazów o odpowiednich rozmiarach w nowoczesnych formatach, z wyraźnymi wymiarami i wskazówkami dotyczącymi priorytetu elementu, który prawdopodobnie będzie największy, rozwiązuje najczęstszą przyczynę. Wstępne wczytanie głównego obrazu i kluczowych czcionek pozwala przeglądarce uruchomić się wcześniej. Wbudowanie kluczowego kodu CSS i odroczenie pozostałych usuwa zależność blokującą renderowanie. Skrócenie czasu reakcji serwera poprzez buforowanie i sieć dostarczania treści (CDS) podnosi poprzeczkę dla wszystkich innych problemów. Renderowanie po stronie serwera lub generowanie statyczne stron z dużą ilością treści całkowicie eliminuje oczekiwanie na JavaScript.

Pomiar wymaga rozróżnienia danych terenowych i laboratoryjnych, ponieważ odpowiadają one na różne pytania. Dane terenowe pochodzące od rzeczywistych użytkowników odzwierciedlają rzeczywiste warunki pracy urządzenia i sieci, a także są wykorzystywane przez systemy rankingowe wyszukiwania, ale są agregowane w pewnym okresie i nie wyjaśniają poszczególnych przyczyn. Narzędzia laboratoryjne zapewniają powtarzalną diagnostykę w kontrolowanych warunkach, co czyni je przydatnymi do debugowania, ale ich wyniki mogą znacznie różnić się od tych uzyskiwanych przez rzeczywistych użytkowników. Potrzebne są obie te rzeczy: dane terenowe, aby stwierdzić, czy występuje problem, oraz narzędzia laboratoryjne, aby znaleźć jego przyczynę.

Praktycznym ostrzeżeniem jest to, że metrykę można poprawić w sposób, który nie poprawia doświadczenia, a zespoły pod presją osiągnięcia określonego progu czasami właśnie to robią. Odłożenie głównego obrazu, tak aby blok tekstu stał się największym elementem, zmniejszenie rozmiaru głównego elementu wizualnego, tak aby inny element się kwalifikował, lub ukrycie treści do momentu pomiaru – wszystko to zmienia wartość, nie wpływając na szybkość strony. Ponieważ miara jest wskaźnikiem postrzeganego ładowania, a nie samym ładowaniem, ulepszenia należy sprawdzać na podstawie filmu z rzeczywistej sekwencji ładowania, który pokazuje, czy użytkownik widzi sensowną treść szybciej, czy też po prostu, czy narzędzie zostało spełnione.

Argument komercyjny za rozwiązaniem tego problemu nie opiera się przede wszystkim na rankingu wyszukiwania, gdzie szybkość jest jednym z wielu czynników. Opiera się na dobrze udokumentowanej zależności między opóźnieniem ładowania a porzuceniem strony, która jest najbardziej widoczna w przypadku połączeń mobilnych i stron o wysokiej intencji, gdzie użytkownicy już podjęli decyzję o działaniu. W praktyce sprawia to, że wskaźnik ten staje się standardowym elementem wydajność sieci praca i jej ulepszenia często są widoczne w pomiarach konwersji tak samo wyraźnie, jak każda zmiana testowana za pomocą Usługa CRO programu, dlatego też prace nad wydajnością i optymalizacją najlepiej planować razem, a nie oddzielnie.