Optymalizacja obrazów pod kątem Core Web Vitals

Jak obrazy mogą wpływać na Core Web Vitals?

Obrazy odgrywają istotną rolę w poprawie atrakcyjności wizualnej strony internetowej, ale mogą również znacząco wpływać na szybkość jej ładowania. Core Web Vitals to zestaw metryk, których Google używa do pomiaru user experience strony internetowej, a optymalizacja obrazów jest kluczowym czynnikiem w osiąganiu dobrych wyników. W tym artykule omówimy, jak optymalizować obrazy pod kątem Core Web Vitals i poprawić szybkość ładowania Twojej strony.

Na które Core Web Vitals mogą wpływać obrazy?

Możesz być zaskoczony, gdy dowiesz się, że obrazy mogą wpływać na wszystkie Core Web Vitals. Obrazy, jeśli są kolejkowane do pobrania zbyt późno podczas renderowania lub są po prostu zbyt duże, zwykle skutkują wysokim wynikiem LCP. Jeśli wymiary obrazów nie są ustawione lub zmieniają się podczas fazy ładowania, obrazy mogą również wpływać na wynik CLS. I wreszcie, jeśli dekodowanie obrazów zajmuje zbyt dużo pracy głównego wątku, mogą nawet wpływać na INP. Przyjrzyjmy się bliżej:

Largest Contentful Paint

Jedną z metryk Core Web Vitals jest Largest Contentful Paint (LCP), która mierzy, jak długo trwa, zanim największy element na stronie (taki jak obraz lub wideo) stanie się widoczny dla użytkownika. Jeśli obraz zostanie dodany do kolejki zbyt późno lub ładuje się zbyt długo, może to znacząco obniżyć wynik LCP strony.

Cumulative Layout Shift

Kolejną metryką Core Web Vitals jest Cumulative Layout Shift (CLS), która mierzy, jak bardzo treść na stronie przesuwa się podczas ładowania. Obrazy mogą powodować przesunięcia układu, jeśli nie mają prawidłowo ustawionych wymiarów lub jeśli są wstawiane na stronę po jej załadowaniu, powodując przesuwanie się innych elementów.

First Input Delay i INP

Wreszcie, obrazy mogą również wpływać na trzecią metrykę Core Web Vitals, INP, która mierzy czas potrzebny, aby strona wizualnie zareagowała po interakcji użytkownika ze stroną. Jeśli jest zbyt wiele dużych obrazów wymagających dekodowania, strona może reagować wolniej na interakcje użytkownika, co prowadzi do słabego wyniku INP.

Krok 1: Optymalizacja elementu HTML obrazu pod kątem szybkości

Atrybut Src

Określa URL obrazu. Ta właściwość jest niezbędna, ponieważ informuje przeglądarkę, gdzie znaleźć obraz.

Atrybuty Width i Height

Określają szerokość i wysokość obrazu w pikselach. Te właściwości są ważne dla prawidłowego renderowania obrazu na stronie, ponieważ definiują rozmiar kontenera obrazu i sposób, w jaki obraz się w nim mieści.

Atrybut Alt

Określa alternatywny tekst dla obrazu, jeśli nie może zostać wyświetlony. Jest to ważne z punktu widzenia dostępności, ponieważ pomaga użytkownikom z wadami wzroku zrozumieć, o czym jest obraz. Jest to również ważne dla SEO, ponieważ wyszukiwarki używają tekstu alt do zrozumienia treści obrazu.

Atrybut Loading (leniwe ładowanie)

Określa sposób ładowania obrazu przez przeglądarkę (lazy, eager lub auto). Ta właściwość jest ważna dla poprawy wydajności strony, ponieważ pozwala na asynchroniczne ładowanie obrazów i tylko wtedy, gdy są potrzebne.

Atrybut Srcset

Atrybut Sizes

Atrybut Decoding

Atrybut Fetchpriority

