Bilder, infografikk og fancy effekter er alle gode hjelpemidler for å markedsføre alle slags innhold på et nettsted. De er helt sikre oppmerksomhetsfangere og kan formidle essensen av innholdet i en ramme. Ikke rart at vi er avhengige av bilder for å fange leserens øye og forbedre brukerens engasjement på internett.


På baksiden tar det ofte tid å laste bilder på en webside. Og hvis du har langsom tilkobling, kan det virke som det tar evig å laste. Dette kan være en stor avkjøring for brukere som sannsynligvis vil komme seg bort fra siden.

Ansvarsfraskrivelse: WPExplorer er et tilknyttet selskap for ett eller flere produkter listet nedenfor. Hvis du klikker på en kobling og fullfører et kjøp, kan vi gjøre en provisjon.

Hvordan kan vi gjøre at tunge sider laster raskere?

Hvorfor tar bilder tid å laste? Vel, vi kan forklare det slik – en webside består av mange elementer – tekst, bilder, media, manus og mer. For å få hvert enkelt element til å laste, sender en nettleser en forespørsel til nettstedet (kalt en HTTP-forespørsel). Mange av elementene, spesielt bilder, er byttunge og tar tid å laste. Normalt prøver alle elementene å laste på samme tid, og dette forsinker lastingen av hele websiden.

Den logiske tingen å gjøre er å få det raskt lastede innholdet til å vises i nettleseren først og holde en seer oppmerksomhet. Forsink samtidig lasting av datatunge bilder. Denne tilnærmingen vil sannsynligvis overtale brukerne til å vente ettersom det er noe på skjermen som holder oppmerksomheten deres.

Hva er Lazy Loading??

Vi kan forsinke bilder ved å bruke den late innlastingsteknikken – last først inn teksten eller valgt innhold og la bilder eller sakte innlastingselementer henge. Lastingen av bilder er forskjøvet, så tiden til første byte for websiden forbedres. Når en bruker ruller ned, blir bilder hentet av gangen. Følgelig reduseres antall HTTP-forespørsler som treffer serveren samtidig.

Bilder plasseres i en plassholder, som skal lastes senere. Når bildene når visningsområdet, hentes de fra serveren. De vises på skjermen når de beveger seg til området “over brettet”. Ved uendelig rulle brukes ajax til å laste mer når brukeren treffer bunnen av skjermen.

Hvordan Lazy Loading kan hjelpe

Lat last reduserer belastningstiden. Et raskere nettsted er bra for brukeropplevelse og søkemotorer. Det reduserer også båndbredden på serveren ved bare å laste inn bilder når de virkelig trenger det. Dette sparer båndbredde, både på serverens slutt og brukerens slutt. Du kan bruke lat lasting på utvalgte sider eller på hele siden.

En ulempe med lat lasting er at innhold som kommer etter bretten kanskje ikke blir funnet av søkemotorer. Det kan hende at søkemotorer ikke gjenkjenner uendelig rulleinnhold. For å overvinne denne ulempen i det minste delvis, må vi strukturere nettadresser slik at de kan behandles av søkemotorer. Dette kan gjøre plassholderne mer synlige for søkemotorer til bildet lastes inn.

Det er en rekke plugins som kan få lat lasting for å fungere på WordPress-nettstedet ditt. La oss se på noen av de populære programtilleggene,

BJ Lazy Load

Hvis du vil erstatte alle eller noen av innleggsbildene dine, legg ut miniatyrbilder, gravatarbilder og innhold iframes med en plassholder, bruker du BJ Lazy Load. Det kan erstatte iframes også, og dette betyr at du kan late innebygde videoer fra YouTube og Vimeo. Fungerer også for tekstwidgets. Ved hjelp av et enkelt filter kan bilder og iframes i temaet bli forsinket.

bj-lat-load

For å få pluginen til å fungere på nettstedet ditt, bare last ned, installer og aktiver. Du kan deretter besøke innstillingene og finne ut hvilke elementer som skal utsettes mens du laster. Legg til ditt eget plassholderbilde, hvis du ønsker det.

Denne pluginen bruker JavaScript. Som et resultat vil en besøkende uten JavaScript se de originale elementene uten forsinket lasting.

Lazy Load

En ofte brukt plugin for å legge til lat lasting på WordPress nettsteder, Lazy Load er en enkel installasjon og aktivering av plugin. Du kan prøve det med selvtillit, vel vitende om at det er utviklet ved hjelp av en blanding av kode fra WordPress.com VIP-teamet hos Automattic, TechCrunch Redesign-teamet og Jake Goldman (10up LLC).

lat-load

Du trenger heller ikke å gjøre noe lenger etter aktivering. Imidlertid, hvis du ønsker å gjøre noen endringer, kan du gjøre det ved å redigere php-filen. Forfatterne har gitt noen nyttige kodebiter som du kan henvise til for å endre plassholderbildet, for late innlasting av bilder i temaet ditt eller for late innlasting av alle bildene dine ved utskriftsbuffer.

Ajax Load More – uendelig rulle

Ajax Load More er egnet for forsinket lasting på lange nettsider som blir vist ved å rulle nedover. Bruk den til late innlastingsinnlegg, tilpassede innleggstyper, enkeltinnlegg, sider og kommentarer.

Ajax-load-mer

Dessuten kan du bruke Shortcode Builder til å ramme inn tilpassede WordPress-spørsmål. Legg til kortkoden som blir generert på sidene du velger via innholdsredigereren, eller direkte i malfiler. Vis siden fra fronten og sjekk Ajax Load More som laster innholdet selv når du blar ned.

