You are currently viewing Мързеливо зареждане на изображения на ниво браузър за увеличаване на скоростта на сайта

Мързеливо зареждане на изображения на ниво браузър за увеличаване на скоростта на сайта


Имот loading Да се <img> Позволява на браузъра да отложи зареждането на изображения извън екрана, докато потребителите не ги видят. Мързеливото зареждане на изображения на ниво браузър намалява броя на първоначалните заявки и увеличава скоростта на сайта, особено при първоначалното му зареждане.

Какво четем в тази статия

Почти всички браузъри от Мързеливо зареждане на изображения на ниво браузър Те подкрепят! Видеоклипът по-долу показва как да заредите изображения на мързелив начин, като превъртите до тях, можете да проверите демонстрацията онлайн за по-добро разбиране.

От версия 76 на Chrome нататък можете да използвате функцията, без да се налага да пишете персонализиран код или да използвате JavaScript библиотеки (както разгледахме подробно в статията „Мързеливо зареждане на изображения“). loading Използвайте за бавно зареждане на изображения на ниво браузър. Нека навлезем в подробностите.

Съвместимост с браузъри

<img loading="lazy"> от повечето базирани на Chromium браузъри(1) (Chrome, Edge, Opera) и Firefox се поддържат. Внедряването на WebKit (Safari) е в ход. caniuse.com предоставя подробна информация за това как различните браузъри поддържат мързеливо зареждане на изображения. Браузърите, които не поддържат функцията за зареждане, просто ще я игнорират, без да засягат съдържанието.

Вградена поддръжка на различни браузъри за отложено зареждане на изображения

Защо лениво зареждане на изображения на ниво браузър?

Според статията за HTTPArchive изображенията представляват най-големия обем заявки за страници и обикновено консумират повече честотна лента от всеки друг източник.

В момента има два начина за забавяне на зареждането на изображения извън екрана:

  • Използване на API на Intersection Observer (2)
  • Използвайте манипулатори на събития за елементи scroll, resize Или orientationchange

Разработчиците могат да активират отложено зареждане на своите страници с някоя от тези опции, много разработчици също са създали персонализирани библиотеки, които са още по-лесни за използване. въпреки това Мързеливо зареждане на изображения на ниво браузър Това елиминира нуждата от тези инструменти и библиотеки. Отложеното зареждане на ниво браузър работи правилно дори когато JavaScript на браузъра е деактивиран.

Имот loading

Понастоящем Chrome зарежда изображения с различни приоритети в зависимост от местоположението им спрямо прозореца за изглед. Изображенията под прозореца за изглед имат по-нисък приоритет за зареждане, но все пак се извличат възможно най-бързо. В Chrome 76 и по-нови, за да предотвратите извличането, можете да използвате loading Използвайте за пълно отлагане на зареждането на изображения извън екрана.

<img src=" loading="lazy" alt="…" width="200" height="200">

Приемливи стойности за атрибута loading :

  • auto: Мързеливо зареждане по подразбиране на браузъра.
  • lazy: Забавя зареждането на изображението, докато достигне изчислено разстояние от прозореца за изглед.
  • eager: Зарежда незабавно ресурса, независимо къде се намира на страницата.

Предупреждение: въпреки че в Chromium стойността auto Той съществува, но все още не е споменат в HTML стандартите. Тъй като може да подлежи на промяна, препоръчваме да не го използвате, докато не бъде включено в стандартите.

Ограничете разстоянието от прозореца за изглед

Всички изображения, които са в горната част на страницата – тоест незабавно видими без превъртане – се зареждат нормално. Елементите далеч под прозореца за изглед се извличат само когато потребителят превърти близо до тях.

Реализацията на Chromium с отложено зареждане се опитва да зареди изображения извън екрана достатъчно рано, за да се зареди, когато потребителят превърти близо до тях. Чрез извличане на близки планове, преди да са видими в прозореца за изглед, ние увеличаваме максимално шанса те да бъдат заредени, преди да станат видими.

Тестовете, използващи Chrome на Android, показват, че при 4G интернет 97,5% от изображенията с отложено зареждане се зареждат напълно в рамките на 10 ms, след като са видими. Дори при бавни 2G мрежи, 92,6% от изображенията в долния екран се зареждат напълно в рамките на 10 ms. Това означава, че отложеното зареждане на ниво браузър осигурява на потребителите по-стабилно изживяване.

Изчисленият праг на разстоянието от прозореца за изглед не е еднакъв за всички източници и зависи от различни параметри:

  • Тип и формат на изображенията
  • Дали олекотеният режим е активен или не в браузъра Android Chrome
  • Ефективен тип връзка (2G, 3G или 4G)(3)

