Hastighedsoptimering – sådan får du en hurtigere hjemmeside 14 min.

En hurtig hjemmeside er i dag et mål for alle der er kaptajnen på deres egen hjemmeside. Her skal der en seriøs omgang hastighedsoptimering til, for at leve op til den standard de besøgende er vant til. Og ikke mindre vigtigt, er det et fundamentalt krav fra Google, hvor det er en af de afgørende faktorer for hvordan din hjemmeside rangerer i søgeresultaterne.

Når det kommer til indlæsningshastighed af din hjemmeside, handler det groft sagt om at den skal fylde så lidt så muligt, så den nemt og smertefrit kan sendes fra serveren til den besøgendes enhed, og den browser de bruger.

Først er det værd at nævne, at der er en del faktorer som du ikke selv kan optimere på, når målet er at få en hurtig hjemmeside:

• Hvor hurtig internet har den besøgende på det givne tidspunkt?
• Hvor meget regnekraft/hvor ny er den enhed som den besøgende bruger?
• Hvilke land besøger brugeren siden fra?
• Hvilket styresystem og browser anvender den besøgende ?

Alle disse uvisse parametre er endnu et argument for at din hjemmeside skal være så let som muligt. Tænk nu hvis brugeren står med en dårlig internetforbindelse og en gammel smartphone i Angola og gerne vil besøge din hjemmeside. Er det så smartest at have en stor side som fylder meget? Eller en lille og komplet optimeret hjemmeside som indlæses hurtigt, lige meget hvilke internet/netværk den besøgende befinder sig på. Vi vælger nummer to – er du enig? 😉 

Heldigvis er der også en del ting du godt kan gøre noget ved, når det kommer til hastighedsoptimering af din hjemmeside. Dem kigger vi på her.

Hvor hurtig eller langsom er min hjemmeside?

Først og fremmest handler det om at få et overblik over hvilke indsatsområder der gør sig gældende, når vi snakker hastighedsoptimering.

Den første test du kan lave, er at prøve at indlæse hjemmesiden fra forskellige enheder. Hvis siden tager mere end 2 sekunder at indlæse, er der områder der kan gøres noget ved. Vi plejer at sigte efter at hjemmesiden skal indlæse på omkring 1 sekund – det afhænger dog meget kundens krav til indhold, og hvad der er standard.

Udover denne meget pragmatiske tilgang til test af din hjemmeside indlæsningshastighed, er der også forskellige online redskaber som kan give dig noget konkret data, og indsigt i hvordan din hjemmeside klarer sig, i forhold til de krav der stilles til hjemmesidens opbygning.

Google PageSpeed Insights

Opdatering:

PageSpeed Insights, der er baseret på open source projektet Lighthouse, har den seneste tid givet markant lavere scores. F.eks. får en side som Amazon.com. der kun 36, på trods af at der konstant bruges mange penge og timer på at optimere den:

Vi anbefaler derfor at bruge Pingdom Tools, som du kan finde længere nede i indlægget, i stedet.

Google har deres eget analyseredskab der er målrettet hastighedsoptimering. Det er gratis, og du kan bruge det lige så tosset du vil. Når du har kørt analysen igennem, får du en overordnet score mellem 0-100, hvor 100 er det bedste.

Efter Googles Mobile First algoritmeopdatering, kom der mere fokus på optimering rettet mod mobile enheder, derfor får du både en desktop og en mobil score. Dog sker det sjældent at man opnår en score på 100 begge steder, da Googles egne scripts, ironisk nok, ofte spænder ben for  en top score, og måske “kun” får 97. Heldigvis er det mere end rigeligt til at gøre Google tilfredse, og det er vigtigt da de altså varetager over 90% af alle søgninger online.

Prøv Google Page Speed her.

Udover de 2 overordnede scorer, fortæller Google dig også direkte hvad du bør optimere på din hjemmeside. Noget kræver noget mere teknisk viden end andet.

Du får også mulighed for at se hvilke hastighedsoptimeringer der allerede er lavet på din hjemmeside.

Pingdom Tools

Personligt kan vi endnu bedre lide Pingdoms hastighedstest, da den giver dig noget mere konkret data på hvordan din hjemmeside indlæses og de laver deres egen score, som giver en mere nuanceret indsigt. Vi bruger i dag primært Pingdom Tools når vi skal finde frem til de tekniske knuder der sløver en hjemmeside.

