Jak naprawić wolny wskaźnik LCP obrazu

Napraw wolny wskaźnik Largest Contentful Paint (LCP) dla obrazu w 4 krokach: zmień jego rozmiar do wymiarów wyświetlania, przekonwertuj go na WebP lub AVIF, zastosuj preload i ustaw fetchpriority na high. Pierwsze 2 kroki przynoszą największą poprawę i nie wymagają żadnych zmian w kodzie strony.

Na większości stron największym elementem renderującym treść jest pojedynczy obraz główny (hero), co oznacza, że LCP to w rzeczywistości kwestia jednego pliku, a nie całej witryny. Naprawa tego jednego pliku zazwyczaj wpływa na wynik bardziej niż jakakolwiek inna dostępna optymalizacja.

Co mierzy LCP

LCP rejestruje, jak długo trwa renderowanie największego widocznego elementu, mierzone od momentu rozpoczęcia ładowania strony. Google traktuje wynik 2.5 sekundy lub mniej jako dobry, od 2.5 do 4 sekund jako wymagający poprawy, a powyżej 4 sekund jako słaby.

Mierzonym elementem jest zazwyczaj obraz, rzadziej blok tekstu nagłówka, i zawsze jest to coś widocznego bez przewijania strony. Element ten może się różnić w zależności od urządzenia, ponieważ obraz główny, który dominuje w układzie na komputerze, na telefonie może znajdować się poniżej linii przewijania.

Znajdowanie odpowiedzialnego elementu

Uruchom Lighthouse i sprawdź pozycję Largest Contentful Paint element, która wskazuje dokładny mierzony element. Zgadywanie to strata czasu, ponieważ elementem tym często nie jest ten, który wszyscy podejrzewają.

Sprawdź wynik zarówno na urządzeniach mobilnych, jak i stacjonarnych, ponieważ układy stron się różnią, a wraz z nimi odpowiedź. Dane terenowe od rzeczywistych użytkowników są bardziej wiarygodne niż pojedynczy test laboratoryjny, ponieważ warunki sieciowe w świecie rzeczywistym różnią się znacznie bardziej niż w środowisku testowym. W przypadku rozbieżności zaufaj danym terenowym, a test laboratoryjny wykorzystaj do diagnozy.

Optymalizacja obrazu w kolejności wpływu

Aby poprawić LCP dla obrazu, wykonaj poniższe 6 kroków w podanej kolejności.

1. Zmień rozmiar obrazu do największego rozmiaru, w jakim będzie wyświetlany, podwojonego dla ekranów o wysokiej gęstości pikseli.
2. Przekonwertuj go na format WebP lub na AVIF, jeśli obraz jest duży i ma charakter fotograficzny.
3. Skompresuj go do rozmiaru poniżej 200 KB dla obrazu głównego, co jest osiągalne przy pełnej szerokości w większości projektów.
4. Dodaj atrybuty width i height, aby przeglądarka zarezerwowała miejsce i nie dochodziło do przesunięć układu.
5. Zastosuj preload dla obrazu w sekcji head strony, aby przeglądarka natychmiast rozpoczęła jego pobieranie.
6. Ustaw atrybut fetchpriority na high dla elementu obrazu, co informuje przeglądarkę, że ten plik jest najważniejszy.

Kroki 1 i 2 zazwyczaj przynoszą największą poprawę i są to jedyne dwa kroki, które nie wymagają modyfikacji kodu strony.

Dlaczego zmiana rozmiaru przewyższa kompresję

Wymiary kontrolują większość rozmiaru pliku, więc zmiana rozmiaru usuwa więcej wagi niż jakiekolwiek ustawienie jakości. Zdjęcie o szerokości 4000 pikseli wyświetlane w rozmiarze 1200 pikseli zawiera 11 razy więcej danych o pikselach, niż strona jest w stanie pokazać.

Trzeci wiersz pokazuje, dlaczego zmiana rozmiaru jest na pierwszym miejscu. Sama zmiana rozmiaru dała lepszy rezultat niż sama kompresja, a połączenie obu metod pobiło oba te wyniki. Wartości różnią się w zależności od obrazu i połączenia, ale kolejność skuteczności pozostaje niezmienna.

Preload i fetchpriority

Wstępne ładowanie (preload) nakazuje przeglądarce pobranie obrazu głównego, zanim zakończy ona analizowanie strony, co zazwyczaj oszczędza od 200 do 500 milisekund. To ustawienie ma znaczenie, ponieważ przeglądarki odkrywają obrazy późno w procesie analizowania kodu.

Zastosuj preload tylko dla jednego obrazu. Wstępne ładowanie kilku obrazów niweluje korzyści, ponieważ przeglądarka rozprasza swoją uwagę dokładnie tak samo, jak zrobiłaby to bez tego ustawienia. Ustawienie fetchpriority na high pozwala osiągnąć podobny rezultat przy mniejszej ilości kodu i często jest wystarczające dla obrazu, który jest już obecny w początkowym kodzie HTML.

Błędy, które pogarszają LCP

