Wstępne wczytywanie obrazów elastycznych

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

Możesz wstępnie wczytywać elastyczne obrazy, co może znacznie przyspieszyć ich ładowanie, ponieważ pomaga przeglądarce zidentyfikować prawidłowy obraz z srcset przed wyrenderowaniem tagu img.

Omówienie obrazów elastycznych

Browser Support

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

Source

Załóżmy, że przeglądasz internet na ekranie o szerokości 300 pikseli, a strona żąda obrazu o szerokości 1500 pikseli. Ta strona zużyła dużo danych mobilnych, ponieważ ekran nie może wykorzystać tak dużej rozdzielczości. Idealnie byłoby, gdyby przeglądarka pobrała wersję obrazu, która jest nieco szersza niż rozmiar ekranu, np. 325 pikseli. Zapewnia to obraz w wysokiej rozdzielczości bez marnowania danych i umożliwia szybsze wczytywanie obrazu.

Obrazy elastyczne umożliwiają przeglądarkom pobieranie różnych zasobów obrazów na różne urządzenia. Jeśli nie korzystasz z sieci CDN do obsługi obrazów, zapisz kilka wymiarów każdego obrazu i określ je w atrybucie srcset. Wartość w informuje przeglądarkę o szerokości każdej wersji, dzięki czemu może ona wybrać odpowiednią wersję na dowolnym urządzeniu:

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

Wstępne wczytywanie

Browser Support

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

Source

Wstępne wczytywanie umożliwia informowanie przeglądarki o kluczowych zasobach, które chcesz wczytać jak najszybciej, zanim zostaną wykryte w HTML. Jest to szczególnie przydatne w przypadku zasobów, które nie są łatwo dostępne, takich jak czcionki zawarte w arkuszach stylów, obrazy tła lub zasoby wczytywane ze skryptu.

<link rel="preload" as="image" href="important.png" fetchpriority="high">

imagesrcset i imagesizes

Element <link> używa atrybutów imagesrcset i imagesizes do wstępnego wczytywania obrazów elastycznych. Używaj ich razem z elementem <link rel="preload">, stosując składnię srcset i sizes w elemencie <img>.

Jeśli na przykład chcesz wstępnie wczytać obraz responsywny 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 w sekcji <head> kodu HTML ten wiersz:

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw" fetchpriority="high">

Wysyła to żądanie przy użyciu tej samej logiki wyboru zasobów, co srcset i sizes.

Przypadki użycia

Oto kilka przypadków użycia wstępnego wczytywania obrazów responsywnych.

Wstępne wczytywanie dynamicznie wstawianych obrazów elastycznych

Wyobraź sobie, że dynamicznie wczytujesz banery powitalne 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ć w witrynie z dynamicznie wczytywaną galerią obrazów:

  1. Otwórz tę prezentację 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 przepustowości wybierz Szybkie 3G.
  5. Odznacz pole wyboru Disable cache (Wyłącz pamięć podręczną).
  6. Odśwież stronę.
Panel Sieć w Narzędziach deweloperskich w Chrome pokazujący wykres kaskadowy, na którym zasób JPEG zaczyna się pobierać dopiero po wykonaniu kodu JavaScript.
Bez wstępnego wczytywania obrazy zaczynają się wczytywać po zakończeniu działania skryptu w przeglądarce. W przypadku pierwszego obrazu to opóźnienie jest niepotrzebne.

Użycie tutaj preload pozwala rozpocząć ładowanie obrazu z wyprzedzeniem, dzięki czemu może on być gotowy do wyświetlenia, gdy przeglądarka będzie tego potrzebować.

Panel Sieć w Narzędziach deweloperskich w Chrome pokazujący wykres kaskadowy z zasobem JPEG pobieranym równolegle z kodem JavaScript.
Wstępne wczytanie pierwszego obrazu umożliwia rozpoczęcie wczytywania w tym samym czasie co skrypt.

Aby zobaczyć, jaką różnicę robi wstępne wczytywanie, sprawdź tę samą galerię obrazów wczytywaną dynamicznie, ale z wstępnie wczytanym pierwszym obrazem, wykonując czynności z pierwszego przykładu.

Wstępne wczytywanie obrazów tła za pomocą image-set

Jeśli masz różne obrazy tła dla różnych gęstości ekranu, możesz je określić w arkuszu CSS za pomocą składni image-set. Przeglądarka może wtedy wybrać, który z nich ma być wyświetlany, 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 wykrywa je dopiero po pobraniu i przetworzeniu wszystkich plików CSS w sekcji <head> strony.

Możesz sprawdzić ten problem na przykładowej stronie internetowej z obrazem tła dostosowującym się do rozmiaru ekranu.

Panel Sieć w Narzędziach deweloperskich w Chrome pokazujący wykres kaskadowy, na którym zasób JPEG zaczyna się pobierać dopiero po pobraniu CSS.
W tym przykładzie pobieranie obrazu rozpoczyna się dopiero po całkowitym pobraniu CSS, co powoduje niepotrzebne opóźnienie w wyświetlaniu obrazu.

Wstępne wczytywanie elastycznych obrazów pozwala szybciej wczytywać te obrazy.

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x" fetchpriority="high">

