Komplett Guide til Late Legge Bilder

0
19

Bilder er kritiske. Om det er markedsføring bannere, produkt bilder eller logoer, det er umulig å forestille seg en nettside uten bilder. Dessverre skjønt, bilder er ofte tunge filer, noe som gjør dem til den største bidragsyteren til side bloat. Ifølge HTTP Arkiv i Staten Bilder rapporten, median side størrelse på stasjonære pc-er 1511 KB og bilder konto for nesten 45% (650 KB) av det totale.

Som sagt, det er ikke som om vi kan bare gjøre unna med bilder. De er også viktige for den totale brukeropplevelsen. I stedet, må vi gjøre våre nettsider og legg veldig fort med dem. I denne guiden, vil vi dekke alle moduler og outs av lat lasting av bilder, en teknikk som hjelper til med å forlenge tiden det tar for en web-side for å laste inn ved å utsette bildet lastes inn før de er nødvendig.

Før vi stuper rett i, her er et eksempel på en video som demonstrerer konseptet. Kort sagt, en grå plassholder boksen er gjengitt på side før den ruller inn i vis—på hvilket tidspunkt den faktiske bildet lastes inn på plass i boksen.

Kapittel 1: Hva er Lat Lasting?

Vi forbinder ofte ordet “lat” med å unngå arbeid så lenge som mulig, eller ren handling som ønsker å gjøre noe i det hele tatt.

På samme måte, lat legge utsetter lasting av ressurser på side så lenge de ikke er nødvendig. I stedet for å legge dem til med en gang, som er det som normalt skjer, vi tillater dem å laste senere.

Lat Lasting er et sett av teknikker innen web-og applikasjonsutvikling som utsetter lasting av ressurser på en side til et senere tidspunkt—når disse ressursene er faktisk nødvendig i stedet for å laste dem opp foran. Disse teknikkene kan hjelpe i å forbedre ytelse, bedre utnyttelse av enhetens ressurser og å redusere kostnader knyttet til.

Teknikken lat lasting kan brukes til omtrent alle ressurser på en side. For eksempel, selv en JavaScript-fil kan holdes tilbake hvis det er best ikke å legge den i utgangspunktet. Samme avtale for et bilde—legg det når vi trenger det.

Vi vil holde oss til late legge bildene i denne håndboken, men det er godt å vite at det kan brukes til andre eiendeler.

Kapittel 2: Hvorfor Lat Legg i det Hele tatt?

Hvis brukeren aldri ruller til det punktet på den siden som inneholder bilde, så brukeren aldri vil se at bildet. Det har også aldri lastes inn i første omgang fordi, hei, det var aldri nødvendig.

Du kan allerede nå begynne å se på hvordan dette fordeler både du og brukeren. Her er to av de fordelene vi får med lazy lasting.

Ytelsesforbedringer

Den åpenbare fordelen er at vi får mindre web-sider som lastes inn raskere. Lat legger reduserer kompleksitet og øker antall bilder som trenger å bli lagt inn på en side foran. Færre bilde forespørsler bety færre byte for å laste ned. Og færre bytes å laste ned betyr side gjengir raskere enn hvis de byte og forespørsler som ble gjort.

Dette sikrer at alle enheter på nettverket er i stand til å laste ned og prosessen gjenværende ressurser mye raskere. Derfor, time fra forespørsel om å gjengi blir mindre og siden blir brukbare mye tidligere. Vinn-vinn!

Reduksjon i kostnader

Den andre fordelen er for deg som en nettside administrator. Cloud hosting-tjenester, som Content Delivery Networks (CDNs) eller web-servere eller lagring, gir bilder (eller noen ressurs for den saks skyld) til en kostnad basert på antall byte som er overført. En lat lagt bilde kan aldri få lagt hvis brukeren når aldri det. Dermed kan du redusere totalt antall byte som er levert på siden og til slutt lagre deg selv noen pennies i prosessen. Dette er spesielt for brukere som umiddelbart spretter av en side eller kommuniserer bare med den øverste delen av innhold.