Prøv Pingdom Tools her.

Hvordan laver man hastighedsoptimering på sin hjemmeside?

Når du har analyseret dig frem til dine indsatsområder, ved du hvilke tekniske områder der skal optimeres – og så er det bare om at komme igang. Hvis du er i tvivl om hvilke forskelle optimeringsområder det kan dreje sig om, har vi oplistet dem her:

• • Reducering af kode og scripts

• • Aktiv brug af web komprimering

• • Serverens kapacitet

• • Synligt indhold over skillelinjen

• • Viderestillinger

• • Browser cache

• • Optimering af billeder

• Fjern gengivelsesblokerende scripts over skillelinjen

Herunder vil vi kort forklare, hvad hvert enkelt optimeringsområde består af, så det måske også giver mening for personer der ikke beskæftiger sig med programmering og hjemmesider til daglig. Så bliver du i hvert fald klar over hvor der er mulighed for hastighedsoptimering af din hjemmeside.

Reducering af kode og scripts

Din hjemmeside består af en masse forskellige kodesprog, der alle arbejder sammen for at levere en komplet hjemmesideoplevelse til de besøgende. Denne kode kan efter færdigudvikling som regel godt godt reduceres ned til et minimum. Det handler om hvor mange tasteanslag der er i hver kodefil, og reducere det til et det nødvendige minimum, for at siden stadig fungerer.

Denne reducerings-/optimeringsproces kaldes på dansk minifikation af koden. Reduceringen består i at fjerne formatering af teksten, kommentarer og ubrugt kode. Herunder er et eksempel på reducering/minifikation af en CSS kode:

Som sagt skal reduceringen/minifikationen af koden ske på de filer som er vigtige for at indlæse hjemmesiden rigtigt, og teknikken er den samme uanset kodesprog. Nedenfor har vi oplistet de 3 kodetyper som bruges når en hjemmeside skal indlæses af en bruger, og derfor også de programmeringsområder der skal reduceres/optimeres for den bedst mulige brugeroplevelse.

• Reducer CSS
• Reducer HTML
• Reducer Javascript

Aktiv brug af web komprimering

Når en bruger besøger din hjemmeside, bliver der sendt pakker mellem serveren og enheden den besøgende anvender. Disse pakker indeholder den kode der skal til for at indlæse din hjemmeside. I og med at en hjemmeside består af meget forskelligt kode i forskellige filer, kan  dataen komprimeres. Det svarer lidt at zippe filer sammen på din computer i en pakke inden du skulle sende dem online.

Web standardens komprimeringsformat der anvendes i dag, hedder gzip som kan reducere indholdets størrelse med op til 90%. Det kan altså betyde enormt meget for det data der skal sendes fra serveren og downloades til enheden som besøger hjemmesiden.

Serverens kapacitet

En server er computer som har til formål at opbevare data på forskellige måder, og ikke mindst levere dette indhold/data når der kommer en forespørgsel fra en klient (computer) ud på netværket/internettet. Når vi snakker om servere i dette indlæg, er dataen der skal sendes til brugeren, din hjemmeside. Det sker når brugeren indtaster din hjemmesides adresse i deres browser, eller klikker på et link til din hjemmeside.

Her er det vigtigt at du har en server/webhotel  som kan levere den ydeevne der skal til for at indlæse hjemmesiden hurtigt på den besøgendes enhed. Det drejer sig meget om antallet af ram og størrelsen af serverens CPU, som er afgørende for hvor godt den præsterer når den skal levere en god hjemmesideoplevelse til brugerne. Når du har et webhotel, oplyses det som regel hvor meget regnekraft du får, ved de forskellige løsninger. En lille blog/service hjemmeside med få besøgende, behøver ikke en kæmpe server med stor regnekraft, hvorimod en webshop med mange funktioner, og mange besøgende kræver noget mere af den server der bruges. Så ligger din hjemmeside i dag på en langsom server, er der altså her en oplagt mulighed for hastighedsoptimering.

Optimering af billeder

Noget af det tungeste en hjemmeside kan indlæse, er billed- og videoindhold. Især hvis de ikke er skalerede, komprimerede og generelt optimerede til  hvor de skal bruges på hjemmesiden.

Skalering af billeder

