Ova tehnika poboljšava izvedbu web stranice učitavanjem slika samo kada su vidljive ili blizu korisničkog zaslona.

U današnjem brzom digitalnom svijetu vrlo je važno imati web stranicu visokih performansi. Jedan kritični aspekt ovoga je osiguravanje učinkovitog učitavanja vaših slika. Korisnici očekuju glatko i brzo iskustvo pregledavanja, a ovaj će vam članak pokazati kako to postići.

Istražit ćete koncept odgođenog učitavanja slika i naučiti kako ga implementirati pomoću HTML-a i JavaScripta s API-jem Intersection Observer.

Što je lijeno učitavanje?

Lijeno učitavanje odgađa učitavanje elemenata, kao što su slike, dok se ne zahtijeva. Umjesto učitavanja svih slika kada se stranica učita, lijeno učitavanje učitava samo slike koje su trenutno vidljive ili u blizini područja gledanja korisnika. Ovo poboljšanje izvedbe web stranice smanjuje početno vrijeme učitavanja i štedi propusnost.

Zašto koristiti Lazy Loading?

Postoji nekoliko uvjerljivih razloga za korištenje odgode učitavanja slika na vašoj web stranici, kao što su:

instagram viewer
  • Brže početno učitavanje stranice: Lijeno učitavanje sprječava učitavanje svih slika odjednom, smanjujući početno vrijeme učitavanja stranice. Korisnici mogu ranije početi komunicirati s vašom web stranicom, što dovodi do boljeg korisničkog iskustva.
  • Poboljšan odziv stranice: Učitavanjem slika dok se korisnici pomiču, web stranica ostaje osjetljiva i fluidna, osiguravajući glatko pomicanje i navigaciju bez potrebe čekanja da se sav sadržaj učita.
  • Ušteda propusnosti: Lijeno učitavanje štedi propusnost, što ga čini idealnim za mobilne korisnike i one sa sporim internetskim vezama. Ovo može smanjiti potrošnju podataka vaše web stranice, u korist korisnika.
  • SEO prednosti: Tražilice poput Googlea uzmite u obzir brzinu stranice kao faktor rangiranja. Lijeno učitavanje može pozitivno utjecati na SEO performanse vaše web stranice poboljšanjem vremena učitavanja.

Sada kada razumijete zašto je odgođeno učitavanje korisno, istražimo kako ga implementirati.

Implementacija Lazy Loading: HTML Markup

Da biste započeli, morat ćete izmijeniti svoj HTML kod da biste uključili učitavanje="lijeni" atribut na vašem oznake.

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

The Učitavam atribut se koristi u HTML-u za kontrolu učitavanja elemenata na web stranici. Kada postavite učitavanje="lijeni" na a oznaku, govori pregledniku da odgodi učitavanje resursa dok ne bude potreban.

Trenutno stranica izgleda ovako:

Implementacija Lazy Loading: implementacija JavaScripta

Kako biste svoje lijeno učitavanje podigli na višu razinu, koristite Intersection Observer API. Ovaj API vam omogućuje gledanje kada element ulazi ili izlazi iz okvira za prikaz.

Obrazloženje iza korištenja Intersection Observera za lijeno učitavanje slika je jednostavno: kada se stranica učita, dohvaća sliku niže kvalitete.

Zatim, kada ova slika postane vidljiva unutar okvira za prikaz, JavaScript je zamjenjuje za verziju više kvalitete. Da biste to primijenili u praksi, izmijenite svoj HTML.



 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>

Ovdje je primarni izvor slike verzija niske kvalitete, a slika visoke kvalitete je sekundarni izvor. Stranica tada izgleda ovako:

Zatim odaberite sve slike koje želite odlagano učitati:

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

Nakon toga izradite IntersectionObserver objekt.

const observer = new IntersectionObserver();

Zatim proslijedite unose (niz IntersectionObserverEntry objekti, koji predstavljaju elemente koji se promatraju i njihovo sjecište s prozorom) i promatrač ( IntersectionObserver sama instanca).

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

Zatim provjerite sjecišta i zamijenite sliku niske kvalitete onom visoke kvalitete kad god se taj element presijeca.

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
 }
 });
});

Na kraju, pokrenite promatranje za svaki element.

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

Uz to ste implementirali odgođeno učitavanje s JavaScriptom.

Razmatranja lijenog učitavanja

Kada integrirate odgođeno učitavanje, važno je uzeti u obzir sljedeće aspekte:

  • Pristupačnost: Kako biste osigurali pristupačnost, navedite alternativni tekst za slike s alt atribut. Ove informacije služe kao oslonac za čitače zaslona.
  • Kompatibilnost preglednika: Prije implementacije odgođenog učitavanja, potvrdite njegovu kompatibilnost s različitim preglednicima. Ne pružaju svi preglednici podršku za ovu značajku. U određenim slučajevima uključivanje polifilla može postati imperativ, posebno za starije preglednike. Alat poput Mogu li koristiti je vrijedan izvor za procjenu kompatibilnosti preglednika.
  • Testiranje: Sveobuhvatno testiranje implementacije odgođenog učitavanja preko spektra uređaja i dimenzija zaslona od najveće je važnosti.

Poboljšanje brzine web stranice i korisničkog iskustva

Kada uključite lijeno učitavanje slika na svoju web stranicu, možete ubrzati svoju stranicu i poboljšati korisničko iskustvo. Brže vrijeme učitavanja i glatko iskustvo pregledavanja ono su što korisnici žele, a ova tehnika pruža isto.

Osim toga, uživat ćete u boljem SEO-u i uštedjeti na korištenju propusnosti. Dakle, zašto čekati? Počnite optimizirati svoju web stranicu već danas ovom jednostavnom, ali snažnom metodom.