Formaty nowej generacji według Lighthouse

Ostrzeżenie Lighthouse oznacza konieczność konwersji plików JPEG i PNG na format WebP lub AVIF, a następnie serwowanie ich za pomocą elementu picture z oryginalnym plikiem jako rozwiązaniem awaryjnym. Ten audyt jest jednym z łatwiejszych do zaliczenia, ponieważ rozwiązanie ma charakter mechaniczny, a nie architektoniczny.

Lighthouse zgłasza to ostrzeżenie, gdy znajdzie obrazy, które jego zdaniem byłyby znacznie mniejsze w nowoczesnym formacie. Szacunek opiera się na pobranym pliku, więc zgłaszana oszczędność jest zazwyczaj osiągalna, a czasami wręcz niedoszacowana.

Co mierzy Lighthouse

Lighthouse wewnętrznie koduje każdy obraz jako WebP i zgłasza różnicę, gdy oszczędność przekracza określony próg. Liczba w raporcie jest rzeczywistym szacunkiem, a nie ogólną rekomendacją.

Obrazy poniżej progu są ignorowane, dlatego strona z 30 obrazami może pokazać w audycie tylko 4. Wymienione pliki to te, które warto naprawić w pierwszej kolejności. Ich usunięcie zazwyczaj całkowicie likwiduje ostrzeżenie, nawet jeśli inne obrazy na stronie pozostają w starszych formatach.

Kod, który zalicza audyt

Użyj elementu picture z AVIF na pierwszym miejscu, WebP na drugim i oryginalnym JPEG w tagu img. Przeglądarka wybiera pierwsze źródło, które rozumie, dzięki czemu nowsze przeglądarki otrzymują mały plik, a starsze nadal widzą obraz.

Tag img musi pozostać, ponieważ zawiera tekst alternatywny, wymiary i plik awaryjny. Pominięcie atrybutów width i height powoduje przesunięcie układu podczas ładowania obrazów, co szkodzi innemu wskaźnikowi Core Web Vitals podczas naprawiania tego. Ustaw oba atrybuty na rzeczywisty rozmiar w pikselach obrazu awaryjnego.

Jak zaliczyć audyt

Aby prawidłowo rozwiązać to ostrzeżenie, wykonaj następujące 6 kroków.

1. Otwórz raport Lighthouse i wypisz nazwy obrazów, które wskazuje, ponieważ to one przyniosą mierzalne oszczędności.
2. Sprawdź rozmiar wyświetlania każdego obrazu, ponieważ wiele z nich jest zbyt dużych, a także ma niewłaściwy format.
3. Zmień rozmiar każdego obrazu do jego rzeczywistej szerokości wyświetlania, podwojonej dla ekranów o wysokiej gęstości pikseli.
4. Skonwertuj do WebP z jakością 80, a do AVIF z jakością 65 dla największych obrazów na stronie.
5. Serwuj wyniki za pomocą elementu picture z oryginalnym plikiem jako awaryjnym tagiem img.
6. Uruchom ponownie Lighthouse, aby potwierdzić, że ostrzeżenie zniknęło i nie pojawiło się przesunięcie układu.

Krok 3 ma większe znaczenie niż krok 4. Wymiary kontrolują większość rozmiaru pliku, a zbyt duży WebP to nadal zbyt duży obraz. Konwersja zbiorcza zajmuje kilka minut, podczas gdy napisanie kodu zazwyczaj trwa dłużej.

Który format dla którego obrazu

Czy Twoja platforma już to robi

Wiele systemów zarządzania treścią i hostingów automatycznie konwertuje obrazy, więc sprawdź to przed ręcznym wdrażaniem zmian. Wykonywanie tej samej pracy dwukrotnie jest częste i niepotrzebne.

Przetestuj to w 2 minuty. Otwórz opublikowaną stronę, kliknij prawym przyciskiem myszy na obraz i otwórz go w nowej karcie, a następnie sprawdź rozszerzenie pliku w pasku adresu. Rozszerzenie .webp w pliku, który został przesłany jako JPEG, oznacza, że platforma już dokonuje konwersji. Shopify, większość zarządzanych hostingów WordPress i kilka kreatorów stron robią to domyślnie.

Dlaczego ostrzeżenie czasami powraca

Nowe przesłane pliki ponownie wprowadzają problem, gdy krok konwersji jest ręczny, a nie automatyczny. Strona wyczyszczona w styczniu pokaże ostrzeżenie ponownie w czerwcu, jeśli redaktorzy będą przesyłać zdjęcia bezpośrednio z aparatu.

Napraw proces, a nie tylko same pliki. Włącz automatyczną konwersję na poziomie platformy lub ustal prostą zasadę, że obrazy są skalowane i konwertowane przed przesłaniem. Spisanie tej zasady ma znaczenie na każdej stronie, na której publikuje więcej niż jedna osoba, ponieważ audyt mierzy najgorszy obraz, a nie średnią.

Czy powinieneś używać AVIF, WebP, czy obu