Dessuten fungerer Ajax Load More bra med WooCommerce og Easy Digital Downloads, så det passer for lange produktsider.

Lat Load for Videos

Hvis du driver med et nettsted som har en rekke innebygde videoer, er denne for deg. Lat Load for Videos erstatter de innebygde videoene dine med et klikkbart bilde. Nettsiden laster ikke videoer så snart en besøkende ber om siden. Videoene lastes bare når du klikker på bildet.

lat-load-for-videoer

Plugin-enheten inspiserer innebygde videoer, og erstatter alle eksterne filer med et statisk bilde og en avspillingsknapp. Videoene lastes bare når en besøkende klikker på knappen. Dette kan ha stor innvirkning på sidehastigheten, spesielt hvis det har mange videoer på seg. Og for brukeren er det en jevn opplevelse.

a3 Lazy Load

Når nettsteder i økende grad blir sett på håndholdte enheter, må de også optimaliseres for en mobilopplevelse. a3 Lazy Load er designet for å forbedre nettstedets hastighet på mobiler ved å forsinke lastingen av valgte sideelementer. Elementene kan velges i administratorinnstillinger.

a3-lat-load

Plugin-en tilbyr støtte for innhold i iframes plassert hvor som helst i innholdet eller widgetene. WordPress innebygde medier, Facebook Som bokser med profiler, Like-knapper, Anbefal-knapper, Google+ profiler, Google Maps og annet lignende medieinnhold kan alle velges for lat lasting.

Videre er det ingen sammenstøt med Accelerated Mobile Pages (AMP) – lat belastning brukes ikke på / amp endepunkt. Det er først når nettleseren sportser en URL uten / amp den late belastningen kommer inn.

WP YouTube Lyte

Hvis nettstedet ditt trekker tungt på YouTube, WP YouTube Lyte kan komme deg en god del. Den setter inn “Lite YouTube Embeds” som ser ut som YouTube-innebygd. Men videoene kreves bare når du klikker på dem.

wp-youtube-Lyte

For å få denne pluginen til å fungere på nettstedet ditt, er det nødvendig med en registrering hos YouTube som en ny søker. Plugin bruker YouTube API for hver video for å hente den fra YouTube-depotet. For å bruke denne APIen på nettstedet ditt, må API-nøkkelen levert til deg av YouTube være aktivert. Servernøkkelen du mottar fra YouTube må fylles ut.

Når du har aktivert YouTube API-nøkler, justerer du innstillingene for å få dimensjonene og plasseringen til spilleren etter din smak.

Laster inn side med lasteskjerm

Med Laster inn side med lasteskjerm, brukere kan ha en ide om ventetid før siden lastes inn. Plugin-en viser et skjermbilde som viser lastingsfremgangen som en prosentandel av fullføringen.

lasting-side-med-lasting-skjermen

Velg å vise fremgang bare på hjemmesiden eller på alle sider. Med gratisversjonen brukes bare en fremdriftslinje for visning. For flere alternativer, må du oppgradere til premiumversjonen. I tillegg bruker premiumversjonen lat lasting på bilder.

Noen flere plugins,

  • Load More er en nyttig funksjon på lange produktsider. Disse finnes ofte på WooCommerce nettsteder. WooCommerce Infinite Scroll og Ajax Pagination konverterer standard produktpaginering til uendelig bla eller Ajax-paginering. For brukeren betyr dette at de ikke trenger å klikke gjentatte ganger på ‘Neste side’. Når en bruker når bunnen av siden, blir neste sett med produkter automatisk hentet og lastet inn. Ulike pagineringsalternativer er tilgjengelige for mobile enheter.
  •  Last inn flere produkter for WooCommerce kan legges til for å laste inn flere produkter fra neste side ved å bruke Ajax med uendelig rulling eller en Load More-knapp. For animasjonseffekter og tilpasning, en proversjon er tilgjengelig.
  • Bilder Lazyload og lysbildefremvisning – Med denne plugin-en kan du velge å legge til en lysbokseffekt eller en tilpasset gallerieffekt til et hvilket som helst bilde, samt forsinke lasting. Det kommer med 3 effekter, og du kan legge til dine egne også.
  • Rocket Lazy Load – Er ekstremt lett (mindre enn 2 kb). Den injiserer en liten bit av Javascript i overskriften på nettstedet ditt som fungerer på miniatyrbilder, alle bilder i et innlegg, i en widget-tekst eller avatarer. Det forsinker bilder over hele verden uten å bruke JavaScript-bibliotek som jQuery.
  • Crazy Lazy – Gjør den samme jobben mens den er lett, enkel å installere og bruke og trenger ingen innstillinger. Ethvert bilde kan ekskluderes ved å legge til en attributt til bildet.
  • Lazy Load XT – Er en rask plugin som fungerer for bilder, rammer, YouTube-videoer og Vimeo. Den kan tilpasses helt.

Mange glidebryter liker Royal Slider og WP Elektrisk karusell også integrere lazy load-prinsippet for å laste bilder. Arrangementsbooking Pro støtter en lat lastingskalender.

For å konkludere

Lat lasting er en effektiv måte å forbedre nettstedets hastighet, spesielt på nettsteder som sporter en rekke bilder og videoer. Det er mange andre metoder, for eksempel bildeoptimalisering og hurtigbufring, som også kan bidra til å forbedre nettstedets hastighet. Velg plugin som passer for nettstedet ditt, og optimaliser ytelsen slik at den blir en bedre opplevelse for brukeren.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me