Optimer hastigheden på din hjemmeside

af Morten Empeño

---

Skrevet Saturday, July 22, 2017

---

---

Pagespeed

Relativ ny research fra Google viser at 53 % af mobile brugere forlader din hjemmeside, hvis den tager mere end tre sekunder at loade. Gennemsnitligt loader et website på 19 sekunder på en 3G forbindelse og 14 sekunder på en 4G forbindelse. Så loades dit site ikke hurtigt på mobil, mister du muligvis rigtig mange besøgende og konverteringer - og taber dermed masser af penge.

Kilde: MarketingDive

Chokerende tal - og dermed skal vi have fokus på hastighedsoptimering i denne blog.

Hvad betyder pagespeed

Pagespeed er en term, der dækker over en måling af hvor hurtigt indholdet til din hjemmeside loades. Helt konkret kan man sige, hvor lang tid går der, fra du klikker på et link, til du ser det færdige resultat i din browser. Der er mere og mere fokus på pagespeed, da man har fundet ud af at hastigheden på hjemmesider er en vigtig faktor for konvertering. Det er altså vigtigt at have en hurtigt website, hvis du vil skabe salg, få folk til at tilmelde dig et nyhedsbrev, eller hvad der nu kan være et eller flere af dine formål med dine hjemmeside.

Når man taler om Pagespeed, må man ikke blande det sammen med Site Speed. Site Speed er et begreb, der dækker over et sæt af page views på et website.

Page speed kan beskrives mere specifikt i enten "page load time", der dækker over målingen af hvor lang tid det tager, at vise alt indhold på en specifik side, eller i "time to first byte", der dækker over hvor lang tid det tager , før din browser modtager den første byte fra web serveren.

Pagespeed og værdi

Uanset om vi tale Page Load Time eller Time to First Byte, er hurtigere Page Speed bedre. Hurtigere sider ranker bedre i søgeresultaterne, men de konverterer også bedre.
Der findes flere kilder, til at underbygge dette fact. Hvis du gerne vil se mere om page speeds betydning for ranking og konvertering, kan du eksempelvis læse denne artikel af Mikkel deMib Svendsen:

Hastighedsoptimering

og her lidt mere generel information om Page Speed
Page Speed

Men lad os lige tage et minut eller to til at tænke over Page Speed og dets betydning for dit website. Forøger du hastigheden på din hjemmeside, får du altså en bedre ranking hos Google, og dermed formentlig også flere besøgende på dit website. Det er jo en rigtig fed gevinst. Men det mest imponerende er jo at du kan kombinere det med, at bedre hastighed også giver en bedre konvertering.
Det kræver ikke at man er matematisk geni, før man kan se, at man få enorm stor værdi ud af at optimere hastigheden på sit website. - Og den bedste nyhed: ofte er der rigtig mange quick wins i forhold til page speed optimering. Der er ofte mange ting man kan gøre, også selv om man ikke er teknisk anlagt.

Google og Page Speed

Google melder ikke ret meget konkret ud om hvad der er algoritmen, der bruges til at beregne hvor højt hver url ligger i deres søgeresultater. Så når de endelig siger noget konkret, så lytter vi, der interesserer os for SEO og ranking, godt efter.
Allerede i 2010 kom Google ud med en officiel blog post, hvor de mere end indikerer at site speed (og dermed også page speed) er én af faktorerne i deres algoritme.
Using Site Speed in Web Search ranking

Med øget trafik på mobile enheder er det også relevant at vide at Google ii 2016 har meldt ud at din hjemmesides hastighed får direkte betydning for din mobile ranking - måske har det allerede fået betydning.
Læs mere her:
Page speed is Ranking Factror