Reduksjonen i byte som er overført fra din levering nettverk eller server reduserer levering kostnader. Dette vil bli mer tydelig som vi utforske lat legge utskriftsmateriale i de kommende avsnittene.

Akkurat hvor mye vil du spare? Du kan finne ut hvilke bilder er en kandidat for lat lasting og hvor mange bytes som du kan lagre på den første siden lastes inn ved hjelp av Google Fyr revisjon verktøy. Dette har en seksjon dedikert for offscreen bilder. Du kan også bruke ImageKit nettstedet analyzer for å identifisere hvis nettstedet ditt bruker lat lasting eller ikke skiller seg ut fra andre kritiske bilde knyttet optimaliseringer på din side.

Lat lasting er avgjørende, ikke bare til god ytelse, men også for å levere en god brukeropplevelse. Siden kombinerer ytelse og brukeropplevelse med lazy lasting er viktig og utfordrende, og vi vil fortsette å ta dette emnet i mer detalj i denne brukerhåndboken etter at vi har sett på ulike måter å late last bilder.

Kapittel 3: Lat Legge Teknikker for Bilder

Det er to vanlige måter som vi legg bilder til en side: <img> – tag og CSS background-image eiendom. Vi vil først se på de mer vanlige av de to, <img> – koden, og deretter flytte til CSS bakgrunnsbilder.

Lat legge bilder i et bilde-koden

La oss starte med det typisk HTML-koder for et bilde:

<img src=”/path/to/some/image.jpg” />

Markup for lat legge bildene er ganske like.

Trinn en er å hindre at bildet lastes opp foran. Nettleseren bruker src-attributtet på koden for å utløse bildet lastes inn. Det spiller ingen rolle om det er første eller 1000 th bilde i HTML. Hvis leseren får src attributt, vil det utløse bilde som skal lastes ned, uavhengig av om det er i eller ut av gjeldende visning.

Å utsette legg i, legg bildet URL i en attributt andre enn src. La oss si at vi kan angi bildet som URL i data-src egenskap av bilde-koden. Nå som kilde er tom, og nettleseren vil ikke utløse bildet lastes inn:

<img data-src=”https://ik.imagekit.io/demo/default-image.jpg” />

Nå som vi er å hindre at bildet blir lastet inn, vi trenger å fortelle nettleseren når du skal legge det i skriveren. Ellers, det vil aldri skje. For dette, kan vi sjekke at så snart bildet (dvs. sin plassholder) går inn i viewport, vi utløse belastning.

Det er to måter å sjekke når et bilde kommer inn i vinduet. La oss se på både av dem arbeider med kodeeksempler.

Metode 1: Utløse bilde legg ved hjelp av Javascript arrangementer

Denne teknikken bruker event lyttere på bla, endre størrelse og orientationChange hendelser i nettleseren. Bla arrangementet er ganske entydige fordi det klokker der brukeren er på en side som bla oppstår. Endre størrelse og orientationChange hendelser er like viktig. Endre størrelse-hendelsen oppstår når nettleservinduet størrelse endringer, mens orientationChange blir utløst når enheten er rotert fra liggende til stående, eller vice versa.

Vi kan bruke disse tre hendelsene til å gjenkjenne en endring i skjermen, og bestemme antall bilder som blir synlig på skjermen og trigger dem til å belastning tilsvarende.

Når noen av disse hendelsene oppstår, vil vi finne alle bildene på siden som er utsatt, og ut fra disse bildene, vi sjekker hvilke som er aktuelle i viewport. Dette er gjort ved å bruke et bilde er topp utlignet, vil den gjeldende dokument topp-posisjon, og vinduet høyde. Hvis et bilde har inngått viewport, vi velge URL fra data-src-attributtet, og flytt den til src-attributtet og bildet lastes inn som et resultat.

