Langsom hjemmeside? Her er 15 tips til hastighedsoptimering af dit website [GUIDE]

Er du træt af, at dit website eller din webshop er langsom, så får du i dette indlæg 15 tips til, hvordan du kan hastighedsoptimere din hjemmeside og dermed sænke loadtiden.

Hastighed er en vigtig faktor set i forhold til brugeroplevelsen, og den får kun endnu større betydning, når brugerne besøger dit website via deres smartphone – især når de sidder i bussen eller toget og kun har adgang til mobilselskabernes netværk.Samtidig har en langsom loadtid en negativ betydning for din bundlinie og en række uheldige følgevirkninger på SEO. Derfor kan blot ét eller få sekunders forbedring af loadtiden have en meget positiv indvirkning på din forretning. Amazon har lavet en undersøgelse af hjemmeside-hastighedens indvirkning på deres omsætning, hvor de konkluderede, at for hver 100 millisekunder sitet loader hurtigere, stiger omsætningen med 1%.

Brug for hjælp til hastighedsoptimering? Kontakt os her og få et hurtigere website. 

Test dit websites hastighed

Google har udviklet et godt værktøj, hvor du kan måle loadtiden for en given URL samt få forslag til, hvad du kan gøre for at reducere loadtiden på en konkret side på dit website.

Prøv værktøjet herunder (eller hop direkte til de 15 tips):

Link: Google PageSpeed Insights


1. Gør din webserver hurtigere

  • Opgrader din webserver, så den ligger på bedre hardware. Få hurtigere CPU, mere og hurtigere RAM og en hurtigere harddisk.
  • Husk også at teste, om din webserver giver dit website lov til at benytte alt den RAM, der er til rådighed. Det hjælper ikke at fordoble mængden af RAM på din webserver, hvis den er konfigureret til kun at tillade websitet maksimalt at bruge eksempelvis 24Mb RAM per forespørgsel.
  • Opgrader den båndbredde, som er til rådighed for webserveren.
  • Undersøg om din webserver og/eller den platform, som dit website er baseret, på foretager unødvendig logging af trafikken, som tærer unødvendigt på både CPU-kraft og RAM samt foretager lagring af unødvendige data på harddisken. Dette er ofte relevant for trafik-data, som du alligevel kan få i bedre kvalitet i Google Analytics.


2. Optimer din databaseserver

Overvej at hoste databasen, der benyttes sammen med dit website, på en separat webserver.

Test den SQL-kode, som bruges på dit website til at hente data fra databasen, og se, om der er SQL forespørgsler, som henter data uhensigtsmæssigt.

Det kan eksempelvis være:

  • At du benytter SQL-forespørgsler, som gør, at der skrives unødigt på harddisken, i stedet for at så meget som muligt kan køre i serverens RAM.
  • At du ved visning af produkter på kategorisider loader samtlige data for hver produkt, der listes, til trods for, at du måske kun behøver at loade produkt-URL, produkt-billed-ID, produktnavn og prisen.


3. Ryd op i din HTML

Fjerne unødvendig fyld i HTML-koden:

  • Meta-data i <head> sektionen, som hverken søgemaskinerne eller din browser bruger.
  • HTML-kommentarer som ingen bruger.
  • Reducere dobbelt-mellemrum til enkelt-mellemrum, og dobbelt-linieafstand til enkelt-linieafstand og fjern unødige indryk.
  • Undersøg HTML-koden, som din WYSIWYG-editor generer. Her tænkes på den teksteditor, du har adgang til via din platforms backend, og som du benytter til at skrive brødteksten på en side. Kig efter, om den automatisk kommer til at fylde ekstra, ubrugelige og oftest udgåede HTML-tags på. Det kunne eksempelvis være at ændringer i en font eller en skriftstørrelse for en tekst markeres som: <font style="color: Grey; font-size: 12px, etc.....">Min brødtekst...<font>.


4. Få styr på JavaScript og CSS

Læg onpage JavaScript og CSS-kode ud i separate filer og minify indholdet – i stedet for at det ligger direkte i HTML-koden. Brug eksempelvis JavaScript Minifier og/eller CSS Minifier hertil. Det anbefales ikke at bruge minify dynamisk/on-the-fly, sørg i stedet for at alt JavaScript og CSS-kode ligger i faste separate filer, der på forhånd er minified og at websitet er testet grundigt op imod disse.