Når du anvender billeder på din hjemmeside, skal du tænke dig godt om og ikke bare uploade fotografens tilsendte rå billedfiler, der måske fylder 5 mb stykket. Hvis vi skal tage udgangspunkt i at en underside må fylder mellem 1 og 2 Mb, så kan du hurtigt komme til at mangedoble størrelsen på den pågældende side, og det kan være katastrofalt for den gode oplevelse for dine besøgende, eller mangel på samme – og ikke mindst for hvordan søgemaskinerne indekserer dig.

Når du ønsker at bruge billeder på din hjemmeside, skal du finde ud af hvilke dimensioner (i pixels eller anden lignender enhed) der er brug for som minimum. De dimensioner du finder frem til, skal du tage udgangspunkt i når du skalerer eller cropper dit billede, ned til den aktuelle anvendelsesstørrelse.

Formater & komprimering

Billedformaterne GIF, PNG & JPEG udgør 96% af internettets samlede billeder. Derfor går søgemaskinerne meget op i at disse formater er korrekt eksporteret/gemt til brug på internettet. Formaterne GIF og PNG er bitmap format, som ikke kan komprimeres nær så meget som JPEG, og bevarer derved billedkvaliteten bedre, men reducerer ikke størrelsen nær så meget.

JPEG filers billeddata kan komprimeres ned til 1/10 del af den oprindelige størrelse. Prisen er at kvaliteten så også falder rigtig hurtig, så snart billedet skaleres over de anvendte dimensioner.

Som udgangspunkt skal billeder komprimeres, så de passer perfekt til den størrelse og det formål du skal bruge dem til. Et eksempel kan være at man gemmer en PNG med en gennemsigtig baggrund, og det resulterer i at der er mindre data der skal indlæses.

Synligt indhold over skillelinjen

Dette fokusområde omhandler hvad der er nødvendigt at indlæse for at vise brugeren det første skærmbillede på din hjemmeside. Så skillelinjen definerer altså det indhold man kan se som det første når siden indlæses.

Hvor skillelinjen går kan variere meget fra enhed til enhed, alt efter hvor ny eller gammel enheden er. Google har dog sørget for at simulere en indlæsning på en gennemsnitlig enhed, når du laver hastighedsanalyse via deres optimeringsredskab Google Page Speed.

Igen handler det om størrelser på de scripts som du sender fra webservere til den besøgendes enhed. Hvis scripts er for store, skal serveren besøges flere gange for at kunne rendere (indlæse visning i) det første skærmbillede over skillelinjen til brugeren. Det kan være en særlig udfordring for besøgende som anvender en smartphone på et mobilt netværk.

Hvis du vil leve op til denne Google-regel og sørge for en hurtig hjemmeside, skal du reducere mængden af data (scripts, billeder, video osv.) der er nødvendig for at indlæse det første skærmbillede over skillelinjen. Er det ikke et område du har fokuseret på, vil det være en hastighedsoptimering der kan mærkes på siden.

Viderestillinger

Viderestillinger eller redirects, som de også kaldes, handler om at du viser en bruger hen på en anden side end den de faktisk har trykket sig til.

Redirects kan hjælpe dig med at få Google til at forstå når du ændrer links, eller måske helt har slettet indholdet fra din side. Det kan være alt fra undersider, til produktsider eller hvad du ellers har på din hjemmeside. Fælles for dem alle er at de har en unik webadresse (URL), som søgemaskinerne indekserer og rangerer, alt efter kvaliteten af indholdet bag linket.

Viderestillinger er en måde at sikre at de besøgende ikke ender i en blind vej, hvor der ikke er noget indhold. Man kan sige at redirects er et vejskilt der leder dig ad den rigtige vej når indhold er blevet ændret eller slettet.

Dog betyder det så også at den besøgende først skal indlæse det gamle link, for så at finde ud af linket fører et andet sted hen, der også skal indlæses. Det betyder at der så lige pludselig er mere indhold der skal indlæses, end hvis linket ikke var blevet ændret eller slettet. Det kan unægtelig mærkes på indlæsningstiden, og især hvis det er tunge sider det drejer sig om.

Browser cache