Vær oppmerksom på at vi vil be JavaScript for å velge bilder som inneholder en lat klasse. Når bildet er lastet inn, vil vi fjerne klassen fordi det ikke lenger er behov for å utløse en hendelse. Og, når alle bildene er lastet inn, tar vi hendelse lyttere som godt.

Når vi bla, bla hendelse utløser flere ganger raskt. Derfor, for ytelse, legger vi til en liten timeout for å skriptet som throttles lat legge funksjon gjennomføring slik at det ikke hindrer andre oppgaver som kjører i samme tråd i nettleseren.

Her er en fungerende eksempel på denne tilnærmingen.

Se Penn Lat legge bilder ved hjelp av event-handlere – eksempel koden ved ImageKit.io (@imagekit_io) på CodePen.

Merk at de tre første bildene i dette eksemplet er lagt opp foran. URL-er til stede direkte i src-attributtet i stedet for data-src-attributtet. Dette er avgjørende for en god brukeropplevelse. Siden disse bildene er på toppen av siden, de bør gjøres synlig så snart som mulig. Det er ingen grunn til å vente på JavaScript for å laste dem.

Metode 2: Utløse bilde legg ved hjelp av Krysset Observatør API

Skjæringspunktet Observatør API er relativt nye. Det gjør det enkelt å oppdage når et element kommer inn i vinduet og utføre en handling når det skjer. I den forrige metoden, vi hadde til å binde hendelser, holde ytelse i tankene og implementere en måte å beregne om elementet var i viewport eller ikke. Skjæringspunktet Observatør API fjerner alt som overhead ved å unngå å matematikk og å levere gode resultater ut av boksen.

Nedenfor er et eksempel ved hjelp av PROGRAMMERINGSGRENSESNITTET for å late last bilder. Vi legger observatør på alle bildene for å være lat som er lagt. Når API oppdager at elementet har inngått viewport, ved hjelp av isIntersecting eiendel, vi velge URL fra data-src-attributtet, og flytt den til src-attributtet for leseren å utløse bildet lastes inn. Når dette er gjort, kan vi fjerne den late klasse fra bildet og også fjerne observatør fra det bildet.

Se Penn Lat legge bilder ved hjelp av IntersectionObserver – eksempel koden ved ImageKit.io (@imagekit_io) på CodePen.

Hvis du sammenligner bildet lasting tid for de to metodene (event lyttere vs. Skjæringspunktet Observatør), vil du finne at bilder lastes mye raskere ved hjelp av Krysset Observatør API og at handlingen er utløst raskere— og ennå siden ikke vises som treg i det hele tatt, selv i prosessen med å rulle. I metoden involverer event lyttere, måtte vi legge til en timeout for å gjøre det effektivt, som har en litt negativ innvirkning på brukeropplevelsen som bildet lastes inn, utløses med en liten forsinkelse.

Men, som enhver ny funksjon, støtte for Kryss Observatør API er ikke tilgjengelig i alle nettlesere.

Denne nettleseren støtter data er fra Caniuse, som har mer detalj. Angir et nummer som nettleseren støtter funksjonen på denne versjonen, og opp.

Skrivebordet

ChromeOperaFirefoxIEEdgeSafari
58 45 55 Ingen 16 Ingen

Mobil / Nettbrett

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
Ingen 46 Ingen 67 69 62

Så vi må falle tilbake til hendelsen lytteren metode i nettlesere hvor Skjæringspunktet Observatør API-er støttes ikke. Vi har tatt dette i betraktning i eksemplet ovenfor.

Kapittel 4: Lat Legge CSS bakgrunnsbilder

En felles bakgrunn bildet i CSS:

.my-klasse {
background-image: url(‘/path/to/some/image.jpg’);
/* flere stiler */
}

