Kategoriarkiv: webshop

Lazy load af billeder

Lazy load af billeder har været kendt i mange år. Helt basalt går det ud på kun at loade billeder på en hjemmeside, når der er brug for dem.

Forestil dig at du har en lang produktliste på din webshop. Der er måske 100 eller flere produkter på. Hvis brugeren skal loade alle produktbilleder i samme sekund de lander på siden, vil det går stærkt ud over hastigheden.

Som bruger er du jo ret ligeglad med at det du ikke kan se. Når du lander på en produktliste, ser du måske kun de første 10 produkter. Resten skal du scrolle ned for at kunne se. Alligevel vil browseren som standard loade alt, der er. Det giver unødig ventetid og det koster. Både på brugeroplevelsen, SEO og serveren.

Her kommer lazy load af billeder til sin rette. Med lazy load funktionalitet, loades billederne i takt med at du scroller ned af siden. Den loader altså først billederne når der er brug for dem, og i nogle tilfælde, lige lidt før, så der ikke kommer tomme billeder frem.

Det er smart, for det øger hastigheden på indlæsningen af din side, og brugeren mærker i de fleste tilfælde ikke noget. Kun at hastigheden og dermed brugeroplevelsen bliver forbedret markant.

Se det f.eks. her på Curvii’s side med Zhenzi.

Zhenzi produktliste der lazy-loades

Flere måder at lave lazy load på

Da lazy load lige kom frem, kunne man integrere funktionaliteten via javascript. Den metode har man brugt i mange år, med et rigtig godt resultat. Google har ligefrem anbefalet det, og man har fået straf for det i Google Page Speed tool, hvis man loadede billeder uden for synsfeltet eller viewporten som det hedder.

Man lavede ganske enkelt src-attributten om til en data-src, hvor stien til billedet blev lagt. Når så billedet kom inden for viewporten, blev data.src lavet om til src via javascript, og browseren genkendte det nu som en billedsti, og hentede billedet. Smart.

<img data-src"image.jpg" class="lazy-load" />

Det er dog et par ulemper ved det man skal være klar over. For det første bliver der ikke loadet nogle billeder, hvis brugeren har slået javascript fra. Det er ikke særlig hensigtsmæssigt på en webshop, hvor billederne jo gerne skal kunne sælge produktet.

For det andet er der også tvivl om Google bot’en kan og vil scrolle, så den faktisk kan registrere billederne. Den problematik slipper man for med den nye måde at integrere lazy load.

Browser supported lazy loading

Browser supported lazy loading eller native lazy loading, er en måde du kan lave lazy load uden javascript. Som med så meget andet, bliver mange funktionaliteter der startede eksternt, lige så stille integreret i nye browsere. Dette gælder nu også for lazy load.

Ved at benytte en almindelig src attribut og tilføje loading=”lazy” fortæller du browseren at billedet skal lazy-loades.

<img src"image.jpg" loading="lazy" />

Herefter er der op til browseren af definere hvornår billedet skal loades. Som fallback vil billedet blive loadet på normal vis, hvis brugeren har en browser der af en eller anden grund ikke understøtter dette. Der er altså ingen fare for at brugeren får tomme billeder, eller at Googles bot ikke kan se dem. Alt sammen en kæmpe win/win.

Husk dog på at de billeder der optræder i brugerens viewport, når de lige lander på siden, ikke skal lazy-loades, men blot loades på normal vis.

Sådan optimerer du dit checkout flow

checkout1
Sådan ser checkout flowet ud på Curvii.dk. Her er et one step checkout skåret helt ind til benet, der er ingen dikkedarer.

Har du en webshop, har du også et checkout flow. Det er her dine kunder skal i gennem for at betale, og det er her de fleste webshops mister flest kunder. Skal det ikke være sådan i din shop, så læs med her.

Checkout flowet er en meget vigtig del af din webshop, og noget du bør investere den nødvendige tid til at optimere. Som udgangspunkt skal vi have kunderne igennem så gnidningsfrit og hurtigt som muligt. Det er bare langtfra altid at de kan det, og nu skal vi se på hvorfor. Læs videre Sådan optimerer du dit checkout flow

10 ting du bør vide, før du starter en webshop – del 2

design-af-webshop

Vi fortsætter hvor vi slap i første del, og lægger ud med noget rigtig mange springer let hen over. I toppen kan du se en produktside til Curvii.dk, hvor der er brugt en købt designskabelon der efterfølgende er blevet tilpasset.

Kan jeg selv lave designet til shoppen i paint?
Nej. Rigtig mange gør det dog alligevel, men det er sådan et dumt sted at spare. Arbejder du ikke med grafisk webdesign til daglig, så hold dig fra selv at lave det. Det kan ses på flere kilometers afstand og får din shop til at fremstå Læs videre 10 ting du bør vide, før du starter en webshop – del 2

10 ting du bør vide, før du starter en webshop – del 1

10 ting du bør vide før du starter en webshop

Går du med tanker om at starte en webshop, men ved ikke helt hvad der skal til, har jeg her 10 ting du bør kende til. Medierne har skabt en falsk opfattelse af, at man blot åbner en webshop, hvorefter ordrene strømmer ind helt automatisk, i takt med at bankkontoen stiger. Det kunne være rart hvis det var sådan, men virkeligheden ser desværre anderledes ud. Det er hårdt arbejde at starte en webshop, men langt fra umuligt. Det kræver dog stadig mere at kunne overleve i dag, end for 10 år siden. Hvis du sætter dig godt ind i tingene inden du starter, har du langt større chance for at få skabt det helt rigtigt fundament til din webshop og komme godt fra start. Billedet i toppen er taget et år efter jeg startede min webshop med strømper. Det begyndte med en kasse strømper der stod på gulvet, og så gik det stærkt.

1. Hvilket system skal jeg vælge?
Rigtig godt spørgsmål, men svaret er ikke sort og hvidt. Der findes rigtige mange gode webshop-systemer derude. Hvad der er bedst til dig, afhænger helt af hvilke krav du stiller, hvor stor din shop er, og hvilket teknisk niveau du er på.

Er du et teknisk vidunder, kan du gratis hente og opsætte et webshop-system, men det kræver altså Læs videre 10 ting du bør vide, før du starter en webshop – del 1