Atrybut fetchpriority określa priorytet pobierania zasobu w stosunku do innych zasobów na stronie. Atrybut priorytetu może przyjąć jedną z trzech wartości: "high", "medium" lub "low". Zasób o wysokim priorytecie jest ładowany przed zasobami o średnim lub niskim priorytecie. Zasób o średnim priorytecie jest ładowany przed zasobami o niskim priorytecie. Zasoby o tym samym priorytecie są ładowane w kolejności, w jakiej pojawiają się w HTML.

Krok 2: Upewnij się, że obraz jest kolejkowany do pobrania jak najwcześniej

Drugą rzeczą do zrobienia, po optymalizacji HTML, jest przyjrzenie się harmonogramowi ładowania obrazów. W wielu przypadkach największym wąskim gardłem, jeśli chodzi o wpływ obrazów na metrykę LCP, jest późne zaplanowanie pobrania. Jeśli przeglądarka ma szansę pobrać element LCP wcześnie podczas procesu renderowania, obraz będzie dostępny dla przeglądarki jak najwcześniej, a przeglądarka może zacząć renderować ten element wcześnie w procesie renderowania.

Brzmi prosto, prawda? Cóż, jak upewnić się, że obraz jest kolejkowany do pobrania jak najwcześniej.

Preload elementu LCP

Najskuteczniejszym sposobem zapewnienia wczesnego pobrania jest preload obrazu. Preload obrazu realizuje się za pomocą prostego tagu na początku elementu <head>. Na przykład:

<link rel="preload" as="image" href="image.jpg">

Ten prosty tag poinformuje przeglądarkę, że wkrótce będziemy potrzebować "image.jpg", a przeglądarka natychmiast rozpocznie pobieranie tego pliku.

Natychmiastowe ładowanie elementu LCP (eager)

Użyj wysokiego fetchpriority

Jeśli z jakiegoś powodu nie możesz wykonać preload elementu LCP, przynajmniej upewnij się, że element ma atrybut fetchpriority ustawiony na high. To podpowie przeglądarce, że obraz jest ważny dla strony, a przeglądarka pobierze go z wysokim priorytetem. Pamiętaj, że użycie fetchpriority="high" jest zwykle mniej wydajne niż preload obrazu!

Unikaj leniwego ładowania opartego na JavaScript

Krok 3: Upewnij się, że obraz jest pobierany jak najszybciej

Trzecią rzeczą do zrobienia jest upewnienie się, że nie marnujesz cennych zasobów sieciowych na obrazy, które są większe niż powinny być. Możesz to zrobić, używając responsywnych obrazów, kompresji oraz nowych i szybszych kontenerów obrazów

Responsywne obrazy

Kompresja obrazów

Nowe i szybsze kontenery obrazów

Obrazy są często jednymi z największych zasobów na stronie internetowej i mogą znacząco spowolnić szybkość ładowania strony, jeśli nie są zoptymalizowane. Nowsze i szybsze kontenery obrazów, takie jak formaty WebP i AVIF, mogą pomóc zmniejszyć rozmiar pliku obrazów bez poświęcania ich jakości. Oznacza to, że mogą być ładowane szybciej, co może poprawić szybkość ładowania strony.

Krok 4: Wyeliminuj przesunięcia układu!

Obrazy, które zmieniają rozmiar podczas ładowania, spowodują przesunięcie układu. To takie proste. Istnieją 3 główne powody, dla których obrazy powodują przesunięcie układu (jest ich znacznie więcej, ale te 3 są najczęstsze)

1. Brakujące wymiary obrazu

2. Problemy ze stylowaniem

Zwykle obrazy są powstrzymywane przed powiększaniem się poza okno przeglądarki za pomocą prostej sztuczki CSS

img{
   max-width:100%;
   height:auto;
}

To świetna sztuczka i powinieneś jej używać. Niestety regularnie widzę warianty tej sztuczki, które powodują przesunięcie układu. Na przykład dodając width:auto:

img{
   max-width:100%;
   height:auto;
   width:auto;
}

To sprawi, że każdy obraz będzie renderowany z automatyczną szerokością i wysokością. Zwykle oznacza to, że przeglądarka wyrenderuje obraz w rozmiarze 0x0px, zanim obraz zostanie pobrany

