Tämä tekniikka parantaa verkkosivun suorituskykyä lataamalla kuvia vain, kun ne ovat näkyvissä tai lähellä käyttäjän näyttöä.

Nykypäivän nopeatempoisessa digitaalisessa maailmassa tehokas verkkosivusto on välttämätöntä. Yksi kriittinen näkökohta tässä on varmistaa, että kuvat latautuvat tehokkaasti. Käyttäjät odottavat sujuvaa ja nopeaa selauskokemusta, ja tämä artikkeli näyttää, kuinka se saavutetaan.

Tutkit kuvien laiskan lataamisen käsitettä ja opit toteuttamaan sen HTML: n ja JavaScriptin avulla Intersection Observer API: n kanssa.

Mikä on laiska lataus?

Laiska lataus viivästyttää elementtien, kuten kuvien, lataamista, kunnes sitä tarvitaan. Sen sijaan, että kaikki kuvat ladataan sivun latautuessa, laiska lataus lataa vain ne kuvat, jotka ovat näkyvissä tai lähellä käyttäjän katselualuetta. Tämä verkkosivuston suorituskyvyn parannus lyhentää alkuperäistä latausaikaa ja säästää kaistanleveyttä.

Miksi käyttää laiskalatausta?

On useita pakottavia syitä käyttää kuvien laiskaa lataamista verkkosivustollasi, kuten:

  • Nopeampi ensimmäinen sivun lataus: Laiska lataus estää kaikkia kuvia latautumasta kerralla, mikä lyhentää sivun alkulatausaikaa. Käyttäjät voivat aloittaa vuorovaikutuksen sivustosi kanssa aikaisemmin, mikä parantaa käyttökokemusta.
  • Parannettu sivun reagointikyky: Lataamalla kuvia käyttäjien vieriessä, verkkosivusto pysyy reagoivana ja sujuvana, mikä varmistaa sujuvan vierityksen ja navigoinnin ilman, että sinun tarvitsee odottaa kaiken sisällön latautumista.
  • Kaistanleveyden säästö: Laiska lataus säästää kaistanleveyttä, mikä tekee siitä ihanteellisen mobiilikäyttäjille ja niille, joilla on hitaat Internet-yhteydet. Tämä voi vähentää verkkosivustosi tiedonkulutusta, mikä hyödyttää käyttäjiä.
  • SEO edut: Hakukoneet, kuten Google pitää sivun nopeutta sijoitustekijänä. Laiska lastauspurkki vaikuttaa positiivisesti sivustosi hakukoneoptimointiin parantamalla latausaikaa.

Nyt kun ymmärrät, miksi laiska lataaminen on hyödyllistä, tutkitaan kuinka se toteutetaan.

Lazy Loadingin käyttöönotto: HTML-merkintä

Aloita muokkaamalla HTML-koodiasi sisällyttämällä siihen loading="laiska" attribuuttisi tunnisteet.

<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 Ladataan attribuuttia käytetään HTML: ssä ohjaamaan web-sivun elementtien latauskäyttäytymistä. Kun asetat loading="laiska" kohdassa a -tunniste, se käskee selainta lykkäämään resurssin lataamista, kunnes sitä tarvitaan.

Tällä hetkellä sivu näyttää tältä:

Laiskalatauksen käyttöönotto: JavaScript-toteutus

Käytä Intersection Observer -sovellusliittymää viedäksesi laiska lataamisesi uudelle tasolle. Tämän API: n avulla voit katsoa, ​​milloin elementti tulee katseluporttiin tai poistuu siitä.

Intersection Observerin käyttäminen kuvien laiskaan lataamiseen on yksinkertainen: kun sivu latautuu, se hakee heikompilaatuisen kuvan.

Kun tämä kuva tulee näkyviin katseluportissa, JavaScript vaihtaa sen korkealaatuisempaan versioon. Voit toteuttaa tämän käytännössä muokkaamalla HTML-koodiasi.



 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>

Tässä ensisijainen kuvalähde on heikkolaatuinen versio ja korkealaatuinen kuva on toissijainen lähde. Sivu näyttää sitten tältä:

Valitse seuraavaksi kaikki kuvat, jotka haluat ladata laiskasti:

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

Luo sen jälkeen an IntersectionObserver esine.

const observer = new IntersectionObserver();

Syötä sitten merkinnät (joukko IntersectionObserverEntry objektit, jotka edustavat tarkkailtavia elementtejä ja niiden leikkauskohtaa katseluportin kanssa) ja havainnoijaa ( IntersectionObserver esimerkki itse).

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

Tarkista seuraavaksi risteyksiä ja vaihda huonolaatuinen kuva korkealaatuiseen aina, kun elementti leikkaa.

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

Aloita lopuksi kunkin elementin havainto.

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

Ja sen myötä olet ottanut käyttöön laiskalatauksen JavaScriptillä.

Laiskoja latauksia koskevia huomioita

Laiskalatausta integroitaessa on tärkeää ottaa huomioon seuraavat seikat:

  • Esteettömyys: Varmista saavutettavuus lisäämällä kuville vaihtoehtoista tekstiä alt attribuutti. Nämä tiedot toimivat näytönlukuohjelmien tukena.
  • Selaimen yhteensopivuus: Ennen kuin aloitat laiskalatauksen, varmista sen yhteensopivuus eri selaimien kanssa. Kaikki selaimet eivät tue tätä ominaisuutta. Tietyissä tapauksissa monitäytteen sisällyttäminen voi olla välttämätöntä, etenkin vanhemmissa selaimissa. Työkalu kuten Voinko käyttää on arvokas resurssi selaimen yhteensopivuuden arvioinnissa.
  • Testaus: Laiskan lataamisen kattava testaus eri laitteilla ja näytön mitoilla on ensiarvoisen tärkeää.

Verkkosivuston nopeuden ja käyttökokemuksen parantaminen

Kun sisällytät verkkosivustollesi kuvien laiskalatauksen, voit nopeuttaa sivustoasi ja parantaa käyttökokemusta. Nopeampi latausaika ja sujuvammat selauskokemukset ovat mitä käyttäjät haluavat, ja tämä tekniikka tarjoaa saman.

Lisäksi voit nauttia paremmasta hakukoneoptimoinnista ja säästää kaistanleveyden käytössä. Joten miksi odottaa? Aloita verkkosivustosi optimointi tänään tällä yksinkertaisella mutta tehokkaalla menetelmällä.