CSS bakgrunnsbilder er ikke så enkelt som bilde-koden. For å laste dem, nettleseren behov for å bygge DOM-treet, så vel som CSSOM treet for å avgjøre om CSS-stil gjelder en DOM node i det gjeldende dokumentet. Hvis CSS-regel angi bakgrunnsbilde gjelder ikke for et element i dokumentet, så leseren ikke legge til et bakgrunnsbilde. Hvis CSS-regel gjelder for et element i det gjeldende dokumentet, deretter nettleseren laster bildet.

Ikke sant? Dette kan virke komplisert i begynnelsen, men dette samme atferd danner grunnlaget for den teknikk for lat legge i bakgrunnen bilder. Ganske enkelt sagt, vi lure nettleseren til ikke å anvende background-image CSS-egenskapen til et element til element som kommer til viewport.

Her er en fungerende eksempel late som laster inn en CSS bakgrunnsbilde.

Se Penn Lat Legge i bakgrunnen bilder i CSS ved ImageKit.io (@imagekit_io) på CodePen.

En ting å merke seg her er at JavaScript-koden som er for late lasting er fortsatt den samme. Vi er fortsatt bruke Skjæringspunktet Observatør API-metoden med et tilbakefall til hendelsen lyttere. “Lure” ligger i CSS.

Vi har et element med ID-bg-bildet som et bakgrunnsbilde. Imidlertid, når vi legger til den late klasse til elementet, kan vi overstyre background-image eiendom ved å sette verdien av det til ingen i CSS.

Siden et element med en ID og en klasse har høyere spesifisitet i CSS enn en ID alene, nettleseren gjelder eiendommen background-image: ingen til elementet i utgangspunktet. Når vi blar du nedover Skjæringspunktet Observatør API (eller hendelse lyttere, avhengig av hvilken metode du velger) oppdager at bildet er i viewport, det fjerner lat-klasse fra elementet. Dette endrer gjeldende CSS og gjelder den faktiske bakgrunnen-bilde eiendom til elementet, som utløser den belastningen av bakgrunnsbildet.

Kapittel 5: å Skape en Bedre brukeropplevelse Med Lazy Lasting

Lat legge presenterer en flott forestilling nytte. For en e-handel selskap som laster hundrevis av produkt bilder på en side, lat lasting kan gi en betydelig forbedring i første siden lastes inn samtidig redusere forbruk av båndbredde.

Men, en rekke selskaper som ikke velger for lat lasting fordi de tror det går mot å levere en god brukeropplevelse (dvs. den første plassholder er stygg, legg tider er treg etc.).

I dette avsnittet vil vi forsøke å løse noen bekymringer rundt brukeren erfaring med lazy lasting av bilder.

Tips 1. Bruk Høyre Plassholder

En plassholder er hva som vises i beholderen før selve bildet lastes inn. Normalt, vi ser utviklere med et solid farge plassholder for bilder eller ett bilde som en plassholder for alle bilder.

Eksemplene vi har sett på så langt har brukt en lignende tilnærming: en boks med en massiv lys grå bakgrunn. Men, vi kan gjøre bedre for å gi en mer behagelig opplevelse. Nedenfor er noen eksempler på bruk av bedre plassholdere for bilde.

Dominerende Fargen Plassholder

I stedet for å bruke en fast farge for testbildet, finner vi den dominerende fargen fra det originale bildet og bruke det som en plassholder. Denne teknikken har blitt brukt i ganske lang tid ved at Google sitt bildesøk resultater så vel som av Pinterest i sine grid design.

Pinterest bruker den dominerende fargen i bildet som bakgrunnsfarge for plassholdere for bilde.

Dette kan se komplisert å oppnå, men en veldig enkel måte å oppnå dette på er å skalere ned bildet til ned til en 1×1 pixel, og deretter skalere det opp til størrelsen av plassholder—en svært grov tilnærming, men en enkel, problemfri måte å få et enkelt dominerende farge. Ved hjelp av ImageKit, den dominerende fargen plassholder kan oppnås ved hjelp av en lenket forvandle i ImageKit som vist nedenfor.

