Ова техника побољшава перформансе веб странице учитавањем слика само када су видљиве или близу екрана корисника.

У данашњем брзом дигиталном свету, неопходно је имати веб локацију високих перформанси. Један критични аспект овога је осигурање да се ваше слике ефикасно учитавају. Корисници очекују глатко и брзо искуство прегледања, а овај чланак ће вам показати како да то постигнете.

Истражићете концепт лењег учитавања слика и научити како да га примените користећи ХТМЛ и ЈаваСцрипт са Интерсецтион Обсервер АПИ-јем.

Шта је лење учитавање?

Лено учитавање одлаже учитавање елемената, као што су слике, док се не захтева. Уместо учитавања свих слика када се страница учита, лење учитавање учитава само слике које су тренутно видљиве или близу области за гледање корисника. Ово побољшање перформанси веб локације смањује почетно време учитавања и штеди пропусни опсег.

Зашто користити Лази Лоадинг?

Постоји неколико убедљивих разлога да користите лењо учитавање слика на вашој веб локацији, као што су:

  • Брже почетно учитавање странице
    instagram viewer
    : Лено учитавање спречава да се све слике учитају одједном, смањујући почетно време учитавања странице. Корисници могу раније да почну да комуницирају са вашом веб локацијом, што доводи до бољег корисничког искуства.
  • Побољшан одзив странице: Учитавањем слика док корисници померају, веб локација остаје прилагодљива и флуидна, обезбеђујући глатко померање и навигацију без потребе да чекате да се сав садржај учита.
  • Уштеда пропусног опсега: Лено учитавање чува пропусни опсег, што га чини идеалним за мобилне кориснике и оне који имају споре интернет везе. Ово може смањите потрошњу података на вашој веб локацији, у корист корисника.
  • Предности СЕО-а: Претраживачи попут Гугла узети у обзир брзину странице као фактор рангирања. Лази лоадинг цан позитивно утичу на СЕО перформансе вашег сајта побољшањем времена учитавања.

Сада када разумете зашто је лењо учитавање корисно, хајде да истражимо како да га применимо.

Имплементација лењег учитавања: ХТМЛ маркуп

Да бисте започели, мораћете да измените свој ХТМЛ код да бисте укључили лоадинг="лењи" атрибут на вашем ознаке.

<body>
<main>


<section>
<imgsrc="./image-one-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-two-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-three-high.jpg"alt=""loading="lazy" />
section>


main>


body>

Тхе лоадинг атрибут се користи у ХТМЛ-у за контролу понашања учитавања елемената на веб страници. Када поставите лоадинг="лењи" на а ознаку, говори претраживачу да одложи учитавање ресурса док не буде потребан.

У овом тренутку, страница изгледа овако:

Имплементација лењег учитавања: имплементација ЈаваСцрипт-а

Да бисте своје лењо учитавање подигли на виши ниво, користите Интерсецтион Обсервер АПИ. Овај АПИ вам омогућава да гледате када елемент уђе или изађе из оквира за приказ.

Образложење за коришћење Интерсецтион Обсервер-а за лење учитавање слика је једноставно: када се страница учита, добија слику нижег квалитета.

Затим, како ова слика постане видљива у оквиру за приказ, ЈаваСцрипт је замењује за верзију вишег квалитета. Да бисте ово применили у пракси, измените свој ХТМЛ.



 src="./image-one-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-one-high.jpg"
 />
</section>


 src="./image-two-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-two-high.jpg"
 />
</section>




 src="./image-three-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-three-high.jpg"
 />
</section>

Овде је примарни извор слике верзија ниског квалитета, а слика високог квалитета је секундарни извор. Страница тада изгледа овако:

Затим изаберите све слике које желите да лењо учитате:

"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');

Након тога, креирајте ан ИнтерсецтионОбсервер објекат.

const observer = new IntersectionObserver();

Затим унесите уносе (низ ИнтерсецтионОбсерверЕнтри објекте, који представљају елементе који се посматрају и њихов пресек са оквиром за приказ) и посматрача ( ИнтерсецтионОбсервер сама инстанца).

const observer = new IntersectionObserver((lazyImages, observer) => { });

Затим проверите да ли постоје укрштања и замените слику лошег квалитета висококвалитетном кад год се тај елемент пресеца.

const observer = new IntersectionObserver((lazyImages, observer) => {
 lazyImages.forEach((image) => {
if (image.isIntersecting) {
const lazyImage = image.target;
 lazyImage.src = lazyImage.dataset.src; // Swap the image source
 observer.unobserve(lazyImage); // Stop observing this image
 }
 });
});

На крају, иницијализујте посматрање за сваки елемент.

// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });

Уз то, имплементирали сте лењо учитавање помоћу ЈаваСцрипт-а.

Разматрања о лењем учитавању

Када интегришете лењо учитавање, постаје витално размотрити следеће аспекте:

  • Приступачност: Да бисте обезбедили приступачност, обезбедите алтернативни текст за слике са алт атрибут. Ове информације служе као ослонац за читаче екрана.
  • Компатибилност претраживача: Пре имплементације лењог учитавања, потврдите његову компатибилност са различитим претраживачима. Не пружају сви претраживачи подршку за ову функцију. У одређеним случајевима, укључивање полифила може постати императив, посебно за старије прегледаче. Алат као Могу ли да користим је вредан ресурс за процену компатибилности претраживача.
  • Тестирање: Свеобухватно тестирање имплементације одложеног учитавања на читавом спектру уређаја и димензија екрана преузима од највеће важности.

Побољшање брзине веб локације и корисничког искуства

Када укључите лење учитавање слика на своју веб локацију, можете да убрзате своју веб локацију и побољшате корисничко искуство. Брже време учитавања и лакше искуство прегледања су оно што корисници желе, а ова техника пружа исто.

Осим тога, уживаћете у бољем СЕО-у и уштедети на коришћењу пропусног опсега. Па, зашто чекати? Почните да оптимизујете своју веб локацију већ данас помоћу ове једноставне, али моћне методе.