Heldigvis har vi MOZ, der altid er gode til at undersøge og kommunikere i forhold til SEO. De har i 2013 undersøgt hvordan website speed mere præcist påvirker search ranking. Konklusionen er at TTFB (Time to First Byte) er enormt vigtig for din ranking på Google.
Hvis du er interesseret i at grave mere ned i materien, kan jeg anbefale denne blog post:
Website Speed Impacts Search ranking
Så nu bliver det jo lige pludselig enormt vigtigt at have sit website hostet på "godt jern". Du skal altså have det på servere, der svarer hurtigt, er tæt ved dine brugere mv. Der er heldigvis en masse nemme tilgange til at forbedre TTFB. Google har direkte meldt ud, at du skal gå efter en TTFB på maksimalt 200 ms.
En målig på https://www.empeno.dk giver dette resultat:

Markeret med gult ser du, at TTFB er 134,8 ms. Det er altså et rigtig godt resultat, men der er også gjort noget aktivt for at minimere TTFB.

Her er et andet eksempel, fra en dansk webshop, jeg fik lov til at analysere lidt på:

Her er vi så på 842,37 ms. Det er skræmmende. Der går jo næsten et sekund helt uden at den besøgende har modtaget noget som helst. Siden tog i øvrigt mere end fire sekunder om at loade, så der er måske den primære forklaring på manglende konvertering.

User Experience og page speed

Udover de direkte og mere målbare fordele, der er ved at optimere page speed, kan jeg også nævne at page speed er enormt vigtig for user experience. Du kender det sikker selv: du sidder på en hjemmeside, hvor det tager flere sekunder, hver gang du laver en handling. Typisk kan det være for hjemmesider, der viser en stor mængde data. Uden at pege fingre, kan jeg måske tillade mig at give https://sportmaster.dk som eksempel. Prøv at tilgå en af deres produkt sider, og lave en filtrering på kategori eller lignende. Det er måske nok én af de ringeste user experiences man kan give sine kunder, og jeg synes det er uforskammet. Her er et udsnit af hvad der sker, når jeg laver en søgning på damesko:

Jeg sidder med en ret hurtig forbindelse, og alligevel beder Sportmaster mig lige vente i mere end otte sekunder, før jeg får det fulde resultatet. Alene DOMen tager mere end 3,5 sekunder. Desuden får jeg smidt en masse fejlende kald lige i hovedet - ovenstående er kun et udsnit - der er mere end 20 fejlende requests. Det værste er næsten at laver en anden bruger, et tilsvarende kald lige bagefter, så tager det omtrentligt samme tid. Man har altså ikke lige valgt at have en caching strategi, og nogle effektive indeks til opslag, så man giver mig og andre brugere et hurtigere svar, og mindske deres og vores dataforbrug. Flabet, ik’? :)
Når nu selv relativt store websites klarer sig så skidt på page speed, så kan du nok forestille dig hvor mange websites - bare i Danmark - der ikke udnytter det enorme potentiale, der er i optimering af page speed.

Komprimering

Du skal komprimere størrelsen på dine stylesheets, html filer og javascript filer ved at bruge Gzip. Der er ikke så meget at diskutere her. Hvis du ikke komprimerer stylesheets, html og javascripts bliver dit site langsomt - og du kan ikke være det bekendt over for dem, der besøger dit website. Havde du en fysisk butik, ville du også gøre dig umage for at hjælpe kunderne med at få varerne på mest effektiv vis. De ville ikke skulle bære rundt på det pap og emballage, som poserne med mel oprindeligt stod id - de har lov til kun at putte posen med mel i indkøbskurven.
Det er ikke teknisk svært, tidskrævende eller dyrt at få komprimere stylesheets, html og javascripts, så hvis det ikke allerede er gjort på din hjemmeside, så få det gjort.
Du kan læse mere om komprimering af komponenter med Gzip her:
https://developer.yahoo.com/performance/rules.html#gzip

Minify CSS, JavaScript og HTML