Na większości stron używaj samego WebP, a AVIF dodawaj tylko dla największych obrazów na stronie. Wspieranie obu formatów podwaja liczbę plików do wygenerowania, przechowywania i synchronizacji przy oszczędności, która jest niewielka w przypadku zwykłych obrazów.

Kalkulacja zmienia się na stronach bogatych w zdjęcia, gdzie AVIF pozwala zaoszczędzić kolejne 20 do 30 procent na plikach mierzonych już w setkach kilobajtów. Na stronie z obrazem głównym o rozmiarze 600 KB to realna redukcja. Na stronie z miniaturkami o rozmiarze 40 KB dodatkowy proces wymaga więcej wysiłku, niż przynosi korzyści, a sam WebP wystarczy do zaliczenia audytu.

Prawidłowe sprawdzenie wyniku

Uruchom ponownie Lighthouse w oknie prywatnym z wyłączonymi rozszerzeniami, ponieważ rozszerzenia przeglądarki zniekształcają pomiary. Wyniki różnią się również między uruchomieniami, więc porównaj 3 próby, zamiast ufać pojedynczej liczbie.

Upewnij się, że przeglądarka rzeczywiście otrzymuje nowy format, zamiast tylko to zakładać. Otwórz narzędzia deweloperskie, przejdź do zakładki Sieć (Network), pofiltruj według obrazów i odśwież stronę. Kolumna Typ pokazuje, co zostało faktycznie przesłane. Strona nadal serwująca JPEG po konwersji zazwyczaj oznacza, że kod elementu picture jest błędny lub warstwa buorowania (cache) przechowuje poprzednią wersję.

Powiązane audyty, które pojawiają się obok

• Odpowiednio określ rozmiar obrazów. Obraz jest większy niż przestrzeń, w której się wyświetla. Zmień rozmiar zamiast kompresować.
• Wydajnie koduj obrazy. Kompresja jest zbyt słaba. Obniż ustawienie jakości.
• Odłóż ładowanie obrazów poza ekranem. Dodaj leniwe ładowanie (lazy loading) do obrazów poniżej linii przewijania.
• Element Largest Contentful Paint. Zazwyczaj jest to Twój główny obraz (hero), który wymaga uwagi w pierwszej kolejności.
• Elementy graficzne nie mają jawnie określonej szerokości i wysokości. Dodaj oba atrybuty, aby zapobiec przesunięciom układu.

Te 5 audytów zazwyczaj pojawia się razem, a zmiana rozmiaru i konwersja obrazów wymienionych w raporcie rozwiązuje większość z nich za jednym zamachem.

Jak bardzo to rzeczywiście poprawia stronę

Konwersja do nowoczesnych formatów zazwyczaj zmniejsza wagę obrazu o 25 do 35 procent, a wcześniejsza zmiana rozmiaru często przynosi znacznie większe oszczędności. Na stronie bogatej w obrazy połączony efekt często wynosi od 70 do 80 procent.

Poprawa jest widoczna w wskaźniku Largest Contentful Paint, który mierzy, jak szybko pojawia się główna zawartość. O tym pomiarze decyduje zazwyczaj jeden obraz, więc zmniejszenie pliku głównego ma wpływ nieproporcjonalnie duży w stosunku do jego udziału w stronie. Zmniejszenie 20 małych obrazów ma mniejsze znaczenie niż zmniejszenie 1 dużego.

Czego nie robić

Nie usuwaj awaryjnego pliku JPEG i nie konwertuj obrazów, które użytkownicy będą pobierać. Oba błędy to wymiana realnej funkcjonalności na niewielką poprawę wyniku.

Materiały prasowe, przewodniki do wydruku, szablony do pobrania i pliki od dostawców powinny pozostać w formacie JPEG lub PNG, ponieważ WebP słabo radzi sobie poza przeglądarkami. Serwowanie ich w nowoczesnych formatach generuje zgłoszenia do pomocy technicznej od osób, które nie mogą ich otworzyć, co kosztuje więcej niż zaoszczędzony transfer.

Konwersja obrazów wskazanych w raporcie

Konwertuj z oryginalnych plików, a nie z wersji już opublikowanych, ponieważ skompresowany JPEG przenosi uszkodzenia do nowego pliku. Koder nie potrafi odróżnić istniejących artefaktów od rzeczywistych szczegółów i zużywa bity na ich zachowanie.

Wrzuć do 500 plików naraz lub przeciągnij archiwum ZIP bezpośrednio, a cały zestaw skonwertuje się w jednym przebiegu. Wszystko działa w Twojej przeglądarce na Twoim własnym procesorze, więc strony klientów, zasoby testowe i nieopublikowane strony nigdy nie trafiają na serwer. Pełna konwersja strony kończy się w kilka minut bez przesłania ani jednego pliku przez sieć.

Przechowuj skonwertowane pliki obok oryginałów, używając pasujących nazw, aby kod elementu picture mógł być generowany według przewidywalnego wzorca, a nie edytowany ręcznie dla każdego obrazu. Folder zawierający hero.jpg, hero.webp i hero.avif jest prosty do oprogramowania w szablonie, co sprawia, że kolejna migracja formatu będzie konwersją wsadową, a nie przepisywaniem każdej strony.