Możesz wstępnie wczytywać elastyczne obrazy, co pozwoli na ich wczytywanie znacznie szybciej, ponieważ przeglądarka będzie mogła zidentyfikować odpowiedni obraz z atrybutu srcset
, zanim zrenderuje tag img
.
Omówienie obrazów elastycznych
Obsługa przeglądarek
Załóżmy, że przeglądasz internet na ekranie o szerokości 300 pikseli, a strona prosi o obraz o szerokości 1500 pikseli. Ta strona zużyła dużo danych mobilnych, ponieważ Twój ekran nie może wykorzystać tej dodatkowej rozdzielczości. W idealnej sytuacji przeglądarka pobierałaby wersję obrazu, która jest tylko trochę szersza od rozmiaru ekranu, np. o 325 pikseli. Dzięki temu obraz będzie miał wysoką rozdzielczość bez marnowania danych i szybciej się wczyta.
Obrazy elastyczne pozwalają przeglądarkom pobierać różne zasoby obrazów na różne urządzenia. Jeśli nie używasz CDN obrazów, zapisz dla każdego obrazu kilka wymiarów i określ je za pomocą atrybutu srcset
. Wartość w
informuje przeglądarkę o szerokości każdej 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="…">
Omówienie wstępnego wczytywania
Wstępne wczytywanie umożliwia informowanie przeglądarki o kluczowych zasobach, które chcesz wczytać jak najszybciej, zanim zostaną odkryte w pliku HTML. Jest to szczególnie przydatne w przypadku zasobów, które nie są łatwo dostępne, takich jak czcionki w arkuszu stylów, obrazy tła czy zasoby wczytywane ze skryptu.
<link rel="preload" as="image" href="important.png">
imagesrcset
i imagesizes
Element <link>
używa atrybutów imagesrcset
i imagesizes
do wstępnego pobierania obrazów w konfiguracji elastycznej. Używaj ich obok elementu <link rel="preload">
, stosując składnię srcset
i sizes
w elemencie <img>
.
Jeśli na przykład chcesz wstępnie załadować elastyczny obraz określony za pomocą:
<img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">
Aby to zrobić, dodaj do elementu <head>
w pliku 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
.
Przypadki użycia
Oto kilka przykładów zastosowania wstępnego wczytywania obrazów elastycznych.
Wstępnie wczytywanie dynamicznie wstrzykiwanych obrazów elastycznych
Wyobraź sobie, że wczytujesz dynamicznie obrazy główne w ramach pokazu slajdów i wiesz, który obraz będzie wyświetlany jako pierwszy. W takim przypadku prawdopodobnie chcesz wyświetlić ten obraz jak najszybciej, a nie czekać, aż skrypt pokazu slajdów go wczyta.
Ten problem możesz sprawdzić na stronie z dynamicznie wczytywaną galerią obrazów:
- Otwórz to demo prezentacji w nowej karcie.
- Aby otworzyć Narzędzia dla programistów, naciśnij
Control+Shift+J
(lubCommand+Option+J
na Macu). - Kliknij kartę Sieć.
- Z listy Ograniczanie wybierz Szybkie 3G.
- Odznacz pole wyboru Disable cache (Wyłącz pamięć podręczną).
- Odśwież stronę.
Użycie tutaj parametru preload
powoduje, że obraz zacznie się wczytywać z wyprzedzeniem, dzięki czemu będzie gotowy do wyświetlenia, gdy przeglądarka będzie go potrzebować.
Aby zobaczyć różnicę, jaką daje wstępne wczytywanie, sprawdź tę samą dynamicznie wczytywaną galerię obrazów, ale z wstępnie wczytanym pierwszym obrazem. Aby to zrobić, wykonaj czynności opisane w pierwszym przykładzie.
Wczytaj wstępnie obrazy tła za pomocą zestawu obrazów
Jeśli masz różne obrazy tła dla różnych gęstości ekranu, możesz je określić w arkuszu stylów CSS za pomocą składni image-set
. Przeglądarka może wybrać, które z nich wyświetlić, na podstawie DPR ekranu.
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
Problem z obrazami tła w CSS polega na tym, że przeglądarka odkrywa je dopiero po pobraniu i przetworzeniu wszystkich plików CSS na stronie.<head>
Ten problem możesz sprawdzić na przykładowej stronie internetowej z responsywnym obrazem tła.
Elastyczne wstępne wczytywanie obrazów pozwala szybciej wczytywać te obrazy.
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
Pominięcie atrybutu href
pozwala zapewnić, że przeglądarki, które nie obsługują atrybutu imagesrcset
w elemencie <link>
, ale obsługują atrybut image-set
w CSS, pobierają prawidłowy element źródłowy. W tym przypadku nie skorzystają jednak z wstępnego wczytania.
W demo wczytywania w tle obrazu tła możesz sprawdzić, jak poprzedni przykład zachowuje się w przypadku wczytanego w tle obrazu tła w wersji elastycznej.
Praktyczne skutki wstępnego wczytania elastycznych obrazów
Teoretycznie, wstępne wczytywanie obrazów elastycznych może przyspieszyć ich wyświetlanie, ale jak to działa w praktyce?
W tym celu utworzyłem 2 kopie demo sklepu PWA: jedną, która nie wczytuje wstępnie obrazów, oraz jedną, która wczytuje wstępnie niektóre z nich. Ponieważ witryna leniwie ładuje obrazy za pomocą JavaScriptu, warto wstępnie wczytać te, które pojawiają się w pierwszym widocznym obszarze.
W przypadku brak wstępnego wczytania i wstępnego wczytania obrazu uzyskaliśmy następujące wyniki:
- Rozpocznij renderowanienie uległa zmianie.
- Wskaźnik szybkości nieznacznie się poprawił (273 ms, ponieważ obrazy docierają szybciej i nie zajmują dużej części obszaru pikseli).
- Czas wykonania zadania Last Painted Hero znacznie się skrócił – o 1, 2 sekundy.
Wczytaj z wyprzedzeniem i <picture>
Grupa robocza ds. wydajności stron internetowych rozważa dodanie elementu odpowiadającego wstępnemu wczytywaniu dla elementów srcset
i sizes
, ale nie elementu <picture>
, który obsługuje przypadek użycia „kierowanie artystyczne”.
Wciąż występuje kilka problemów technicznych, które trzeba rozwiązać, aby można było korzystać z wstępnego wczytywania <picture>
. Na razie możesz skorzystać z tych 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 elementu <picture>
kolejno sprawdza atrybuty media
elementów <source>
, znajduje pierwszy pasujący atrybut i używa dołączonego zasobu.
Ponieważ w przypadku wstępnego wczytywania w ramach strony responsywnej nie ma pojęcia „kolejności” ani „pierwszego dopasowania”, punkty graniczne trzeba przekształcić w 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)">
Wczytaj z wyprzedzeniem i type
Element <picture>
obsługuje też dopasowanie na podstawie pierwszego type
, co pozwala Ci podać różne formaty obrazów, aby przeglądarka mogła wybrać pierwszy obsługiwany format. Ten przypadek użycia nie jest obsługiwany w przypadku wstępnego ładowania.
W przypadku witryn korzystających z dopasowania typu zalecamy unikanie wstępnego ładowania i zamiast tego użycie skanera wstępnego ładowania, który pobiera obrazy z elementów <picture>
i <source>
. Jest to sprawdzona metoda, zwłaszcza gdy używasz opcji Priorytet pobierania, aby ustawić odpowiedni priorytet dla obrazu.
Wpływ na największe wyrenderowanie treści (LCP)
Obrazy mogą być kandydatami do największego wyrenderowania treści (LCP), więc ich wstępne wczytanie może poprawić LCP witryny.
Niezależnie od tego, czy obraz, który wczytujesz w poprzednim ładowaniu, jest responsywny, wczytywanie w poprzednim ładowaniu działa najlepiej, gdy zasób obrazu nie jest możliwy do wykrycia w pierwotnym pliku danych znaczników. W przypadku witryn, które renderują znaczniki po stronie klienta, odnotujesz też większe polepszenie LCP niż w przypadku witryn, które wysyłają kompletne znaczniki ze strony serwera.