Den her er vigtig. Her er virkelig store ting at hente i forhold til optimering af hastighed - og dermed også i forhold til konvertering.
Du eller de software udviklere, der laver dit website, skal optimere selve koden, så CSS, JavaScripts og HTML er “minificeret”. Det betyder egentlig bare at koden ikke indeholder unødvendige karakterer. Hvis koden ikke er minificeret, vil alle dine besøgende få smidt datatrafik i hovedet, som de ikke skal bruge til noget som helst. Det giver dem INGEN værdi. Data, der ikke giver værdi, er en omkostning. - for dig og for dine besøgende. Så det skal være i orden. Er du i tvivl om CSS, JavaScript og HTML er minificeret på dit website, og ved du ikke hvordan du kan tjekke det, kan du bare lige kontakte mig - så skal jeg nok tjekke det hurtigt for dig.
Google anbefaler brug af YIU Compressor til både CSS og JavaScript:
Læs mere om YUI Compressor her:
YUI Compressor

Minimer dine redirects

Man ser ofte en hel kæde af redirects på diverse hjemmesider. Det betyder egentlig bare, at brugere smides rundt til andre sider, før de får serveret indholdet til den hjemmeside, de vil se. For at konkretisere, kan vi tage et fiktivt eksempel. Bentes Blomster har fået lavet en hjemmeside, der ligger på http://bentesblomster.dk og http://www.bentesblomster.dk
Det er helt normalt at sider kan findes både med og uden www.

Men Bente er smart. Hun har hørt om Duplicate Content, så hun sikrer at http://bentesblomster.dk redirecter til http://www.bentesblomster.dk.
Nu vil brugere, der forsøger at ramme hendes hjemmeside uden www få et redirect, inden de får hendes hjemmeside. Så nu skal bente huske at have www med, på alle de steder, hvor hun linker til sin hjemmeside (for Bente laver jo god LinkBuilding for at opnå bedre ranking:)). Hvis der stadig ligger links rundt omkring på nettet, hvor www ikke er med i Bentes url, vil alle de brugere, der klikker på det link, skulle igennem et redirect, inden de får hendes side.

Senere finder Bente ud af at det er smart at hjemmesider kører på https og ikke http.

Https er sikkert, det anbefales af Google og af hendes webmaster, der går op i sikkerhed. Så hun skifter nu sin hjemmeside over til at svare på https://www.bentesblomster.dk

Webmasteren laver lige endnu et redirect, så dem der rammer http://www.bentesblomster.dk , redirectes over til https://www.bentesblomster.dk
Men hov… webmasteren glemte at ændre den første redirect.
Så nu kommer Josefine Blisand ind på en hjemmeside om blomster, og her ligger et gammelt link til Bentes Blomster, der peger på http://bentesblomster.dk
Josefine vil nu først ramme http://bentesblomster.dk
Så redirectes hun til http://www.bentesblomster.dk
Så redirectes hun til https://www.bentesblomster.dk

Og først her begynder Josefine at få brugbar data - alt inden har egentlig bare været spild af tid.
Det er et simplificeret men meget relevant eksempel. Det bliver meget mere komplekst når folk skifter domæner, men ønsker at gamle url’er linker til nye. - det kan også være skift af CMS system, der medfører at url’er får nye adresser. Her benyttes ofte redirects, da man jo ikke ønsker at miste ranking på de gamle url’er.
Så… redirects skal minimeres. Det bedste er hvis dine besøgende altid rammer den rigtige url i første hug.

Browser Caching

