Kategoriarkiv: Optimering

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.

Lær at komprimere dine billeder

komp0
Testbilledet fra Zhenzi, skal en tur igennem Photoshop for at lave en udgave der kan bruges på et website, uden at trække det helt i knæ.

Når man skal bruge billeder på en hjemmeside, eller en webshop, handler det om at have billeder i så god en kvalitet som mulig, der samtidigt fylder så lidt som muligt. Sagt med andre ord, så skal vi både blæse og have mel i munden. Læs videre Lær at komprimere dine billeder

Sådan får du en lynhurtig hjemmeside – del 1

Z3-020
Sådan skulle din hjemmeside gerne komme til at køre når du har læst guiden her. Det kræver grundig forarbejde og tysk præcision.

Denne guide er til dig der ikke kender noget til hastighedsoptimering, eller blot vil være sikker på at du har alt det grundlæggende på plads.

Vi skal nu se på hvordan du får en lynhurtig hjemmeside, men lad os først tage et kig på hvorfor det er så vigtigt. Læs videre Sådan får du en lynhurtig hjemmeside – del 1

Sådan opsætter du CDN til dit website

Siden du læser dette indlæg, kan jeg næsten tænke mig at du går bare en smule op i hastighedsoptimering. Højest sandsynlig har du brugt Yslow, og er stødt på punktet CDN der er markeret med rødt, og nu vil du gerne vide, hvordan man kan omdanne den til grøn, få en bedre score, og vigtigst af alt, få en hurtigere hjemmeside. Kan du svare ja til det meste af ovenstående, er du kommet til det helt rigtige sted.

Lad os starte med at se på hvad et CDN er. Normalt vil en bruger gå direkte til dit webhotel, for at hente din hjemmeside i sin browser. Et CDN ligger sig midt i mellem. Når brugeren nu vil hente din hjemmeside, går det først igennem CDN’et, der indeholder alle de statiske filer som billeder, JavaScript filer osv. Resten hentes på normalvis fra din hjemmeside. Dette betyder flere ting. Bl.a. bliver dit webhotel ikke så belastet, de statiske filer leveres lynhurtigt, og får loadtiden på dit website ned, og brugeren bliver i sidste ende en smule mere glad. Et CDN har også en geografisk fordel, ved at de har servere flere steder i verden, og på dem alle ligger dine filer. Når en bruger fra USA vil tilgå dit website, vil den CDN server der ligger tættest på, levere de statiske filer. Ganske smart og ganske hurtigt.

Der findes mange forskellige CDN services derude, men den jeg vil tage udgangspunkt i er Cloud Flare (CF). Cloud Flare CDN fås med forskellige abonnementstyper, hvoraf den ene er gratis. En af de andre fordele ved CF, er at det er meget brugervenligt at sætte op. Et klasse eksempel på hvordan en meget teknisk service kan sættes op, så man med få simple trin, kan komme ud over stepperne.

Første trin er at oprette en konto på CF her. Derefter tilføjer du dit website, og Læs videre Sådan opsætter du CDN til dit website