Możesz wstępnie wczytywać obrazy elastyczne, które mogą znacznie przyspieszyć ładowanie, pomagając przeglądarce rozpoznawać właściwy obraz z elementu srcset przed wyrenderowaniem tagu img.
Omówienie obrazów elastycznych
Obsługa przeglądarek
- 73
- 79
- 78
- 17.2
Załóżmy, że przeglądasz internet na ekranie o szerokości 300 pikseli i strona żąda obrazu o szerokości 1500 pikseli. Zmarnowała mnóstwo mobilnej transmisji danych, ponieważ ekran nie jest w stanie nic zrobić przy tak dodatkowej rozdzielczości. W idealnej sytuacji przeglądarka pobrałaby wersję obrazu, która jest nieco większa od rozmiaru ekranu, np. 325 pikseli. Zapewnia to obraz w wysokiej rozdzielczości bez marnowania danych i przyspiesza wczytywanie.
Elastyczne obrazy umożliwiają przeglądarkom pobieranie różnych zasobów obrazów dla różnych urządzeń. Jeśli nie korzystasz z sieci CDN na potrzeby obrazów, zapisz wiele wymiarów dla każdego obrazu i określ je w atrybucie srcset. Wartość w informuje przeglądarkę o szerokości poszczególnych wersji, dzięki czemu może ona wybrać odpowiednią wersję dla dowolnego urządzenia:
<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">
Wstępne wczytywanie – omówienie
Wstępne ładowanie pozwala poinformować przeglądarkę o kluczowych zasobach, które chcesz wczytać jak najszybciej, zanim zostaną one wykryte w kodzie HTML. Jest to szczególnie przydatne w przypadku zasobów, które nie są łatwo wykrywalne, takich jak czcionki używane w arkuszach stylów, obrazy tła czy zasoby wczytywane ze skryptu.
<link rel="preload" as="image" href="important.png">
imagesrcset i imagesizes
Element <link> korzysta z atrybutów imagesrcset i imagesizes do wstępnego wczytywania obrazów elastycznych. Używaj ich razem z elementem <link rel="preload"> ze składnią srcset i sizes używaną w elemencie <img>.
Jeśli na przykład chcesz wstępnie wczytywać obraz elastyczny, który zawiera:
<img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">
Możesz to zrobić, dodając ten kod do elementu <head> w kodzie HTML:
<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">
Inicjuje to żądanie przy użyciu tej samej logiki wyboru zasobów, której używają srcset i sizes.
Przykłady zastosowań
Oto kilka przypadków użycia wstępnego wczytywania obrazów elastycznych.
Wstępne wczytywanie obrazów elastycznych wstrzykiwanych dynamicznie
Wyobraź sobie, że dynamicznie wczytujesz główne obrazy w ramach pokazu slajdów i wiesz, który obraz będzie wyświetlany jako pierwszy. W takiej sytuacji warto jak najszybciej wyświetlić ten obraz, zamiast czekać na jego załadowanie ze skryptu pokazu slajdów.
Możesz sprawdzić ten problem w witrynie z dynamicznie ładowanym galerią obrazów:
- Otwórz tę prezentację z pokazem slajdów w nowej karcie.
- Naciśnij
Control+Shift+J(lubCommand+Option+Jna komputerze Mac), aby otworzyć Narzędzia deweloperskie. - Kliknij kartę Sieć.
- Z listy Ograniczanie wybierz Szybka 3G.
- Usuń zaznaczenie pola wyboru Disable cache (Wyłącz pamięć podręczną).
- Odśwież stronę.
Użycie tutaj atrybutu preload umożliwia wcześniejsze wczytanie obrazu, dzięki czemu może być gotowy do wyświetlenia, gdy musi go wyświetlić przeglądarka.
Aby zobaczyć różnicę w działaniu wstępnego wczytywania, sprawdź tę samą dynamicznie wczytywaną galerię obrazów, ale z wstępnie wczytywanym pierwszym obrazem, wykonując czynności z pierwszego przykładu.
Wstępnie wczytuj obrazy tła za pomocą zbioru obrazów
Jeśli masz różne obrazy tła dla różnych gęstości ekranu, możesz je określić w CSS za pomocą składni image-set. Następnie przeglądarka może wybrać, które z nich ma wyświetlić, na podstawie DPR ekranu.
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
Problem z obrazami tła CSS polega na tym, że przeglądarka odkrywa je dopiero po pobraniu i przetworzeniu wszystkich CSS w pliku <head> strony.
Możesz sprawdzić ten problem na przykładowej witrynie z elastycznym obrazem tła.
Wstępne wczytywanie elastycznych obrazów pozwala je szybciej wczytywać.
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
Pominięcie atrybutu href daje pewność, że przeglądarki, które nie obsługują parametru imagesrcset w elemencie <link>, ale obsługują image-set w CSS, pobiera prawidłowe źródło. W tym przypadku jednak wstępne wczytywanie
nie przyniesie korzyści.
Zachowanie z poprzedniego przykładu z wczytanym wstępnie elastycznym obrazem tła możesz sprawdzić w prezentacji takiego procesu.
Praktyczne skutki wstępnego wczytywania obrazów elastycznych
Wstępne wczytywanie obrazów elastycznych może w teorii je przyspieszyć, ale jak to działa w praktyce?
Utworzyłem 2 kopie demonstracyjnego sklepu PWA: jedną, która nie wczytuje obrazów wstępnie, i druga, która wstępnie wczytuje niektóre z nich. Ponieważ leniwy kod w witrynie wczytuje obrazy za pomocą JavaScriptu, korzystne może być wstępne wczytywanie tych, które pojawiają się w początkowym widocznym obszarze.
Dało to takie wyniki w przypadku braku wstępnego wczytywania i wstępnego wczytywania obrazu:
- Opcja Rozpocznij renderowanie pozostała bez zmian.
- Nieznacznie poprawił się indeks szybkości (273 ms, ponieważ obrazy przesyłane szybciej nie zajmują dużej części pola piksela).
- Wskaźnik Last Painted Hero został poprawiony o 1, 2 sekundy.
Wstępne wczytywanie i <picture>
Grupa robocza ds. wydajności w internecie rozważa dodanie wstępnie wczytywanego odpowiednika elementów srcset i sizes, ale nie elementu <picture>, który obsługuje „kierunek sztuki”.
Jest jeszcze kilka problemów technicznych do rozwiązania z myślą o wstępnym wczytywaniu <picture>. Tymczasem możesz je obejść:
<picture>
<source srcset="small_cat.jpg" media="(max-width: 400px)">
<source srcset="medium_cat.jpg" media="(max-width: 800px)">
<img src="large_cat.jpg">
</picture>
Logika wyboru źródła obrazu w elemencie <picture> sprawdza w kolejności atrybuty media elementów <source>, znajduje pierwszy pasujący element i używa dołączonego zasobu.
Jako że elastyczne wstępne wczytywanie nie ma pojęcia „kolejność” czy „pierwsze dopasowanie”, musisz przetłumaczyć punkty przerwania na coś takiego:
<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">
Wstępne wczytywanie i type
Element <picture> obsługuje też dopasowywanie w pierwszym obsługiwanym formacie (type), dzięki czemu możesz podawać różne formaty obrazów, aby przeglądarka mogła wybrać pierwszy obsługiwany format. Ten przypadek użycia nie jest obsługiwany przy wstępnym ładowaniu.
W przypadku witryn korzystających z dopasowywania typu zalecamy uniknięcie wstępnego wczytywania i skonfigurowanie skanera wstępnego do pobierania obrazów z elementów <picture> i <source>. Jest to mimo to sprawdzona metoda, zwłaszcza w przypadku korzystania ze wskazówek dotyczących priorytetu, które pomagają określić priorytet odpowiedniego obrazu.
Wpływ na największe wyrenderowanie treści (LCP)
Obrazy mogą być największym kandydatem do wyrenderowania treści (LCP), dlatego ich wstępne wczytywanie może poprawić wskaźnik LCP witryny.
Niezależnie od tego, czy wstępnie wczytywany obraz jest elastyczny, wstępne wczytywanie działa najlepiej, gdy zasobu graficznego nie można znaleźć we wstępnym ładunku znaczników. Ponadto w witrynach, które renderują znaczniki po stronie klienta, lepsze wyniki LCP uzyskują też witryny wysyłające pełne znaczniki z serwera.