<!– Opprinnelige bildet på 400×300 –>
<img src=”https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400 h-300″ alt=”bilde” />

<!– Dominerende fargen bilde med samme dimensjoner –>
<img src=”https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-1 h-1:w-400,h-300″ alt=”dominerende fargen plassholder” />

Plassholderen bildet er bare 661 byte i størrelse i forhold til det opprinnelige bildet som er 12700 byte—19x mindre. Og det gir en bedre overgang erfaring fra plassholder til selve bildet.

Her er en video som viser hvordan denne effekten virker for brukeren.

Se Penn Dominerende fargen plassholder – Lat legge bilder ved hjelp av IntersectionObserver – eksempel koden ved ImageKit.io (@imagekit_io) på CodePen.

Lav Kvalitet testbildet (LQIP)

Vi kan strekke seg over ideen om å bruke en dominerende farge plassholder videre. I stedet for å bruke én farge, bruker vi en svært lav kvalitet, uklare versjon av det originale bildet som plassholder. Ikke bare ser det bra ut, men det gir også brukeren en idé om hva som er de faktiske bildet ser ut som og oppfatningen at bildet last er i fremgang. Dette er flott for å forbedre det som oppfattes legge erfaring. Denne teknikken har vært benyttet av det liker av og Medium.

LQIP bilde-URL eksempel ved hjelp av ImageKit:

<!– Opprinnelige bildet på 400×300 –>
<img src=”https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400 h-300″ alt=”bilde” />

<!– Lav kvalitet testbildet med samme dimensjoner –>
<img src=”https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400 h-300,bl-30,q-50″ alt=”dominerende fargen plassholder” />

Den LQIP er 1300 bytes, fortsatt nesten 10x mindre enn det opprinnelige bildet, og en betydelig forbedring i form av visuell opplevelse over alle andre plassholder teknikk.

Her er en video som viser hvordan denne effekten virker for brukeren.

Se Penn LQIP plassholder – Lat legge bilder ved hjelp av IntersectionObserver – eksempel koden ved ImageKit.io (@imagekit_io) på CodePen.

Det er klart at ved hjelp av enten en dominerende farge eller LQIP plassholdere gir en jevnere overgang fra plassholderen til selve bildet, gir brukeren en idé om hva som skal komme i stedet for som plassholder, og forbedrer legge i persepsjon.

Tips 2: Legg til Buffer Tid til Bilder Legg til

Når vi diskutert ulike metoder for å utløse bildet lastes inn, sjekket vi for den tid hvor bildet går viewport, dvs. bilde legg utløses når den øverste kanten av testbildet sammenfaller med den nederste kanten av vinduet.

Problemet med dette er at brukere kan bla veldig fort gjennom siden og bildet vil trenge litt tid på å lastes inn og vises på skjermen. Kombinert med struping muligens ytterligere forsinket belastning, brukeren kan vinden opp med å vente et par millisekunder lenger for bildet til å dukke opp. Ikke bra for brukeropplevelsen!

Mens vi kan få en ganske god brukeropplevelse ved hjelp av Krysset Observatør API for ytelse og LQIP for jevnere overganger, det er en annen enkle triks som du kan bruke for å sikre at bildene blir alltid lagt helt når de kommer inn i vinduet : innføre en margin for å triggerpunktet for bilder.

I stedet for å laste inn bildet nøyaktig når den kommer inn i vinduet, legg det når det er, la oss si, 500px før den kommer inn i vinduet. Dette gir ekstra tid, mellom legg og utløse den faktiske oppføring i viewport, for bildene for å laste.

Med Krysset Observatør API, kan du bruke roten parameteren sammen med rootMargin parameter (fungerer som standard CSS margin-regelen), for å øke den effektive markeringsrammen som er ansett for å finne skjæringspunktet. Med arrangementet lytteren metode, i stedet for å kontrollere for forskjellen mellom bildet kanten og viewport kanten til å være 0, kan vi bruke et positivt tall for å legge til noen terskel.

