Denne teknikken forbedrer nettsideytelsen ved å laste inn bilder kun når de er synlige eller nær brukerens skjerm.

I dagens raske digitale verden er det viktig å ha et nettsted med høy ytelse. Et kritisk aspekt ved dette er å sikre at bildene dine lastes inn effektivt. Brukere forventer en jevn og rask nettleseropplevelse, og denne artikkelen vil vise deg hvordan du oppnår det.

Du vil utforske konseptet med lat lasting av bilder og lære hvordan du implementerer det ved hjelp av HTML og JavaScript med Intersection Observer API.

Hva er lat lasting?

Lazy lasting forsinker lasting av elementer, for eksempel bilder, inntil nødvendig. I stedet for å laste inn alle bildene når en side lastes, laster lat lasting kun bildene som er synlige eller i nærheten av brukerens visningsområde. Denne forbedringen i nettstedets ytelse reduserer den innledende lastetiden og sparer båndbredde.

Hvorfor bruke lat lasting?

Det er flere overbevisende grunner til å bruke lat lasting av bilder på nettstedet ditt, for eksempel:

instagram viewer
  • Raskere første sideinnlasting: Lazy lasting forhindrer at alle bilder lastes inn samtidig, noe som reduserer den innledende sideinnlastingstiden. Brukere kan begynne å samhandle med nettstedet ditt tidligere, noe som fører til en bedre brukeropplevelse.
  • Forbedret siderespons: Ved å laste inn bilder mens brukerne ruller, forblir nettsiden responsiv og flytende, og sikrer jevn rulling og navigering uten å måtte vente på at alt innhold skal lastes.
  • Besparelser på båndbredde: Lat lasting sparer båndbredde, noe som gjør den ideell for mobile brukere og de som har langsomme internettforbindelser. Dette kan redusere nettstedets dataforbruk, til fordel for brukerne.
  • SEO-fordeler: Søkemotorer som Google vurdere sidehastighet som en rangeringsfaktor. Lat lastekanne påvirke nettstedets SEO-ytelse positivt ved å forbedre lastetiden.

Nå som du forstår hvorfor lat lasting er fordelaktig, la oss utforske hvordan du implementerer det.

Implementering av Lazy Loading: HTML Markup

For å komme i gang må du endre HTML-koden for å inkludere loading="lat" attributt på din tagger.

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

De lasting attributt brukes i HTML for å kontrollere lasteoppførselen til elementer på en nettside. Når du setter loading="lat" på en -taggen, ber den nettleseren om å utsette lasting av ressursen til den er nødvendig.

For øyeblikket ser siden slik ut:

Implementering av lat lasting: JavaScript-implementeringen

For å ta den late lastingen til neste nivå, bruk Intersection Observer API. Denne API-en lar deg se når et element kommer inn i eller går ut av visningsporten.

Begrunnelsen bak bruk av Intersection Observer for lat innlasting av bilder er enkel: Når siden laster, henter den et bilde av lavere kvalitet.

Etter hvert som dette bildet blir synlig i visningsporten, bytter JavaScript det ut med versjonen med høyere kvalitet. For å implementere dette, endre HTML-koden din.



 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>

Her er den primære bildekilden lavkvalitetsversjonen og høykvalitetsbildet er sekundærkilden. Siden ser da slik ut:

Deretter velger du alle bildene du vil lazy-loade:

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

Etter det oppretter du en IntersectionObserver gjenstand.

const observer = new IntersectionObserver();

Send deretter inn oppføringene (en rekke IntersectionObserverEntry objekter, som representerer elementene som blir observert og deres skjæringspunkt med viewporten) og observatøren (den IntersectionObserver selve forekomsten).

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

Deretter sjekker du for skjæringspunkter og bytter ut lavkvalitetsbildet med høykvalitetsbildet når elementet krysser hverandre.

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

Til slutt, initialiser observasjon for hvert element.

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

Og med det har du implementert lat lasting med JavaScript.

Hensyn til lat lasting

Når du integrerer lat lasting, blir det viktig å vurdere følgende aspekter:

  • tilgjengelighet: For å sikre tilgjengelighet, oppgi alternativ tekst for bilder med alt Egenskap. Denne informasjonen fungerer som et tillitspunkt for skjermlesere.
  • Nettleserkompatibilitet: Før implementeringen av lat lasting, bekreft kompatibiliteten med forskjellige nettlesere. Ikke alle nettlesere utvider støtte for denne funksjonen. I visse tilfeller kan inkludering av en polyfill bli nødvendig, spesielt for eldre nettlesere. Et verktøy som Kan jeg bruke er en verdifull ressurs for å evaluere nettleserkompatibilitet.
  • Testing: Den omfattende testingen av implementeringen av lazy loading på tvers av et spekter av enheter og skjermdimensjoner er av største betydning.

Forbedre nettstedhastighet og brukeropplevelse

Når du bruker lat lasting for bilder på nettstedet ditt, kan du øke hastigheten på nettstedet ditt og forbedre brukeropplevelsen. Raskere lastetid og jevnere nettleseropplevelser er hva brukerne ønsker, og denne teknikken gir det samme.

I tillegg vil du nyte bedre SEO og spare båndbreddebruk. Så hvorfor vente? Begynn å optimalisere nettstedet ditt i dag med denne enkle, men kraftige metoden.