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

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. Najlepiej, 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ę dla dowolnego urządzenia:

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

Omówienie wstępnego wczytywania

Browser Support

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

`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">

Spowoduje to wysłanie żądania z użyciem tej samej logiki wyboru zasobów, której używają srcset i sizes.

Przypadki użycia

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

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

Otwórz tę prezentację w nowej karcie.
Aby otworzyć Narzędzia dla programistów, naciśnij Control+Shift+J (lub Command+Option+J na Macu).
Kliknij kartę Sieć.
Z listy Ograniczanie przepustowości wybierz Szybkie 3G.
Odznacz pole wyboru Disable cache (Wyłącz pamięć podręczną).
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 wczytaniu 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 styló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 wodospadowy, 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">

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 responsywnym obrazem tła, w demonstracji wstępnego ładowania responsywnego 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.

W przypadku braku wstępnego wczytywania i wstępnego wczytywania obrazu uzyskano następujące wyniki:

Start Render pozostał 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 w WebPageTest pokazujące, że wstępnie załadowane obrazy wyświetlają się 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 atrybut 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)">
<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)">

Wczytywanie z wyprzedzeniem i `type`

Element <picture> obsługuje też dopasowywanie do pierwszego elementu type, co umożliwia podawanie różnych formatów obrazów, aby przeglądarka mogła wybrać pierwszy obsługiwany format. W przypadku wstępnego wczytywania ten przypadek użycia nie jest obsługiwany.

W przypadku witryn korzystających z dopasowywania typu 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 sprawdzona metoda, szczególnie w przypadku korzystania z priorytetu pobierania, który pomaga ustalić priorytet odpowiedniego 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 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ększe polepszenie 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.