Se Penn Lat legge bilder med ytterligere terskel – eksempel koden ved ImageKit.io (@imagekit_io) på CodePen.

Hvis du ser følgende screencast nøye, vil du legge merke til at det femte bildet i sekvensen er lagt når det tredje bildet er i sikte. På samme måte, det sjette bildet lastes når den fjerde er i vise, og så videre. På denne måten, vi er å gi tilstrekkelig tid for bilder som skal lastes inn, og i de fleste tilfellene er brukeren vil ikke se plassholder i det hele tatt.

Hvis du ikke merke til tidligere, i alle våre eksempler, det tredje bilde (image3.jpg er alltid lagt opp foran selv om det er utenfor vinduet. Dette ble også gjort etter samme prinsippet: legg litt på forhånd i stedet for å legge akkurat på grensen for å bedre brukeropplevelsen.

Tips 3: Unngå Innhold-Flyt

Dette er en annen trivielle poenget, som hvis den er løst, kan bidra til å opprettholde en god brukeropplevelse.

Når det ikke er noe bilde, nettleseren vet ikke størrelsen det vil ta opp. Og hvis vi ikke angir det ved hjelp av CSS, så den omsluttende container ville ha noen mål, det vil si at den vil bli lest som 0x0 punkter.

Når bildet er lastet inn, vil nettleseren slippe den inn i skjermen og flyt av innhold slik at det passer det. Denne plutselige endringen i oppsettet fører til andre elementer for å flytte rundt, og det er kalt innhold flyt, eller skiftende. Michael Scharnagl går i stor dybde for å forklare hvordan dette skaper en dårlig brukeropplevelse.

Dette kan unngås ved å angi en høyde og/eller bredde for det aktuelle beholderen slik at leseren kan male bildet beholder med kjent høyde og bredde. Senere, når bildet lastes inn, siden container størrelse er allerede nevnt, og bildet passer inn i den perfekt, resten av innholdet rundt at beholderen ikke flytte.

Tips 4: Unngå Lat Legge I Hvert Bilde

Dette er en feil som utviklere ofte gjør fordi det er super fristende å tenke at å få utsatt bildet lastes inn er bra hele tiden. Men, som livet selv, det er mulig å ha for mye av en god ting. Lat innlastingen kan redusere den første siden lastes inn, men det kan også resultere i en dårlig brukeropplevelse hvis noen bilder er utsatt når de ikke skal være.

Vi kan følge noen generelle prinsipper for å identifisere hvilke bilder som skal være lat som er lagt. For eksempel, et bilde som er til stede i viewport, eller i begynnelsen av websiden, bør sannsynligvis ikke være lat som er lagt. Dette gjelder for alle header bildet, markedsføring, banner, logoer, eller egentlig noe som brukeren vil se når utgangspunktet landing på en side. Husk også at mobile og stasjonære enheter vil ha forskjellige skjermstørrelser og dermed et ulikt antall bilder som skal være synlig på skjermen først. Det er lurt å ta den enheten som blir brukt i betraktning, og bestemme hvilke ressurser til å laste opp foran og å late last.

Et annet eksempel er et bilde som er enda litt av viewport i den første lasten skal ikke trolig ikke være lat som er lagt. Dette kommer av prinsippet som er diskutert ovenfor—legg litt på forhånd. Så, la oss si et bilde som er 500px eller en enkelt bla fra bunnen av vinduet kan lastes opp foran som godt.

Ett eksempel er hvis siden er for kort. Det kan være bare et enkelt bla med eller for et par ruller, eller kanskje det er mindre enn fem bilder utenfor vinduet. I disse tilfellene, kan du sannsynligvis forlate lat legge ut helt. Ville det ikke gi noen vesentlig nytte for sluttbrukeren i form av ytelse og flere JavaScript-koden som du legger inn på siden for å aktivere lat lasting vil oppveie eventuelle gevinst du får fra det.

Kapittel 5: Lat Lasting ‘ s Avhengighet av JavaScript

Hele ideen om å late legger i, er avhengig av JavaScript er aktivert og tilgjengelige i brukerens nettleser. Mens de fleste av dine brukere vil trolig ha JavaScript aktivert, er det viktig å planlegge for tilfeller der det ikke.

Du kan enten vise en melding som forteller brukere hvorfor bildene vil ikke laste og oppmuntre dem til å bruke enten en moderne nettleser eller aktivere JavaScript.

En annen rute er å bruke noscript-tag. Men denne tilnærmingen kommer med noen mest profesjonelle veldrevne. Dette spørsmålet tråden på Stack Overflow gjør en god jobb med å ta opp disse bekymringene og er en anbefalt lesning for alle som ønsker å løse dette sett av brukere.

Kapittel 6: Populære JavaScript-Biblioteker for Lat Lasting

Siden miljøer og gjennomføring detaljer kan variere på tvers av nettlesere og enheter, kan du ønsker å vurdere en prøvd og testet bibliotek for lat legge heller enn å spinne opp noe fra bunnen av.

Her er en liste over populære biblioteker og plattform-spesifikke plugins som vil tillate deg å implementere lat lasting med minimal innsats:

    >Enda en Lat Loader: Dette biblioteket bruker Skjæringspunktet Observatør API og faller tilbake til event-basert lat legge for nettlesere som ikke støtter den. Dette er flott for bare om noen HTML-element, men dessverre fungerer ikke på bakgrunn av bilder i CSS. Den gode nyheten er at den støtter IE tilbake til versjon 11.

  • lazysizes: Dette er en svært populær bibliotek med omfattende funksjonalitet. Det inkluderer støtte for responsive bilde srcset og størrelser egenskaper og gir utmerket ytelse selv om det ikke gjør bruk av Skjæringspunktet Observatør API.
  • WordPress A3 Late Last: Det er nok av lat legge WordPress plugins der ute, men denne kommer med en robust sett av funksjoner, inkludert et tilbakefall når JavaScript er utilgjengelig.
  • jQuery Lat: Et enkelt bibliotek som bruker en jQuery gjennomføring.
  • WeltPixel Lat Legge Forbedret: En Magento 2 extension.
  • Magento Lat Bilde Loader: Annen Magento extension, for 1.x.
  • Shopify Lat Bilde Plugin (betalt): Aktiver lat legge på en Shopify nettstedet.

Kapittel 7: Testing Lat Legg

Når du har implementert lat lasting, vil du sannsynligvis ønske å sjekke at det fungerer som det skal. Den enkleste måten ville være å åpne opp de utvikler verktøy i nettleseren din.

Fra det, gå til Nettverk > Bilder. Når du oppdatere siden for første gang, skal du bare se bilder som er lastet inn i listen.

Så, når du begynner å bla nedover på siden, andre bilde legg forespørsler ville få utløst og lastes. Du kan også merke den timings for bilde-legg i fossen kolonne i denne visningen. Det ville hjelpe deg med å identifisere lasting av bilder problemer hvis noen eller problemer i utløser bildet lastes inn.

En annen måte ville være å kjøre Google Chrome Fyr revisjonsrapport på siden din etter at du har implementert endringene og se etter forslag under “Offscreen bilder” – delen.

Konklusjon

Vi har dekket mye av grunnen om lat legge bilder! Lat lasting—hvis implementert godt kan ha betydelige fordeler på ditt nettsted ‘ s ytelse lasting ytelse, samtidig redusere den totale størrelsen og leveringskostnader, takk for å utsette unødvendige ressurser opp foran.

Så, hva venter du på? Komme i gang med lazy legge bilder nå!