• Opóźnione ładowanie (lazy loading) obrazu głównego. Lazy loading opóźnia dokładnie ten plik, który chcesz załadować jako pierwszy. Stosuj go wyłącznie poniżej linii przewijania.
• Ładowanie obrazu głównego przez JavaScript. Obraz wstawiany przez skrypt nie może zacząć się pobierać, dopóki skrypt nie zostanie uruchomiony.
• Używanie obrazu tła w CSS. Obrazy tła są odkrywane później niż elementy img i nie można im tak łatwo nadać priorytetu.
• Wstępne ładowanie kilku obrazów. Konkurujące priorytety całkowicie eliminują tę zaletę.
• Pominięcie atrybutów width i height. Przesunięcie układu psuje inny wskaźnik, podczas gdy ten ulega poprawie.

Gdy elementem LCP jest tekst

LCP oparty na tekście jest zazwyczaj opóźniany przez czcionki sieciowe, a nie przez sam tekst. Przeglądarka ma słowa natychmiast, ale czeka na plik czcionki przed ich wyrenderowaniem.

Ustaw font-display na swap, aby tekst renderował się przy użyciu czcionki zastępczej i przełączał się, gdy dotrze czcionka sieciowa. Zastosuj preload dla jednego, najważniejszego pliku czcionki i ogranicz zestaw znaków czcionki (subsetting) do tych, których rzeczywiście używasz na stronach, co często zmniejsza rozmiar czcionki z 200 KB do poniżej 30 KB. Serwowanie czcionek z własnej domeny eliminuje dodatkowe połączenie z zewnętrznym serwerem.

Czas odpowiedzi serwera wyznacza granicę

Wskaźnik LCP nie może być szybszy niż czas potrzebny serwerowi na zwrócenie pierwszego bajtu, więc wolny serwer ogranicza każdą inną optymalizację. Dąż do uzyskania czasu poniżej 600 milisekund do pierwszego bajtu.

Sprawdź tę wartość przed optymalizacją obrazów, ponieważ 2-sekundowa odpowiedź serwera uniemożliwia osiągnięcie celu LCP na poziomie 2.5 sekundy, niezależnie od tego, co zrobisz z plikami. Buforowanie, szybszy hosting lub sieć dostarczania treści (CDN) rozwiązują ten problem. Praca nad obrazami poprawia wtedy to, co pozostało, zamiast walczyć z limitem narzuconym gdzie indziej.

Skrypty zewnętrzne również opóźniają obraz

Skrypty analityczne, banery zgody na pliki cookie, widgety czatu i skrypty reklamowe konkurują z obrazem głównym o przepustowość i czas procesora. Idealnie zoptymalizowany obraz i tak wyrenderuje się późno, jeśli przed nim ładuje się 12 skryptów.

Najbardziej szkodliwe są banery zgody, ponieważ wiele z nich blokuje renderowanie, dopóki użytkownik nie dokona wyboru. Ładuj skrypty zewnętrzne z atrybutem defer lub async, aby nie blokowały strony, i zweryfikuj, ile z nich jest naprawdę potrzebnych. Usunięcie 3 nieużywanych skryptów śledzących często poprawia LCP bardziej niż kolejna runda kompresji obrazu.

Prawidłowe testowanie zmian

Testuj w oknie prywatnym z wyłączonymi rozszerzeniami i wykonaj pomiar 3 razy, zamiast ufać pojedynczemu wynikowi. Wyniki poszczególnych testów mogą się zauważalnie różnić.

Upewnij się, że przeglądarka rzeczywiście otrzymała mniejszy plik. Otwórz narzędzia deweloperskie, przejdź do zakładki Sieć (Network), pofiltruj po obrazach i odśwież stronę. Przesłany rozmiar i format pojawią się na liście. Jeśli strona nadal serwuje stary plik, zazwyczaj oznacza to, że warstwa buforowania przechowuje poprzednią wersję, a nie że optymalizacja się nie powiodła.

Utrzymanie szybkiego LCP po wdrożeniu poprawek

Ustal regułę dla obrazów głównych, zamiast poprawiać je pojedynczo, ponieważ nowe strony ponownie wprowadzą ten problem. Strona naprawiona raz powróci do starego stanu w ciągu kilku miesięcy, jeśli redaktorzy będą przesyłać zdjęcia bezpośrednio z aparatu.

Uzgodnij maksymalną szerokość i maksymalny rozmiar pliku dla obrazów głównych, zapisz to i stosuj do każdej nowej strony. Reguła taka jak szerokość 1920 pikseli i rozmiar poniżej 200 KB jest łatwa do zweryfikowania i obejmuje prawie każdy projekt. Tam, gdzie publikuje kilka osób, zapisana reguła ma większe znaczenie niż sama technika, ponieważ ogólny wynik odzwierciedla najgorszą stronę, a nie najlepszą.

Przygotowanie obrazów głównych w jednym przebiegu

Przetwarzaj wszystkie obrazy główne w witrynie razem, ponieważ mają one tę samą specyfikację i jeden rozmiar docelowy. Większość witryn ma od 10 do 100 takich obrazów na stronach docelowych, stronach kategorii i w artykułach.

Ustaw szerokość i docelowy rozmiar w KB raz, przeciągnij obrazy, a każdy plik zostanie odpowiednio dopasowany. W jednej partii można przetworzyć do 500 obrazów, w całości w przeglądarce na własnym procesorze. Nic nie jest przesyłane na serwer, więc zasoby robocze, nieopublikowane strony kampanii i projekty klientów pozostają na Twoim komputerze podczas przygotowywania całej biblioteki.