For at hjemmeside oplevelsen skal føles mere flydende for den besøgende, anvender professionelle hjemmeside browser cache optimering. Hvilket groft sagt er en metode til at udnytte korttidshukommelsen i den browser enheden anvender, til at besøge din hjemmeside. Dvs. at du kan efterlade nødvendig hjemmesidedata, i den besøgendes browser. Det gør at scripts er indlæst på forhånd, og dermed giver en mere flydende brugeroplevelse på den videre navigation rundt på din hjemmeside.

Cache er et gennemgående udtryk som bruges når man snakker computere, og er ikke kun reserveret til hjemmesider og browsere.

Du kan læse mere om cache headers og hvordan de rent teknisk implementeres via:

• • Caching with Cache-Control

• Etags

Fjern gengivelsesblokerende scripts over skillelinjen

Når din hjemmeside skal indlæse filer fra den server hjemmesiden er hostet på, sker indlæsningen via en enhed i en browser som læser koden “ltr” (left to right), altså samme læseretning som os mennesker. Her siger Google det er vigtigt at HTML-koden (skelettet for din hjemmeside) kan indlæses som noget af det første i koden.

Du anvender måske flere forskellige styling sheets (CSS kodefil, der er afgørende for det visuelle layout – farver, størrelser osv.), og måske også funktionalitetsscripts som javascript. Hvis disse indlæses før HTML-koden, og er så store at browseren skal besøge serveren flere gange for at hente al dataen, vil Google og andre søgemaskiner forstå det som noget der blokere for indlæsningen af det mest relevante for hjemmesiden, nemlig HTML-koden. HTML-kode er fundamentet og skelettet for alle de andre kodesprog der indgår i en hjemmesides opsætning.

Der er forskellige ting du kan foretage dig. Det ene er at sørge for få og små CSS og javascripts. Eller sørge for at HTML-koden bliver indlæst først, og de andre scripts til sidst, eller efter første indlæsning. Dette kalder man asynkront (asynchronous) indlæsning eller udskudt (defered) indlæsning.

WordPress plugins kan hjælpe dig langt

Sidder du som mange andre med en WordPress hjemmeside, har du mulighed for at lette hastighedsoptimering og selve processen, på en måde hvor de fleste med lidt teknisk web forståelse kan være med. Vi har selv tidligere anvendt 2 forskellige løsninger – den ene gratis, den anden et premium plugin, hvor vi klart anbefale alle at anvende premium løsningen.

W3 Cache (Gratis)

Denne løsning har både en gratis og en premium version (vi har kun afprøvet den gratis version). Denne løsning kræver en del teknisk forståelse for at få lavet en effektiv løsning. Men selv når du har teknisk forståelse kan denne proces godt være en smule langhåret.

Derudover er der nogle kedelige faldgrupper, som i værste tilfælde kan få din side til at gå ned, hvis du kommer til at lave optimeringen lidt forkert. Men når man har gennemskuet løsningen, og hvordan den virker med din WordPress hjemmeside og det tema du anvender, så virker hastighedsoptimeringen rigtig fint.

Her finder du W3 Cache.

WP Rocket (Premium)

Dette plugin findes kun i en premium version, og er et plugin vi personligt er meget glade for. Dette plugin der kan hjælpe med hastighedsoptimering, gør det meget nemt og smertefrit at hastighedsoptimere din WordPress hjemmeside. Med nogle enkle klik, gennem en meget brugervenlig løsning, kan du øge din score i Google Page Speed betydeligt.

Se mere om Wp Rocket her.

Har du brug for hjælp til hastighedsoptimering af din hjemmeside?

Vi har lavet hastighedsoptimering på en lang række hjemmesider, som understøtter fundamentet for at skabe indhold og få mest ud af SEO arbejdet. Vi er specialister i Content Marketing strategi, i tæt sammenspil med SEO arbejdet, som samlet set giver øget synlighed og bedre placeringer i søgeresultaterne.

Kontakt os endelig hvis du har spørgsmål eller ønsker at vi skal give uforpligtende vurdering af din hjemmesides præstation, og om der er behov for hastighedsoptimering.

Vi arbejder tæt sammen med en af landets førende hastighedsspecialister når det kommer til hjemmesider. Vi kan varmt anbefale Turbo Tobias da han har styr på alt det tekniske, der skal til for at servicere dine hjemmesidebesøgende hurtigst muligt. Han drømmer om millisekunder og en verden hvor alle hjemmesider loader på 1 sekund!