3. Placeholdery

Niektóre skrypty leniwego ładowania oparte na JavaScript używają placeholderów. Jeśli używasz sztuczki CSS, takiej jak wyżej wspomniane max-width:100% i height:auto, to automatyczna wysokość kwadratowego placeholdera nie będzie pasować do atrybutu height obrazu. Zasadniczo obraz najpierw wyrenderuje się z kwadratowym placeholderem o wymiarach 720x720, a gdy finalny obraz zostanie pobrany, wyrenderuje się w rozmiarze 720*180

<img 
  src="1x1placeholder.png" 
  data-src="hero.png" 
  width="720" 
  height="180"
  style="height:auto;max-width:100%"
>

Krok 5: Chroń główny wątek

Następną rzeczą, o którą należy zadbać, jest to, aby zbyt wiele obrazów nie było dekodowanych na głównym wątku jednocześnie. Zwykle nie będzie to problemem, ale widziałem to wiele razy na stronach z listami produktów (gdzie czasem nawet 500 obrazów konkuruje o zasoby!).

Sztuczka polega na dodaniu decoding="async" do wszystkich obrazów, aby upewnić się, że mogą być dekodowane na osobnym wątku. Staraj się również unikać dekodowania tak wielu obrazów naraz, dodając loading="lazy" do wszystkich obrazów poniżej widocznego obszaru i ukrytych obrazów.

Krok 6: Wybierz odpowiednią strategię dla każdego obrazu!

Strategie obrazów dla elementu LCP

Element LCP jest zwykle najważniejszym elementem wizualnym. Musimy więc naprawdę nadać mu priorytet."

1. Wykonaj preload obrazu wcześnie w sekcji head strony za pomocą tego kodu: <link rel="preload" as="image" href="path-to-img.png">
2. Poinformuj przeglądarkę, że ten obraz nie powinien być ładowany leniwie, ustawiając loading="eager" lub pomijając atrybut loading
3. Podpowiedz przeglądarce, że ten obraz powinien być pobierany z wysokim priorytetem, używając fetchpriority="high" (jeśli wykonujesz preload obrazu, możesz pominąć tę część)
4. Ustaw decoding="sync", ponieważ ten element jest tak ważny, że chcemy go dekodować na głównym wątku

Strategia obrazów dla logo i innych widocznych (nie-LCP) obrazów

Widoczne obrazy powinny być ładowane dość szybko podczas ładowania strony, ale najlepiej po elemencie LCP. Możemy to osiągnąć, wykonując preload elementu LCP. To nada tym widocznym obrazom ich naturalną, prawidłową kolejność pobierania.

1. Poinformuj przeglądarkę, że ten obraz nie powinien być ładowany leniwie, ustawiając loading="eager" lub pomijając atrybut loading
   
2. Ustaw decoding="async", ponieważ ten element może być bezpiecznie dekodowany poza głównym wątkiem!

Strategia obrazów dla obrazów poniżej widocznego obszaru

Wszystkie obrazy poniżej widocznego obszaru powinny być ładowane leniwie. To takie proste! Nie ma wyjątków!

1. Poinformuj przeglądarkę, że ten obraz powinien być ładowany leniwie, ustawiając loading="lazy"
   
2. Ustaw decoding="async", ponieważ ten element może być bezpiecznie dekodowany poza głównym wątkiem!

Unikaj obrazów tła

Jeśli używasz obrazów tła, musisz to przemyśleć. Obrazów tła nie można ładować leniwie i nie można kontrolować właściwości decoding ani ustawić fetchpriority. Obrazy tła zwykle nie są responsywne, co prawdopodobnie będzie Cię kosztować dużo przepustowości. Ale co najważniejsze, obrazy tła są zwykle odkrywane po pobraniu plików CSS przez przeglądarkę. To prawie nigdy nie jest odpowiedni moment na uruchomienie pobierania obrazu!

Możesz użyć zwykłych tagów obrazów w połączeniu z CSS object-fit:cover, aby normalne obrazy zachowywały się jak obrazy tła!