Можете да намерите праговите стойности по подразбиране за всеки тип връзка в документацията на Chromium, въпреки че тези числа и дори подходът за извличане на изображения при приближаване до прозореца за изглед могат да се променят в бъдеще.

В Chrome версия 77 и по-нови можете да тествате праговете при различни скорости, като ограничите скоростта на мрежата в DevTools, но преди това трябва да зададете ефективния тип връзка с флага about://flags/#force-effective-connection-type анулиране

Намаляване на потреблението на данни и подобряване на прага на разстоянието от прозореца за изглед

Наскоро разработчиците на Chrome направиха значителни подобрения в регулирането на обхвата на разстоянието от прозореца за изглед за мързеливо зареждане на изображения на ниво браузър, за да отговорят на очакванията на уеб разработчиците.

При бързи връзки като 4G, диапазонът на разстоянието от прозореца за изглед за зареждане на изображения в близък план 1250px докато 3000px Това означава, че започва да се зарежда, когато изображението е на 3000 пиксела от видимата част на страницата, при по-бавни връзки този диапазон е между 2500px докато 4000px Е.

Скорошните подобрения в обхвата на разстоянието от прозореца за изглед имат две положителни страни.

  • поръчка loading="lazy" Колкото по-близо се доближава до изхода на мързеливи зареждащи JavaScript библиотеки
  • Новите диапазони на разстоянието и праговете на прозореца за изглед все още гарантират, че изображенията се зареждат, докато потребителят превърта надолу преди гледане.

По-долу е направено сравнение между старите и новите прагове за разстояние при бърза връзка (4G), както и използването на loading="lazy" Пред него се поставя javascript библиотека с мързеливо зареждане.

Стари прагове срещу нови прагове

Нови прагове Vs LazySizes (популярна библиотека за отложено зареждане на JS):

Сравнение между новите прагове на браузъра и библиотеката на JavaScript за отложено зареждане

Изображенията трябва да имат размери

Браузърът не знае размера на изображението, докато не се зареди напълно, освен ако размерите на изображението не са изрично посочени предварително. За да може браузърът да запази достатъчно място за всяко изображение предварително, се препоръчва всички тагове <img> Има и двете функции height И width да бъде Промени в оформлението могат да възникнат без да се посочват размери, въпреки че промените в оформлението са по-забележими на страници, които отнемат повече време за зареждане.

<img src=" loading="lazy" alt="…" width="200" height="200">

Или посочете техните стойности директно във вграден стил:

<img src=" loading="lazy" alt="…" style="height:200px; width:200px;">

Задайте размери за етикети <img> Това е много полезно, независимо дали са мързеливи или не. Задаването на ширина и височина на изображения позволява на браузърите да направят извод за присъщия им размер.

Ширината и височината на изображения, чиито размери не са посочени предварително, ще се считат за 0. Сега, ако имате галерия от такива изображения, браузърът може да реши първо да ги постави всички заедно в прозореца за изглед, защото те практически не заемат място и никакви изображения не се прехвърлят извън екрана. В този случай браузърът разпознава, че всички те са видими за потребителя и решава да ги зареди всички (Мързеливото зареждане не се случва на практика)

Освен всичко това, посочването на размерите на изображението намалява възможността за промяна на оформлението.

Мързеливо зареждане на изображения в елемент <picture>

Изображения, които използват елемента <picture> са дефинирани и могат да се зареждат отложено, обърнете внимание на следния код:

<picture>
  <source media="(min-width: 800px)" srcset=" 1x,  2x">
  <img src=" loading="lazy">
</picture>

в Германия <picture> Браузърът сам решава кой от елементите <source> Следователно всички елементи трябва да бъдат заредени <img> Съдържа функции loading="lazy" да бъде

Избягвайте бавното зареждане на изображения на първа страница

На практика изображенията, които са поставени в началото на уеб страницата, тъй като са в прозореца за изглед при първото зареждане, се зареждат незабавно (независимо дали отложеното зареждане е активирано или деактивирано за тях). Ето защо е по-добре да се припише loading="lazy" за изображенията, които са в началото на страницата не използвай.

<!-- visible in the viewport -->
<img src=" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

често задавани въпроси

Google има ли план за автоматично отложено зареждане на изображения в Chrome?

Ако Олекотен режим (4) Активиран в Chrome Android, Chromium автоматично ще зарежда отложено изображения.

Възможно ли е да промените колко близо е изображението, преди да започне да се зарежда отложено?

