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

Wstępne wczytywanie obrazów elastycznych

Barry Pollard

Yoav Weiss

Możesz wstępnie ładować obrazy elastyczne, dzięki czemu Twoje obrazy mogą się ładować znacznie szybsze, pomagając przeglądarce rozpoznać właściwy obraz z srcset, zanim wyrenderuje 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 wysyła żądanie obrazu o szerokości 1500 pikseli. Ta strona zmarnowała mnóstwo czasu na komórki bo ekran nie jest w stanie zrobić nic przy takiej rozdzielczości. Najlepiej, gdyby przeglądarka pobrała niewiele wersji obrazu szerszy niż ekran, np. 325 pikseli. Dzięki temu wysokiej rozdzielczości, nie marnując danych, a także przyspieszają ładowanie.

Obrazy elastyczne pozwalają przeglądarkom pobierać różne zasoby graficzne dla różnych urządzeń. Jeśli nie chcesz użyj graficznej sieci CDN, dla każdej z nich zapisz wiele wymiarów i określ je w atrybucie srcset. Wartość w informuje Google używa szerokości każdej wersji, by wybrać odpowiednią dla dowolne urządzenie:

<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 poinformowanie przeglądarki o tym, które chcesz wczytać jak najszybciej, zanim wykryte w kodzie HTML. Jest to szczególnie przydatne w przypadku zasobów, które nie są łatwo wykrywalne, takie jak czcionki zawarte w arkuszach stylów, obrazach tła lub zasobów wczytywanych ze skryptu.

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

`imagesrcset` i `imagesizes`

Element <link> wykorzystuje atrybuty imagesrcset i imagesizes do wstępnie wczytywać elastyczne obrazy. Używaj ich razem <link rel="preload"> ze składnią srcset i sizes używaną w parametrze <img>.

Jeśli np. chcesz wstępnie wczytać obraz elastyczny 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 <head> kodu HTML:

<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 uruchomienie żądania przy użyciu tej samej logiki wyboru zasobów, która srcset i sizes używają.

Przypadki użycia

Oto niektóre przypadki użycia wstępnego wczytywania obrazów elastycznych.

Wstępnie ładuj obrazy elastyczne wstawiane dynamicznie

Wyobraź sobie, że dynamicznie wczytujesz obrazy banera jako część pokazu slajdów, a następnie żeby wiedzieć, który obraz wyświetli się jako pierwszy. W takim przypadku warto pokaż go jak najszybciej i nie czekaj, aż skrypt pokazu slajdów ją wczytać.

Ten problem możesz sprawdzić w witrynie z dynamicznie ładowaną galerią obrazów:

Otwórz prezentację z pokazem slajdów Otwórz nową kartę.
Naciśnij Control+Shift+J (lub Command+Option+J na Macu), aby otworzyć Narzędzia deweloperskie.
Kliknij kartę Sieć.
Na liście Throttling (Throttling) wybierz Fast 3G (Szybkie 3G).
Usuń zaznaczenie pola wyboru Wyłącz pamięć podręczną.
Odśwież stronę.

Panel sieci w Narzędziach deweloperskich w Chrome przedstawiający kaskadę z zasobem JPEG rozpoczynającą się dopiero po odtworzeniu JavaScriptu. — Bez wstępnego wczytywania obrazy zaczną się ładować po zakończeniu działania skryptu przez przeglądarkę. W przypadku pierwszego zdjęcia to opóźnienie jest niepotrzebne.

Jeśli użyjesz w tym celu parametru preload, obraz zacznie się wczytywać z wyprzedzeniem, dzięki czemu będzie można gotowe do wyświetlenia w czasie, gdy przeglądarka chce je wyświetlić.

Panel sieci w Narzędziach deweloperskich w Chrome przedstawiający kaskadę z zasobem JPEG pobranym równolegle z fragmentem kodu JavaScript. — Wstępne wczytywanie pierwszego obrazu umożliwia rozpoczęcie wczytywania w tym samym czasie co skrypt.

Aby poznać różnicę, sprawdź ten sam galeria obrazów, ale z wstępnie wczytanym pierwszym obrazem postępując zgodnie z instrukcjami podanymi 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 je określić w kodzie CSS za pomocą składni image-set. Przeglądarka może wtedy wybierz, który z nich ma być wyświetlany, w zależności od DPR.

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