Hvis man har sin JavaScript og CSS-kode samlet i flere forskellige filer, så sæt dem sammen til en enkelt JavaScript-fil og en enkelte CSS-fil. Dette reducerer antallet af HTTP(S) forespørgsler, som både en brugers browser samt søgemaskinerne er nødt til at foretage for at kunne loade en side.

Hvis noget CSS- og/eller JavaScript-kode kun skal bruges på bestemte sider, så kan du overveje kun at loade det ind på de sider, hvor dette er nødvendigt. Eksempelvis på en produktside, hvor man kan få vist produktbilledet i stor størrelse. Den JavaScript- og CSS-kode, du benytter til denne funktion, kan du så nøjes med at loade ind på produktsider, mens dette ikke er nødvendigt at hente ind på kategori- og underkategorisider.

Test også, hvilken enhed brugeren benytter, er det en desktop, en tablet eller en smartphone? Måske er der funktioner på dit website, som det ikke er muligt at køre på en smartphone, eller måske bruges der en helt anden teknologi hertil. Her kan du også sørge for kun at hente netop den JavaScript- og CSS-kode ind, som den pågældende desktop eller mobile enhed understøtter.

Få eventuelt flere udviklere til at se på din JavaScript- og CSS-kode, måske kan den omskrives så den fylder mindre og eksekveres hurtigere.

Man kan undgå at websitet hænger, fordi den forsøger at køre JavaScript-kode, som endnu ikke er loadet. Dette gøres ved at tilføje defer="defer" attributten, eksempelvis:

<script type="text/javascript" src="includes/general.js" defer="defer"></script>

En side vises hurtigere, hvis man “forsinker” load af JavaScript. Det kan man gøre ved at placere sin JavaScript i bunden af siderne, samt sørge for at ens JavaScript-kode så vidt det er muligt kører asynkront. Sørg dog for at teste dette setup meget grundigt, da det kan skabe udfordringer set i forhold til de forskellige JavaScript-elementers interne afhængighed.


5. Optimer dine billeder

Reducer antal Kb- eller Mb-størrelsen på dine billeder. Dette kan du gøre ved:

  • at have flere eksemplarer af hver billede i netop de højder og bredder (i pixels), som du benytter rundt på dit website.
  • at fjerne meta-data på de billeder som benyttes på dit website.
  • at reducere farvedybden på billederne, uden at det medfører tab af billedkvalitet for et menneskes øje.
  • at sørge for, at der altid er angivet korrekt højde og bredde for billedet i HTML-koden – eksempelvis <img height="400" width="600" src="/billede.jpg"... /> – så kan browseren hurtigere rendere siden, da den ikke først skal loade billedet, før den ved, hvordan det skal fremvises på siden.

Lave CSS-sprites af billeder, eksempelvis til grafik/ikoner der bruges som billedlinks. I stedet for at have eksempelvis en masse små flag-ikoner i headeren på alle siderne på dit website, der bruges til at navigere brugerene videre til de forskellige sproglag, der er tilgængelige. Så kan man i stedet lave en enkelt grafikfil, som indeholder alle flag.

Her bentter man så en kombination af HTML og CSS til:

  • at skabe mouse-over-effekten, når man kører musen henover de enkelte flag.
  • at en bruger og Googlebot bliver ledt hen til den rigtige sprog-URL, alt efter hvilket flag, der blev klikket på.

Ved at reducere mange små flagikoner til en enkelt stump grafik, der indeholder alle flag, så er det med til at reducerer antallet af HTTP(S)-forespørgsler.

Du kan se et konkret eksempel på, hvordan man implementerer CSS-sprites på W3School.

Du kan bruge dette tool til både at reducere størrelsen på et billede i pixels samt hvor mange Kb den fylder: Imageoptimizer.net.


6. Brug expire headers

Sæt expires headers ind på CSS-, JavaScript- og billedfiler (herunder favicon), så både søgemaskiner og browsere ikke genloader disse, før udløbsdatoen er passeret.

De betyder at både browsere og Googlebot gør brug af den nuværende udgave af CSS-, JavaScript- og billedfiler, som de har liggende i deres cache, fremfor at loade den ned hele tiden for hver eneste side. Det reducerer også antallet af HTTP(S)-forespørgsler for en side.

