Kategoriarkiv: Website

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.

Hvad koster en hjemmeside?

060508_cr_3500

Godt spørgsmål. Hvad koster en bil? Ja man kan få en ny Peugeot til 69.000 mens en Ferrari koster 4,3 millioner. Prisen varierer altså en del. Det samme gælder for en hjemmeside, for der er mange faktorer der spiller ind.

Hanne der er 68 og har 4 børnebørn, vil gerne have en hjemmeside, hvor hun kan skrive om familiens rejser og hendes nye strikkeopskrifter. Hun er ikke kræsen med designet, ej heller hvor godt den kommer til at ligge på Google, så hun kan fint klare sig med en gratis løsning med reklamer.

Henning er direktør for en dansk shippingkoncern med afdelinger i 44 lande. Han har brug for en hjemmeside på 15 forskellige sprog, et webdesign der passer til virksomhedens designlinje, og 54 specialfunktioner der kræver 5 specialkonsulenter. Dette løber op i godt 2,3 millioner.

Og så er der alt midt i mellem. Du kan sikkert klare dig med mindre end Henning, men har højest sandsynligt lidt flere krav end Hanne, og så står vi med en pris på mellem gratis og godt 2 millioner. Det kan du naturligvis ikke bruge til så meget. Vi skal derfor se på hvilke valgmuligheder du har, i hvilket prisleje de ligger, samt fordele og ulemper ved hver. Læs videre Hvad koster en hjemmeside?

Derfor skal du have video på din hjemmeside

YT

Spørgsmål er ikke om du skal have video på din hjemmeside, men hvor meget. Fra 2014 er der ikke længere nogen tvivl, video er det nye sort, og er du ikke med nu, kommer du bagud.

Video er et must af flere grunde. Vi er blevet meget forkælede, og vil gerne have serveret al information på en nem og ubesværet måde. Dette er der selvfølgelig ikke noget galt med, hvorfor gøre det besværligt, når det kan være nemt. Det behøver dog ikke være så kompliceret at give kunderne det de vil have, og faktisk kan det også have en del fordele. Læs videre Derfor skal du have video på din hjemmeside