Din browser ken gemme en hel masse information, når man besøger et website. Det kan være stylesheets, billeder, JavaScripts, fonte mv. Det betyder, at første gang en besøgende rammer dit site, vil disse informationer blive gemt lokalt på den besøgendes computer eller device. Når brugerens så kommer tilbage - og det gør han jo, for din side er jo mega spændende og opdateres ofte med relevant indhold - så vil den besøgendes browser ikke skulle hente alt data igen over netværket. De billeder, der er cachet lokalt, vil blive hentet lokalt. - og det går MEGET hurtigere. Desuden sparer det data på din server, så det er ren win win. Der findes gratis tools, som kan hjælpe med at informere dig om specifikke filer hentes fra serveren eller fra browser cachen.
Du bør have det rigtige setup af din expire header, med information om hvor længe du vil cache filer. Jeg anbefaler en rigtig lang cache tid, da eksempelvis billeder jo typisk ikke ændrer sig. Ændrer du et billede på forsiden af din hjemmeside, er det jo oftest et helt nyt billeder, der lægges på siden.
Du kan læse mere om Expire Headers her
Expire Headers
Og her kan du læse mere om browser caching:
Browser Caching

Server Reponse Time

Din servers respons tid afhænger af mængden af trafik og meget mere. Du kan altså ikke blot lave en enkelt måling af hvor hurtigt dit website svarer, og regne med at der er hele sandheden. Det er naturligvis også vigtigt for responstiden at se på hvilke ressourcer, hver side på dit website bruger. En WordPress side med et flot theme, der er programmeret rigtig skidt, er ofte en synder. Sammenholdt med flere dårlige WordPress plugins, kan det ødelægge mere end det gavner. Så her skal du være meget opmærksom på hvad du bruger. Som med meget andet, er der ofte en sammenhæng mellem pris og kvalitet. For at forbedre din servers respons tid, skal du se på hvor flaskehalsene er. Det kan eksempelvis være langsomme database kald. Database kald skal, som alt muligt andet, optimeres korrekt, og de skal helt undgås, hvis resultatet kan hentes fra server cachen.
Når en bruger kalder en url, vil vi gerne sikre at brugeren får svar fra en server, der er tæt på, for at minimere latency. Så du skal overveje hvor dine brugere er, og have en platform, der understøtter det.
Det er altså her vi kan gøre meget for TTFB, som blev nævnt tidligere.
For at levere content til brugere med lavest mulig latency, kan du bruge produkter som eksempelvis Amazon CloudFront.
Du kan læse om CloudFront her:
CloudFront

Content Distribution Network

Dit website skal gøre brug af et Content Distribution Network, hvis du har en international målgruppe. Er din målgruppe udelukkende lokaliseret i Danmark, er det fint at have en eller flere servere i Danmark til trafikken.
Det lyder fancy og komplekst, men CDN er egentlig bare et netværk af servere, der bruges til at distribuere trafik, så indhold til den besøgende på en hjemmeside er baseret på, hvor den besøgende befinder sig.
Med tiden er det blevet mere og mere relevant, fordi vi er mere globale, og rejser mere. Så selvom din hjemmeside handler om urtepotter og er på dansk, kan det godt ske at 10% af trafikken kommer fra andre lande. Brug at tracking værktøj, og baser din beslutning på facts. Har du en relevant mængde trafik fra forskellige steder i verden, bør du se på brug af CDN for at optimere Page Speed.

Få bedre ranking ved at optimere billeder

Billeder bliver brugt naturligvis benyttet hyppigt på diverse websites. I dag anslår man at billeder optager mere end 60% af trafikken på et gennemsnitligt website. De nyeste websites, med de nyeste designs, vil typisk have en større andel af billedmateriale, og det er ikke unormalt at billeder udgør mere end 85% af datatrafikken på nyere websites. Alene derfor er det yderst relevant at arbejde på den mest effektive måde med billeder på hjemmesider. I en kommende artikel får du en række gode råd, tips og tricks til at optimere dine billeder til web, så dit website performer på bedst mulig vis i denne kontekst.

Konklusion

Vi kan se at det har enorme omkostninger at have en langsom hjemmeside. Selv for helt små virksomheder kan det være afgørende at have en hurtigt dataoptimeret hjemmeside, for netop den meget lille virksomhed er måske den, der er mest afhængig af at en hjemmeside skaber konvertering.