Det er vigtigt at være opmærksom på, at dette ikke gør loadtiden hurtigere for aller første besøg, men det kan øge loadtiden betragteligt, når en bruger besøger side igen og for brugere, der jævnligt vender tilbage. Dette betyder også, at det fortsat er vigtigt at sørge for at ens website – uden brug af expire headers – loader så tilpas hurtigt, at brugerne får et rigtig godt førstehåndsindtryk af dit website.

Expire headers konfigureres på selve webserveren, og måden, du gør det, er forskellig alt efter, hvilken webserver du benytter. Hvis du eksempelvis benytter Apache som webserver, så konfigureres Expire headers i .htaccess-filen.


7. Undgå interne redirects

Sørg så vidt muligt for at eliminere brugen af interne redirects, eksempelvis fra en side, der linker til en produktside, og som nu er flyttet over på en ny URL. Årsagen er, at redirects genererer ekstra HTTP(S)-forespørgsler, og det øger loadtiden. Du kan analysere, om der optræder interne redirects på dit website, ved at lave et SEO sundhedstjek af dit website med ScreamingFrog-spideren.


8. Brug et Content Delivery Network (CDN)

Hvis eksempelvis din forretning er international, og dine brugere og potentielle kunder er spredt ud over hele verden, så kan du bruge Content Delivery Networks (CDN) løsninger til at forbedre loadtiden. CDN-løsninger sørger for at “skubbe” det indhold, der kun sjældent ændrer sig, ud på CDN-servere (eksempelvis JavaScript, CSS og billeder), så disse elementer kommer fysisk meget tættere på brugerne. Dermed loader disse elementer hurtigere i brugernes browser.


9. Send data med zip-komprimering

Zip-komprimer alt indholdet for en side, inden indholdet sendes fra din webserver til brugerens browser og Googlebot.

Både brugerens browser og Googlebot vil vil sørge for at unzippe indholdet, så Googlebot kan læse det, og det kan fremvises i brugerens browser. Det nedsætter mængden af data, der skal sendes fra webserveren og frem til Googlebot og dine besøgendes browser, og dermed sænker det også loadtiden. Zip-komprimeringen gælder ikke kun HTML-koden, det bør du også gøre for CSS og JavaScript.

Du kan teste om din webserver zip-komprimerer indholdet via: GIDNetwork. Indtast en URL’en fra domænet, du ønsker at teste. I søgeresultatet skal du i venstre side lede efter ‘Web page compressed‘ og kontrollerer, om der her står værdien ‘Yes’.


10. Brug caching

Med caching kan du automatisk generere færdige flade HTML-filer på serveren, så der – for at fremvise siden til hver enkelte bruger – ikke er behov for, at serveren til hver sidevisning skal foretage databaseopslag og dynamisk generere HTML.


11. Overvej at aktivere Keep Alive

Keep Alive er en måde, hvorpå du kan fortælle en brugers browser og Googlebot, at de kan bruge den samme forbindelse til din webserver til at modtage alle nødvendige elementer for at kunne fremvise websiden. HTML-kode, CSS-filer, JavaScript-filer, billedfiler og så videre. Det reducerer CPU-forbruget, og det reducerer antallet af HTTP(S)-forespørgsler betragteligt, og dette kan samlet forbedre loadtiden.

Keep Alive skal man ikke nødvendigvis aktivere for alle typer websites. Årsagen er, at Keep Alive medfører, at webserveren typisk forbruger mere RAM, fordi den hele tiden skal have processer kørende med permanent åbne forbindelser, der hele tiden venter på forespørgsler. Dette medfører at webserveren ikke kan supportere så mange samtidige brugere.

Keep Alive anbefales derfor kun til websites:

  • som har tiltrækkeligt med RAM til rådighed.
  • som har sin trafik fordelt jævnt ud over døgnet.
  • som har mange tunge elementer, der skal overføres til brugerens browser som eksempelvis billedtunge websites.

Keep Alive kræver finetuning og aktiveres samt konfigureres på forskellige måder, alt efter hvilken webserver du benytter. På en Apache-webserver konfigureres dette i Apaches conf-fil.

Du kan teste om din webserver har aktiveret keep-alive via: GIDNetwork. Indtast en URL’en fra domænet du ønsker at teste. I testresultatet skal du se efter underoverskriften ‘Response Headers’. Her skal du i venstre kolonne lede efter parameteren ‘Connection‘, og kontrollere at der her står værdien ‘keep-alive‘.