Pominięcie atrybutu href pozwala mieć pewność, że przeglądarki, które nie obsługują atrybutu imagesrcset w elemencie <link>, ale obsługują image-set w CSS, pobiorą prawidłowe źródło. W tym przypadku nie skorzystają jednak z wstępnego wczytywania.

Możesz sprawdzić, jak zachowuje się poprzedni przykład z wstępnie załadowanym elastycznym obrazem tła, w demonstracji wstępnego ładowania elastycznego tła.

Panel Sieć w Narzędziach deweloperskich w Chrome przedstawiający wykres kaskadowy z zasobem JPEG pobieranym równolegle z niektórymi plikami CSS.
W tym przypadku obraz i CSS zaczynają się pobierać w tym samym czasie, co przyspiesza wczytywanie obrazu.

Praktyczne efekty wstępnego wczytywania obrazów responsywnych

Wstępne wczytywanie obrazów elastycznych może teoretycznie przyspieszyć ich wyświetlanie, ale jak to wygląda w praktyce?

Aby odpowiedzieć na to pytanie, utworzyłem 2 kopie sklepu demonstracyjnego PWA: jedną, która nie wstępnie wczytuje obrazów, i drugą, która wstępnie wczytuje niektóre z nich. Ponieważ witryna leniwie ładuje obrazy za pomocą JavaScriptu, może skorzystać z wstępnego ładowania tych, które pojawiają się w początkowym widocznym obszarze.

Dało to następujące wyniki w przypadku braku wstępnego wczytywania i wstępnego wczytywania obrazu:

  • Start Render pozostało bez zmian.
  • Indeks szybkości nieznacznie się poprawił (273 ms, ponieważ obrazy docierają szybciej i nie zajmują dużej części obszaru pikseli).
  • Last Painted Hero został znacznie ulepszony o 1, 2 sekundy.
Porównanie pasków filmowych WebPageTest pokazujące, że wstępnie załadowane obrazy są wyświetlane o około 1,5 sekundy szybciej.
Wstępnie wczytane obrazy pojawiają się znacznie szybciej, co znacznie poprawia wrażenia użytkowników.

Wczytywanie z wyprzedzeniem i <picture>

Grupa robocza ds. wydajności stron internetowych dyskutuje nad dodaniem odpowiednika wstępnego wczytywania dla elementów srcset i sizes, ale nie dla elementu <picture>, który obsługuje przypadek użycia „kierunku artystycznego”.

W przypadku wstępnego wczytywania <picture> nadal istnieje wiele problemów technicznych do rozwiązania, ale na razie można 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 elementu <picture> sprawdza kolejno atrybuty media elementów <source>, znajduje pierwszy pasujący i używa dołączonego zasobu.

W przypadku wstępnego wczytywania elastycznych reklam nie ma pojęcia „kolejność” ani „pierwsze dopasowanie”, więc musisz przekształcić punkty przerwania w coś takiego:

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)" fetchpriority="high">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)" fetchpriority="high">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)" fetchpriority="high">

Wczytywanie z wyprzedzeniem i type

Element <picture> obsługuje też dopasowywanie do pierwszego type, co pozwala udostępniać różne formaty obrazów, aby przeglądarka mogła wybrać pierwszy obsługiwany format.

Ten przypadek użycia jest tylko częściowo obsługiwany w przypadku wstępnego wczytywania: przeglądarki powinny pobierać wstępnie wczytywane zasoby tylko w przypadku obsługiwanych typów. Możesz więc użyć tego, aby zapobiec wstępnemu wczytywaniu przez przeglądarki nieobsługiwanych typów MIME, dodając to do wstępnego wczytywania:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

W przeciwieństwie do <picture> nie zatrzyma się jednak na pierwszym obsługiwanym typie. Jeśli więc uwzględnisz wiele wstępnych wczytań dla różnych typów, wszystkie obrazy zostaną wstępnie wczytane:

Nie rób tego – wstępne wczytywanie wielu typów:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">
<link rel="preload" href="image.jpg" type="image/jpg" as="image" fetchpriority="high">

Zamiast tego wczytaj wstępnie preferowany typ:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

Wstępne wczytywanie najnowszego formatu (w tym przypadku AVIF) działa jak progresywne ulepszenie, w którym przeglądarki obsługujące ten typ będą korzystać z wstępnego wczytywania, a inne nie.

W przypadku witryn, w których obraz można szybko znaleźć w kodzie HTML, zalecamy unikanie wstępnego wczytywania i zamiast tego używanie skanera wstępnego wczytywania do pobierania obrazów z elementów <picture> i <source>. Jest to i tak dobra praktyka, zwłaszcza gdy używasz priorytetu pobierania, aby pomóc w ustaleniu priorytetu odpowiedniego obrazu, ponieważ umożliwia to wstępne wczytanie dokładnego obrazu w zależności od obsługi przeglądarki. Eliminuje też ryzyko, że wstępne wczytywanie stanie się nieaktualne w stosunku do głównego kodu, gdy zmienią się obrazy lub strony.

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 wczytywanie może poprawić LCP witryny.

Niezależnie od tego, czy wstępnie wczytywany obraz jest responsywny, wstępne wczytywanie działa najlepiej, gdy zasób obrazu nie jest wykrywalny w początkowym ładunku znaczników. Większą poprawę LCP uzyskasz też w przypadku witryn, które renderują znaczniki po stronie klienta, niż w przypadku witryn, które wysyłają kompletne znaczniki z serwera.