LCP mierzy, ile czasu potrzeba na załadowanie głównej treści strony i jej gotowość do interakcji z użytkownikiem. W szczególności jest to czas od początku ładowania strony do momentu wyświetlenia największego obrazu lub bloku tekstu w widocznej części ekranu. Wszystko, co znajduje się poniżej linii zagięcia, nie jest brane pod uwagę.
Zazwyczaj mierzone elementy obejmują obrazy, wideo, obrazy tła i bloki tekstu, takie jak akapity.
LCP składa się z kilku submetryk:
- Czas do pierwszego bajtu (TTFB)
- Opóźnienie ładowania zasobów
- Czas trwania ładowania zasobów
- Opóźnienie renderowania elementów
Optymalizacja LCP zakłada poprawę każdej z tych submetryk, aby strona ładowała się i wyświetlała zasoby w czasie krótszym niż 2,5 sekundy.
Progi wartości LCP:
- Dobry wynik: poniżej 2,5 sekundy
- Wymaga poprawy: 2,5–4 sekundy
- Zły wynik: powyżej 4 sekund
Przyjrzyjmy się teraz bardziej szczegółowo tym submetrykom i sposobom ich optymalizacji.
Czas do Pierwszego Bajtu (TTFB)
TTFB to czas odpowiedzi serwera, który mierzy, ile czasu potrzeba przeglądarce użytkownika, aby otrzymać pierwszy bajt danych z serwera. Obejmuje to czas na zapytanie DNS, przetwarzanie żądań przez serwer i przekierowania.
Optymalizacja TTFB może znacząco zmniejszyć całkowity czas ładowania i poprawić wynik LCP.
Na czas odpowiedzi serwera wpływają następujące czynniki:
- Zapytania do bazy danych
Jeśli czas odpowiedzi jest wysoki, należy zidentyfikować źródło problemu. Może to być spowodowane źle zoptymalizowanymi zapytaniami lub dużą liczbą zapytań, które spowalniają serwer. Na przykład logowanie wolnych zapytań w MySQL może pomóc zidentyfikować te najbardziej kosztowne. W przypadku WordPressa można użyć wtyczek do śledzenia czasu wykonania zapytań SQL. - Przerwy w cache CDN
Przerwy w cache CDN występują, gdy zasób nie zostaje znaleziony w pamięci podręcznej CDN i zapytanie zostaje przekierowane do źródłowego serwera. Wysoki odsetek przerw w cache (>10%) może wskazywać na problemy, które należy rozwiązać z dostawcą CDN. - Nieefektywne renderowanie po stronie serwera
Często korzystanie z zewnętrznych API w czasie rzeczywistym opóźnia renderowanie. Na przykład integracja z usługami analitycznymi może powodować opóźnienia. Optymalizuj stronę, minimalizując liczbę takich zapytań lub buforując je. - Hosting
Wybór hostingu z wbudowaną obsługą CDN i pamięcią podręczną może poprawić TTFB. Skróci to czas ładowania i przyspieszy wyświetlanie stron.
Opóźnienie Ładowania Zasobów
Opóźnienie ładowania zasobów to czas, który potrzebuje przeglądarka na zlokalizowanie i rozpoczęcie ładowania zasobu LCP. Na przykład, jeśli do wyświetlenia elementu LCP potrzebny jest plik CSS, czas ładowania tego pliku zwiększa opóźnienie.
Aby zoptymalizować ten proces, można:
- Wstępnie załadować pliki CSS i obrazy
Użyj atrybutufetchpriority="high"dla obrazów w tagu<link>:
<link rel="stylesheet" href="/assets/css/styles.css">
<link rel="preload" fetchpriority="high" as="image" href="/media/hero.webp" type="image/webp">Osadzić krytyczny CSS dla treści powyżej linii zagięcia
Pozwala to uniknąć opóźnień przy ładowaniu podstawowych stylów strony.
Unikać używania ciężkich obrazów głównych i sliderów, które często nie dodają wartości i spowalniają wyświetlanie głównej treści.
Używać leniwego ładowania (Lazy Loading) dla obrazów i wideo
Włączenie leniwego ładowania może znacznie skrócić czas ładowania:
<img src="example.jpg" alt="Example image" loading="lazy">Czas Trwania Ładowania Zasobów
Czas trwania ładowania zasobów to rzeczywisty czas potrzebny na załadowanie zasobu LCP. Ważne jest, aby zmniejszyć rozmiar obrazów i wybrać odpowiedni format, na przykład WebP. Ponadto użycie CDN może pomóc przyspieszyć ładowanie treści użytkownikom na całym świecie.
Optymalizacja obejmuje:
- Format obrazów WebP
WebP kompresuje obrazy bez utraty jakości, co skraca czas ładowania. - Prawidłowe rozmiary obrazów
Ustaw rozmiar obrazów, który odpowiada rozmiarowi kontenera, w którym będą wyświetlane. - Korzystanie z CDN
Podłączenie do CDN pomaga skrócić czas trwania ładowania zasobów, rozprowadzając treści bliżej użytkowników.
Opóźnienie Renderowania Elementów
Opóźnienie renderowania elementów to czas potrzebny przeglądarce na wyświetlenie elementu LCP. Zmniejszenie liczby zasobów blokujących i optymalizacja HTML, CSS i JavaScript pomogą skrócić to opóźnienie.
- Optymalizacja użycia JavaScriptu
Użycie atrybutówdeferiasyncdla odłożonego ładowania skryptów pozwala uniknąć blokowania renderowania:
<script src="script.js" async></script>- Używanie Font Display dla czcionek
Użyjfont-display: swap;, aby tekst był wyświetlany za pomocą systemowych czcionek, dopóki czcionki sieciowe nie zostaną w pełni załadowane:
@font-face {
font-family: 'CustomFont';
src: url('/fonts/customfont.woff2') format('woff2');
font-display: swap;
}Jednym ze sposobów na poprawę nie tylko czasu ładowania i opóźnień, ale także wszystkich wskaźników CWV podczas nawigacji po Twojej stronie, jest wdrożenie API spekulacyjnych zasad dla przyszłych przejść. Dzięki wstępnemu renderowaniu stron, na które użytkownicy prawdopodobnie przejdą, gdy najedzie się kursorem na link, możesz sprawić, że ładowanie stron stanie się natychmiastowe.
Dodatkowe Sposoby Optymalizacji LCP
- Używanie HTTP/2
Przejście na HTTP/2 poprawia multipleksowanie zapytań, co zmniejsza opóźnienia przy ładowaniu wielu zasobów. - Service workers i buforowanie
Buforowanie przez service workers może znacząco poprawić LCP dla ponownych wizyt na stronie. - Optymalizacja mobilna
Ważne jest, aby brać pod uwagę urządzenia mobilne, gdzie prędkość internetu i wydajność mogą być niższe. Optymalizuj strony pod kątem urządzeń mobilnych, zmniejszając rozmiary obrazów i upraszczając CSS.
Unikaj błędów przy ocenie LCP
Wszystkie elementy, które znajdują się na ekranie użytkownika (w widocznej części strony), są brane pod uwagę przy obliczaniu LCP. Oznacza to, że obrazy, które najpierw wyświetlają się poza ekranem, a następnie są przenoszone do układu, mogą nie być uwzględniane w pomiarze Largest Contentful Paint.
Z drugiej strony, elementy, które początkowo znajdują się w widocznej części ekranu, ale później są przesunięte poza niego, mogą być brane pod uwagę przy obliczaniu LCP.
Jak zmierzyć wskaźnik LCP?
Do pomiaru LCP można użyć narzędzi takich jak DevTools, PageSpeed Insights i Lighthouse. Pozwalają one zidentyfikować wąskie gardła i dostarczają rekomendacji dotyczących optymalizacji.
Narzędzia polowe dostarczają rzeczywistych pomiarów strony w trakcie jej użytkowania przez użytkowników.
Narzędzia laboratoryjne dają wirtualny wskaźnik, oparty na symulowanej analizie z wykorzystaniem algorytmów, które naśladują warunki, z jakimi może spotkać się typowy użytkownik urządzeń mobilnych.
Aby znaleźć zasoby LCP i zmierzyć czas ich wyświetlania, możesz użyć DevTools > Performance report.
Podsumowanie
Optymalizacja LCP to ważne, ale złożone zadanie, ponieważ obejmuje wiele submetryk, z których każda wymaga dogłębnej analizy. Zrozumienie opóźnień związanych z renderowaniem, ładowaniem zasobów i interakcjami z serwerem pomoże w znaczących poprawach wydajności.