12. Load dit indhold i den rigtige rækkefølge

Sørg for, at det indhold, der er øverst på din side (above-fold), bliver loaded først, mens det indhold, som først bliver synligt, når brugeren scroller ned på en side, først hentes bagefter, eller indlæses on-the-fly.

Dette er især en fordel på lange og billedtunge sider, eksempelvis visningen af produktbilleder på en kategoriside. Dette må dog ikke blive implementeret på en måde, således at Google ikke kan læse og indeksere det indhold, der er below-fold. Benytter du eksempelvis dynamisk JavaScript hertil, så er Angular at foretrække fremfor eksempelvis jQuery.


13. Eliminer døde elementer

Undgå, at der foretages forespørgsler til CSS, JavaScript, billeder eller andet indhold, som ikke findes, da det sløver loadtiden markant, fordi webserveren forgæves forsøger at hente det. Du kan analysere, om der optræder døde elementer på dit website, ved at lave et SEO sundhedstjek af dit website med ScreamingFrog-spideren.


14. Brug en hurtig DNS-service

Sørg for at bruge en god, stabil og hurtig DNS-service, hvor IP-opslag foregår lynhurtig.

Ikke blot for DNS’en til dit eget website, men også for de tredjeparts-services, du benytter. Eksempelvis billeder, der ligger på CDN, eller JavaScript-kode som hentes fra tredjeparts-systemer. Du kan teste, hvor hurtig IP-opslagstiderne for et websites DNS via Ultratools.


15. Undgå klassiske loadanimationer

Selv om det ikke ændre på, hvor hurtigt siden loader rent teknisk, bør du designe, hvordan din side skal se ud, mens den loader. Ved at bruge en placeholder-grafik mens indhold læses ind, så får brugeren oplevelsen af, at der sker noget på siden.

Det er en teknik, som eksempelvis Facebook bruger, mens nye opslag læses ind:








Dette er en langt bedre teknik end at vise en klassisk loadanimation (som eksempelvis denne: Ajax-loader), da disse blot giver et øget fokus på ventetiden, hvilket kan irritere brugeren og få din side til at føles langsommere.

Hvis du vil undersøge nærmere, hvordan Facebooks løsning kan implementeres, så tjek dette blogindlæg fra CloudCanon. Se også gerne denne video fra Intel, hvis du vil have flere teknikker til, hvordan du kan få dit website til at opleves som værende hurtigt.


Grosen Friis
Skrevet af
Grosen Friis
Brugbar artikel? Del gerne med dit netværk

8 svar til “Langsom hjemmeside? Her er 15 tips til hastighedsoptimering af dit website [GUIDE]

  1. Gode indgangsvinkler. Et par af dem, kræver rimelig stor kontrol af det system websitet er opbygget i, og i min oplevelse kan det blive forholdsvis dyrt at implementere tip 12. Især fordi CMS som WordPress jo har en standard for hvilken rækkefølge ting loades i. Er det også WordPress sites som I ofte oplever hastighedsproblemer med?

  2. Hej Karsten

    Tak for din kommentar 🙂

    Jeg er helt enig I, at man kun yderst sjældent har mulighed for praktisk at implementere alle de nævnte muligheder der er for at forbedre hastigheden på et website. Det som vi gerne vil opnå med dette blogindlæg er at give så mange konkrete forslag som muligt, således at folk der ønsker at arbejde med hastighedsoptimering kan finde netop de områder, hvor de konkret har muligheder for at tilpasse deres website og dermed forbedre loadtiden.

    Vi oplever at WordPress kan komme til at køre med meget hurtige svartider, også selvom man ikke har mulighed for at gøre noget ved punkt 12 🙂

    /Grosen Friis

  3. Rigtig god og gennemført guide til hastighedsoptimering af websites. Det gør en hel enorm forskel for brugervenligheden at hastigheden er i orden og noget de fleste bør tage seriøst. Og har man ikke selv den tekniske viden der kan være nødvendig, bør man investere i at hyre en ekspert til at hjælpe sig.

  4. Super fed gennemgang af de vigtigste aspekter inden for hastighedsoptimering. – Og nogle fede sites I linker til! Jeg kendte faktisk ikke til imageoptimizer.net. Så tak for den 🙂

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *

Mød vores team

Meet out team