Problem z obrazami tła CSS polega na tym, że przeglądarka je wykrywa dopiero po pobraniu i przetworzeniu całej zawartości CSS w <head> strony.

Możesz sprawdzić ten problem na przykładowej witrynie z elastycznego obrazu tła.

Panel sieci w Narzędziach deweloperskich w Chrome, na którym widać kaskadę z zasobem JPEG dopiero po rozpoczęciu pobierania po zastosowaniu kodu 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 pozwala upewnić się, że przeglądarki, które nie obsługuje imagesrcset w elemencie <link>, ale image-set w Usługa porównywania cen pobiera odpowiednie źródło. Nie będą jednak korzystać z wstępnego wczytywania tę sprawę.

Możesz sprawdzić, jak poprzedni przykład zachowuje się w przypadku wstępnie załadowanej kreacji elastycznej w wersji demonstracyjnej z wstępnym wczytywaniem elastycznego tła.

Panel sieci w Narzędziach deweloperskich w Chrome przedstawiający kaskadę z zasobem JPEG pobranym podobnie do niektórych usług porównywania cen. — W tym miejscu obraz i CSS zaczynają się w tym samym czasie pobierać, co przyspiesza wczytywanie obrazu.

Praktyczne efekty wstępnego wczytywania obrazów elastycznych

Wstępne wczytywanie obrazów elastycznych może w teorii je przyspieszyć, ale jak to działa w praktyce?

W związku z tym, że mam 2 kopie wersji demonstracyjnej sklepu PWA: który nie wczytuje wstępnie obrazów, i taki, który wstępnie wczytuje niektóre z nich. Ponieważ leniwa strona wczytuje obrazy za pomocą JavaScriptu, żeby wstępnie wczytać te, które pojawiają się w pierwszym widoku.

Pozwoliło to uzyskać następujące wyniki dla bez wstępnego wczytywania a w przypadku wstępnego wczytywania obrazów:

Rozpocznij renderowanie bez zmian.
Indeks prędkości niewielkie ulepszenie (273 ms, ponieważ obrazy przychodzą szybciej, nie są większe od obszaru piksela).
Ostatni malowany bohater poprawiła się znacznie 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. — Wstępnie wczytywane obrazy pojawiają się znacznie szybciej, co znacznie poprawia wrażenia użytkownika.

Wstępne wczytywanie i `<picture>`

Grupa robocza ds. wydajności witryn omawia dodanie odpowiednika wstępnego wczytywania dla srcset i sizes, ale nie <picture> element, który obsługuje „kierunek artystyczny” dla każdego przypadku użycia.

Jest jeszcze wiele problemów technicznych, które trzeba rozwiązać, aby móc wstępnie wczytać <picture>, Istnieją jednak sposoby obejścia tego problemu:

<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 w elemencie <picture> przechodzi przez media elementów <source> w określonej kolejności, znajduje pierwszy z nich, i używa dołączonego zasobu.

Ponieważ elastyczne wstępne wczytywanie nie ma pojęcia „kolejność”. lub „pierwszego dopasowania”, musisz przetłumaczyć punkty przerwania na 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ż dopasowywanie w pierwszych type elementach, dzięki czemu możesz udostępniać różne formaty plików graficznych, aby przeglądarka mogła wybrać pierwszy format który obsługuje. Ten przypadek użycia nie jest obsługiwany w przypadku wstępnego wczytywania.

W przypadku witryn korzystających z dopasowywania typów radzimy unikać wstępnego wczytywania i zamiast tego skaner wstępnego załadowania pobiera obrazy ze <picture> i <source>. To jednak sprawdzona metoda, zwłaszcza wtedy, gdy używasz opcji Priorytet pobierania, która pozwala określać priorytety. odpowiedni obraz.

Wpływ na największe wyrenderowanie treści (LCP)

Obrazy mogą być największymi kandydatami do wyrenderowania treści (LCP), wstępne wczytywanie może poprawić LCP witryny.

Niezależnie od tego, czy wstępnie ładowany obraz jest responsywny, wstępne wczytywanie działa gdy zasób graficzny nie jest wykrywalny w początkowym ładunku znaczników. Poprawi się także LCP w witrynach, które renderują znaczniki po stronie klienta. niż w witrynach, które wysyłają kompletne znaczniki z serwera.