Alle indlæg af medom

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.

Integration af Facebook pixel, Google analytics og andre tracking scripts – del 1

Lad det være sagt med det samme, jeg er ikke ekspert på området. Jeg stødte blot på rigtig mange problemer med integrering af disse scripts, at jeg blev nødt til at dykke helt ned i området. Derned hvor man egentlig ikke gider komme, men ikke har noget valg.

Det startede en aften hvor jeg skulle udskifte det gamle facebook tracking med den nye facebook pixel på min shop. Man kopier et script fra facebook og paster et bestemt sted på sit website. I sig selv en banal affærer,  men jeg kunne ikke få det til at virke. For at se om alt er som det skulle være, brugte jeg facebook pixel helper, en extension til Chrome. Den fortæller om den kan finde scriptet på den side man står på, og om det indeholder de rigtige data. Jeg fik disse beskeder:

14495362_10208822293009369_8211341949970065802_n

Dette er fra en produktside, der skal modtage 2 forskellige slags data. Først et pageView, der tracker sidevisninger (denne skal være på alle sider på shoppen/sitet) og så ViewContent, der sender informationer om det produkt man kigger på (denne skal selvsagt være på alle enkelte produktsider.). Læs videre Integration af Facebook pixel, Google analytics og andre tracking scripts – del 1

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?

Google Adwords – Genvejen til en 1. plads

bambus-adwords

Har du lavet SEO (søgemaskineoptimering) på din hjemmeside, ved du hvor tidskrævende, og svært det kan være. Synes du at vejen til en 1. plads på Google er for lang, kan du købe dig til den med Google Adwords, og det tilmed fra den ene dag til den anden.

Google Adwords er de reklamer man ofte finder i siden og toppen af Googles søgeresultat også kaldet SERP(Search Engine Result Page). Dette er annoncer betalt af andre firmaer, og det er her Google tjener sine mange milliarder.

Har du en hjemmeside, kender du også vigtigheden i at ligge i toppen af Google på de rigtige søgeord. Som jeg indledningsvis fortalte, kan dette være en både svær, dyr og meget tidskrævende proces ved brug af SEO. I nogle brancher kan konkurrencen være en ulige kamp hvis der er alt for mange om buddet. Og skal man så lade være med at tage kampen op, eller skal man blot vinkle den på en anden måde? Læs videre Google Adwords – Genvejen til en 1. plads

Nyhedsbreve er dit vigtigste medie – punktum.

news1
Sidste nyhedsbrev fra Curvii læste 58% af de tilmeldte. Det kostede få ører pr stk. af sende ud og leveringstiden var 1 sekund. Hvad koster din markedsføring?

Ja det er rigtigt. Er du ikke kommet i gang med nyhedsbreve endnu, så har du indtil videre glippet den bedste måde, at kommunikere med dine kunder. Tror du mig ikke, så læs med her. Læs videre Nyhedsbreve er dit vigtigste medie – punktum.

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

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

Skriv dig til side 1 på Google

haj

Er du ikke en ørn til SEO, men en haj til at skrive, kan du stadig ramme side 1 på Google. Lav en kop kaffe og fat tasterne, for nu skal vi skrive os til en større bundlinje.

SEO kan være en svær disciplin at mestre, og selvom det ofte bliver sammenlignet med gode placeringer på Google, er det kun den halve sandhed. Content Marketing er det nye sort. Faktisk er det ikke overhovedet ikke nyt, men for nylig er der kommet stor fokus på netop dette emne, og med god grund. Lægges der kræfter i, kan man opnå rigtig fine resultater. Resultater der arbejder for dig 24/7, helt uden brok og sygedage. Læs videre Skriv dig til side 1 på Google

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

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