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. Zmarnowała ona mnóstwo mobilnej transmisji danych, ponieważ ekran nie jest w stanie zrobić nic przy takiej rozdzielczości. W idealnej sytuacji przeglądarka pobierałaby wersję obrazu, która jest tylko trochę szersza od rozmiaru ekranu, na przykład 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 elastycznych. 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 ładuj obrazy elastyczne wstawiane dynamicznie
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 najlepiej będzie, jak najszybciej wyświetlić ten obraz i nie czekać, aż skrypt pokazu slajdów się załaduje.
Ten problem możesz sprawdzić na stronie internetowej z dynamicznie wczytywaną galerią obrazów:
- Otwórz to demo prezentacji w nowej karcie.
- Naciśnij
Control+Shift+J
(lubCommand+Option+J
na Macu), aby otworzyć Narzędzia deweloperskie. - Kliknij kartę Sieć.
- Z listy Ograniczanie wybierz Szybkie 3G.
- Usuń zaznaczenie pola wyboru 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 poznać różnice, jakie powoduje wstępne wczytywanie, sprawdź tę samą dynamicznie ładowaną galerię obrazów, ale z pierwszym wczytywanym obrazem, wykonując czynności podane w pierwszym przykładzie.
Wstępnie wczytuj 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 określić je w CSS, używając składni image-set
. Przeglądarka może potem wybrać, która z nich ma być widoczna, 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.
Ten problem możesz sprawdzić na przykładowej stronie internetowej z responsywnym obrazem tła.
Wstępne wczytywanie obrazów elastycznych pozwala szybciej wczytywać te obrazy.
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
Pominięcie atrybutu href
daje pewność, że przeglądarki, które w elemencie <link>
nie obsługują polecenia imagesrcset
, ale obsługują image-set
w CSS, pobierają prawidłowe źródło. W tym przypadku nie będą one jednak korzystać z wstępnego wczytywania.
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.
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).
- Pozycja Last Painted Hero wzrosła o 1, 2 sekundy.
Wstępne wczytywanie 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>
sprawdza kolejno atrybuty media
elementów <source>
, znajduje pierwszy pasujący atrybut i używa załączonego zasobu.
Ponieważ w przypadku wstępnego wczytania w ramach strony responsywnej nie ma pojęcia „kolejność” ani „pierwsze dopasowanie”, 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)">
Wstępne wczytywanie 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, które korzystają 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ć największymi kandydatami do wyrenderowania treści (LCP), dlatego ich wstępne wczytywanie może poprawić LCP witryny.
Niezależnie od tego, czy wstępnie wczytywany obraz jest responsywny, wstępne wczytywanie działa najlepiej, gdy zasobu obrazu nie można znaleźć w początkowym ładunku znaczników. W przypadku witryn, które renderują znaczniki po stronie klienta, LCP będzie się też poprawiać bardziej niż w przypadku witryn wysyłających kompletne znaczniki ze strony serwera.