Ta strona została przetłumaczona przez Cloud Translation API.

Wstępne wczytywanie obrazów elastycznych

Barry Pollard

Yoav Weiss

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

Obsługa przeglądarek

Ź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 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 (lub Command+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ę.

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

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 nie rozpoczyna się, dopóki kod CSS nie zostanie w pełni pobrany, co powoduje niepotrzebne opóźnienie w wyświetlaniu obrazu.

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.

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:

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.

Porównanie paska zdjęć w aplikacji WebPageTest pokazujące wstępnie wczytane obrazy są wyświetlane o ok.1,5 sekundy szybciej. — Przedwstępnie załadowane obrazy są wyświetlane znacznie szybciej, co znacznie poprawia wrażenia użytkowników.

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.