Wstępne wczytywanie obrazów elastycznych

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

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

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 78.
  • Safari: 17.2.

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

Obsługa przeglądarek

  • Chrome: 50.
  • Edge: ≤79.
  • Firefox: 85.
  • Safari: 11.1.

Źródło

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:

  1. Otwórz to demo prezentacji w nowej karcie.
  2. Aby otworzyć Narzędzia dla programistów, naciśnij Control+Shift+J (lub Command+Option+J na Macu).
  3. Kliknij kartę Sieć.
  4. Z listy Ograniczanie wybierz Szybkie 3G.
  5. Odznacz pole wyboru Disable cache (Wyłącz pamięć podręczną).
  6. Odśwież stronę.
Panel sieciowy w Narzędziach deweloperskich Chrome pokazujący kaskadę z zasobem JPEG, który zaczyna się pobierać dopiero po wykonaniu kodu JavaScript.
Bez wstępnego wczytania obrazy zaczynają się wczytywać po zakończeniu działania skryptu przez przeglądarkę. W przypadku pierwszego obrazu opóźnienie nie jest konieczne.

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ć.

Panel Sieć w Narzędziach deweloperskich w Chrome pokazujący kaskadę z zasobami JPEG pobieranymi równolegle z niektórymi skryptami JavaScript.
Wstępne załadowanie pierwszego obrazu powoduje, że zacznie się ono wczytywać w tym samym czasie co skrypt.

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.

Panel Sieć w Narzędziach deweloperskich Chrome pokazujący kaskadę z zasobem JPEG, który zaczyna się pobierać dopiero po przesłaniu niektórych plików CSS.
W tym przykładzie pobieranie obrazu rozpoczyna się dopiero po całkowitym pobraniu pliku CSS, co powoduje niepotrzebne opóźnienie wyświetlania obrazu.

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.

Panel Sieć w Narzędziach deweloperskich w Chrome pokazujący kaskadę z zasobami JPEG pobieranymi równolegle z plikami CSS.
Tutaj obraz i CSS zaczynają się pobierać w tym samym czasie, co pozwala na szybsze wczytywanie obrazu.

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:

Porównanie filmstripów w WebPageTest pokazuje, że wczytane wcześniej obrazy są wyświetlane o około 1,5 sekundy szybciej.
Przedwstępnie załadowane obrazy wczytują się znacznie szybciej, co znacznie poprawia wrażenia użytkownika.

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.