Тези стойности са твърдо кодирани и не могат да се променят чрез API. Те обаче могат да се променят в бъдеще чрез тестване на браузъри с различни интервали и променливи.

Могат ли CSS фоновите изображения да се зареждат бавно?

Не, в момента само с етикети <img> може да се използва

Има ли недостатък на мързеливото зареждане на изображения, които са в прозореца за изглед?

Най-безопасният начин е да поставите loading="lazy" Избягвайте да щраквате върху изображенията в горната част на страницата, тъй като Chrome не ги зарежда предварително при собственото си сканиране за предварително зареждане.

Как работи функцията за отложено зареждане с изображения, които са в прозореца за изглед, но не се виждат веднага (т.е.: въртележки или скрити от CSS за определени размери на екрана)?

Понастоящем само изображения, които са под прозореца за изглед на устройството с изчисленото разстояние, се зареждат отложено. Всички изображения в горната част на страницата се зареждат нормално, независимо дали се виждат веднага или не.

Ами ако вече съм използвал javascript библиотека или код за отложено зареждане на изображения?

Атрибутът за зареждане не трябва да влияе по никакъв начин на кода, който в момента зарежда вашите активи, но има няколко важни неща, които трябва да имате предвид:

  • Ако вашето персонализирано отложено зареждане се опита да зареди изображения или рамки по-рано от времето на браузъра – т.е. на разстояние, по-голямо от прага на разстоянието на прозореца за изглед – те пак ще бъдат забавени и заредени въз основа на нормалното поведение на браузъра.
  • Ако вашият персонализиран lazy-loader използва по-кратък интервал, за да определи кога да зареди конкретно изображение от браузъра, тогава вашите настройки ще заменят браузъра.

Една от важните причини да продължите да използвате библиотеката на трета страна и собствеността едновременно loading="lazy"предоставяйки такъв (5)polyfill е за браузъри, които все още не поддържат тази функция.

Как мога да го използвам с браузъри, които все още не поддържат отложено зареждане?

Създайте polyfill или използвайте библиотека на JavaScript, за да заредите лениво изображения на вашия сайт. на функцията loading Може да се използва за определяне дали тази функция се поддържа в браузъра:

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill/third-party library
}

Следният код е прост пример за това с помощта на библиотеката lazysizes:

<!-- Let's load this in-viewport image normally -->
<img src=" alt="…">

<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img(loading="lazy")');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src="
    document.body.appendChild(script);
  }
</script>

Библиотеката lazysizes също така предоставя плъгин за зареждане, който използва мързеливо зареждане на ниво браузър, когато е налично, но се връща към персонализираната функционалност на библиотеката, когато е необходимо.

Как отложеното зареждане на ниво браузър влияе върху рекламите на уеб страница?

Браузърът третира всички реклами, показани на потребителя, като изображения или iframe като всяко друго изображение или iframe.

Как се обработват изображения, които все още не са заредени при отпечатване на уеб страница?

Въпреки че тази функция понастоящем не е налична в Chrome, има открит проблем в секцията за грешки в Chrome, за да се гарантира, че всички изображения и вградени рамки се зареждат незабавно, когато страницата се отпечата.

Заключение

Използвайте мързеливо зареждане на изображения на ниво браузър, като използвате свойството loading="lazy" Създава значително подобрение в първоначалната скорост на зареждане на страниците и количеството данни, консумирани от потребителя, въпреки че тази функция се поддържа в повечето популярни уеб браузъри, все още има някои браузъри, които я игнорират без странични ефекти. В тази статия въведохме и начини за подобряване на количеството консумирани данни чрез модифициране на зрителното поле на потребителя.


Бележка под линия

1- Задвижвани от Chromium браузъри се отнасят за браузъри, които са използвали ядрото с отворен код на браузъра Chromium на Google в своя дизайн на браузъра, високото качество на този мощен двигател е причина голям брой популярни уеб браузъри да бъдат привлечени към него.

2- Intersection Observer е API за разработчици, който им позволява да разберат видимостта и позицията на DOM елементите спрямо основния елемент.

3- ефективен тип връзка (ECT): отнася се до измерената скорост на мрежата, която връща типа клетъчна връзка като 3G, стойностите ‘slow-2g’, ‘2g’, ‘3g’ и ‘4g’

4- Олекотен режим Във версията на Chrome за Android, новата алтернатива на Google за енергоспестяващ режим може да намали потреблението на данни от потребителя с до 60%, докато сърфира в интернет.

5. Полифилът е част от код (обикновено JavaScript в мрежата), който се използва за осигуряване на модерна функционалност в по-стари браузъри, които не го поддържат първоначално.