10 tips til at gøre din hjemmeside hurtigere og få flere kunder i 2024

Ingen kan lide at vente.

Undersøgelser viser, at én ud ad fire besøgende opgiver at besøge en hjemmeside, hvis den er over 3 sekunder om at indlæse.

Google ved dette, og derfor kan Google heller ikke lide langsomme hjemmesider. Hvis du vil lave din egen hjemmeside i WordPress så læs her, hvordan du får den op i gear.

Google er primært optagede af, at gøre sine brugere glade og vise dem det bedste og mest relevante indhold i forhold til, hvad de søger efter.

Jo mere Google kan vise sine brugere relevante og brugbare søgeresultater, jo mere bruger de Google og jo flere Google-annoncer klikker de på = flere penge til Google.

En hurtig hjemmeside eller blog er altså godt både i forhold til brugeroplevelse og SEO (søgemaskineoptimering).

Indhold

Core Web Vitals

Hastighed er dog ikke nok.

Google lægger mere og mere vægt på brugeroplevelsen, det de kalder Web Vitals – og det bliver en større og større faktor i fremtiden.

Web Vitals går ud på, at brugeren skal føle og opleve at hjemmesiden er hurtig og nem at bruge.

Hvis du fx har en lang forside, så gør det ikke så meget hvor lang tid det tager før “bunden” er læst ind. Det vi kalder “fully loaded time”.

Det vigtige er det øverste indhold, det første brugeren ser, også kaldet above the fold, eller over folden.

Web Vitals fokuserer på, at det første en bruger ser skal loades først, og at elementer ikke skal “hoppe” rundt så de bliver svære at interagere med.

Vi kender alle det med at komme til at trykke på en reklame fordi elementer flytter sig på en hjemmeside. Det giver en dårlig brugeroplevelse, og det kan Google detektere.

Hvor hurtig er “hurtig nok”?

Det er op til dig (og dine brugere) at vurdere, om din hjemmeside er hurtig nok.

Hastighedsoptimering er en afvejning af ressourcer og funktionalitet. Det er nemt nok at få en lynende hurtig side, hvis du kun har to små billeder og lidt tekst.

Det bliver lidt sværere når du tilføjer en shop, 20 videoer, pop-ups, formularer og en masse andet.

Ikke umuligt, men lidt sværere. Og igen, fokuser på indhold over folden.

Er hastighed vigtigt for SEO?

Ja, Google har tidligere sagt, at hastighed er en ranking factor, altså ét parameter ud af mange, der bestemmer, hvor højt en hjemmeside ligger på Google.

Er det så det vigtigste parameter?

Nej, det er det ikke.

Google går primært op i ekspertise, autoritet og troværdighed, også kaldet E-A-T.

Med andre ord: Lav noget indhold der er originalt, troværdigt og har høj autoritet. Vis det så hurtigt som muligt for brugerne, og optimer for mennesker – ikke en hastighedsscore.

Et eksempel er Politiken, som ikke har den højeste hastighedsscore, men er et af de mest besøgte hjemmesider i Danmark.

Du er dog formentlig ikke webmaster på Politiken, så hastighedsoptimering er noget du bør tænke på.

Og glem ikke, at hastigheden er vigtig for din bounce-rate (brugere der forsvinder uden at inteagere) og antal konverteringer (køb eller henvendelser fx).

Hvordan måles en hjemmesides hastighed?

Begyndere i hastighedsoptimering begår ofte den fejl, at de ser på deres egen computer eller telefon, og konstaterer, at det går rigtig hurtigt. Det er en fejl.

Moderne browsere gemmer websites i en lokal cache, et lokalt lager, så i virkeligheden henter de ikke siden fra internettet, men fra deres egen pc. Det går selvsagt ret hurtigt, men det hjælper ikke nye besøgende til hjemmesiden.

Det hjælper hvis de kommer tilbage en anden gang, men ikke ved første besøg.

Der er flere online services der kan hjælpe med at måle hastigheden på din hjemmeside.

De mest populære er:

– Google PageSpeed Insights

– GTMetrix

– Pingdom Tools

– Webpagetest

Der er fordele og ulemper ved dem alle, men den jeg bruger mest er PageSpeed Insights.

Istedet for at fokusere på, hvor lang tid en side er om at loade helt, fokuserer den på Web Vitals, altså om en hjemmeside føles hurtig og er nem at inteagere med.

Det gøres primært ved hjælp af tre faktorer:

Largest Contentful Paint (LCP): måler visning af den største del af det første brugeren ser. Fx det største billede eller stykke tekst. LCP bør være under 2.5 sekunder i følge Google.
First Input Delay (FID): måler interaktivitet, altså hvor hurtigt kan brugeren scrolle, trykke mv. FID bør være under 100 millisekunder i følge Google.
Cumulative Layout Shift (CLS): måler visuel stabilitet. Hvis siden “hopper” eller elementer flytter sig efter load, kan brugeren komme til at trykke forkert = dårlig oplevelse. CLS udregnes på baggrund af en score, og skal helst ligge under 0.1 (dvs. tættere på 0 end 0.1)

Alle fire værktøjer kan dog have sin berettigelse, og kan komme med værdifulde forslag til forbedringer.

Brug et hurtigt webhotel

Én af de vigtigste ting at få styr på, er din webhosting/webhotel. Dit valg af webhost bestemmer, hvor hurtigt din hjemmesides kode kan processeres, og hvor mange besøgende der kan være på samme tid.

Når du en gang imellem køber en ny computer eller telefon, kører programmerne lidt hurtigere. Det er det samme med webhosting.

Mange danske hjemmesider bruger Simply.com eller one.com, som godt nok er billige, men som ikke er velegnet til større og tungere hjemmesider.

Hvis vi sammenligner en hjemmeside med en bil, så er der to måder at gøre den hurtigere på:

Købe en større motor
Gøre bilen lettere

Motoren i dette tilfælde er dit webhotel, vægten er koden på din hjemmeside, i dette tilfælde i WordPress.

Hvis du i dag har din hjemmeside på et billigt webhotel, så er én af de nemmeste måder at få en hurtigere side at skifte til et bedre.

Der findes forskellige kategorier af webhosting fx:

Shared hosting – du deler en server med en masse andre. Billigt, men langsomt. Fx Simply, One og Siteground.
Dedicated server – din “egen” server. Hurtigt, men rasende dyrt.
Cloud hosting – du lejer plads på en cloud service, fx Google Cloud, Digital Ocean eller Amazon. Kun lidt dyrere end shared hosting, men med langt bedre performance. Fx Digital Ocean eller Kinsta.

Uanset hvilken type webhosting du vælger, så sørg for, at din server er fysisk tæt på dine brugere. Hvis du primært henvender dig til danske brugere, så vælg en server i Danmark eller Frankfurt/Amsterdam.

Se vores anbefalinger til webhotel her eller læs vores anmeldelse af Kinsta

PHP version

Vælg den nyeste PHP-version (hvis du kan vælge på din webhost).

Fx er PHP 7.0 op til 3 gange hurtigere end PHP 5.6.

PHP version 8 er udgivet i efteråret 2020, og det skal du som minimum bruge. Hvis dit tema og plugins understøtter det, så brug version 8.1 eller 8.2.

Brug ekstern DNS

DNS står for Domain Name Server og er populært sagt internettes telefonbog.

DNS oversætter www.ditdomæne.dk til en IP-adresse til den server hvor din hjemmesides filer ligger.

Det fungerer via en såkaldt navneserver, eller Name Server, der holder indeholder informationer om alle aktive domæner.

Hvis du har et dk-domæne kan du inde på punktum.dk (tidl. dk-hostmaster.dk) se, hvilken navneserver du bruger og du kan skifte til en anden.

Det kan give en lille hastighedsforbedring, men nok så vigtigt så gør det det MEGET nemmere og hurtigere at flytte webhost. Nu eller i fremtiden.

Hurtigste DNS service er Cloudflare, som oven i købet er gratis (for DNS).

Optimering i WordPress

Vælg et hurtigt Wordpress tema

WordPress temaer, eller themes, kan spille en stor rolle i din kodes “vægt”.

Nogle temaer er kodet dårligt, andre har utallige funktioner (som du måske ikke bruger), som gør det tungt, langsomt.

Vælg et tema der fokuserer på design og hastighed og brug plugins til de features der evt. “mangler”.

Et par gode temaer:

GeneratePress
Kadence
Blocksy

Undgå, hvis du på nogen måde kan: Avada, Divi, Flatsome og de fleste temaer på ThemeForest.

Hvis du allerede har et tema og ikke uden videre kan skifte så:

Slå funktioner fra du ikke bruger (hvis muligt)
Slå loading animationer fra, forbedrer opfattet loading-tid.
Hvis dit tema har nogle indbyggere optimeringsfunktioner, test dem og se, om de virker

Vælg en hurtig page builder

Mange bruger en page builder, eller side-bygger ovenpå deres tema. De gør det nemt at bygge lige præcis det layout man har lyst til, ved hjælp af drag’n’drop.

Desværre loader en del af disse page builders en masse css-filer og javascript, op til 1200 KB.

Det er over en Megabyte, og det er vel og mærke INDEN du er gået igang med at lave noget som helst indhold.

Størrelse i KB (kilobyte). Kilde: Supadezign

Man kan i dag komme langt ved at bruge den indbyggede builder i WordPress, kaldet Gutenberg. Den kan også udvides med såkaldte Gutenberg Blocks, hvilket gør den ret nem at arbejde med.

Hvis du vil bruge en page builder så brug Beaver Builder eller Oxygen Builder.

Af de to er Beaver Builder den nemmeste at gå til, mens Oxygen Builder har en noget stejlere læringskurve. Til gengæld er Oxygen den mest potente af dem alle.

WordPress plugins

Man kan læse mange steder, at plugins gør WordPress langsommere. Det passer ikke.

NOGLE plugins gør Wordpress langsommere, andre gør ikke, eller kan forbedre hastigheden.

Brug kun de plugins du skal bruge, hold dem opdaterede og test din hastighed hver gang du har installeret et nyt.
Fjern unødvendige plugins

Nogle af de værste syndere er WPBakery, DIVI, AVADA, Elementor, Slider Revolution, UberMenu, Thrive, Jetpack, div. billedgallerier og formular-plugins fx Contact Form 7.

Nogle af vores favoritter, som vi bruger igen og igen er:

Fluent Forms – Formularer
MailOptin – Pop-ups, slide-ins mv.
Safe Redirection Manager – Redirection
FluentCRM – E-mail marketing/nyhedsbreve
BackWPup – WordPress Backup
Flying Analytics – Host Google Analytics på din egen server
Flying Pages – Forindlæs links
Shortpixel – Billedoptimering

Optimer HTML/CSS

HTML står for HyperText Markup Language og er hjemmesiders “skelet”. HTML definerer hvilke elementer der skal være, i hvilken rækkefølge osv.

Tekst, overskrifter, billeder mv. defineres i HTML-kode.

Når du bruger Wordpress opdager du måske ikke at du bruger HTML, men det er det der bruges under motorhjelmen.

CSS står for Cascading Style Sheets og er et kodesprog, der bruges til at ændre elementers udseende. Det er fx i CSS det defineres, hvilken font (skrifttype) man vil bruge. Det er også i CSS det defineres hvordan knapper skal se ud osv.

CSS kan skrives direkte i HTML-koden, eller i seperate css-filer.

HTML os CSS kan komprimeres ved at fjerne mellemrum og kommentarer. Det gøres nemmest med et plugin, fx FlyingPress.

Man kan også sammenlægge CSS-filer hvis man har mange små filer, men det skal du kun gøre, hvis din server anvender HTTP/1.1.

Hvis din server anvender HTTP/2 (og det bør den gøre) skal du IKKE sammenlægge css-filer.

Tjek her om din server anvender HTTP/2: http2.pro

Indlejr kritisk CSS

CSS er pr. definition render-blocking, dvs. at alle CSS-filer skal være indlæst og fortolket før siden vises til brugeren.

Det er som regel en god idé, men hvis du har en stor og kompliceret hjemmeside, kan der være meget css der skal hentes og fortolkes inden der vises noget til brugeren.

Er det tilfældet, kan man arbejde med at indlejre kritisk CSS, dvs. CSS der skal bruges over “folden”, direkte i HTML-koden og udskyde al anden CSS til senere.

Det har den fordel, at indhold over folden indlæses lynhurtigt, men kan føre til et fænomen der hedder FOUC – Flash Of Unstyled Content.

FOUC betyder at indholdet kan skifte udseende efter load, hvilket ikke ser pænt ud.

Flere plugins kan optimere CSS og generere kritisk CSS fx: WP Rocket, Litespeed Cache, Flying Press.

Fjern unødig CSS

En del temaer og page builders producerer store mængder CSS (se ovenfor). Det gør de fordi de er dårligt kodede, og de loader CSS til alle tænkelige formål – om det bliver brugt eller ej.

Det er ikke nemt at fjerne unødig CSS, da det er svært at være HELT sikker på, at et givent stykke CSS-kode ikke skal bruges på et eller andet tidspunkt.

Det er også en af de mere almindelig forslag i PageSpeed Insights: “Remove unused CSS”

Her kan du tjekke hvor meget unødig CSS du har: unused-css.com

Plugin der kan fjerne unødig CSS (i de fleste tilfælde): Flying Press

Optimer JavaScript

JavaScript er et dynamisk programmeringssprog, der bruges til at tilføje ekstra funktioner til en hjemmeside. JavaScript kan ændre både HTML/CSS dynamisk og kan udregne og manipulere data.

JavaScript bruges til alt fra tracking (Google Analytics, Facebook Pixel) til kontaktformularer og indkøbskurve. Og meget andet.

JavaScript kan loades på 4 måder:

Normalt – JS downloades og fortolkes, mens indlæsning af HTML sættes på pause = render-blocking
Asynkront (async) – JS downloades parallelt med HTML, men HTML pauses mens JS fortolkes
Udskudt (deferred) – JS downloades parallelt med HTML og fortolkes først når HTML er eksekveret.
Udskudt til efter bruger interaktion – JS downloades og fortolkes først efter brugeren har interageret med hjemmesiden.

Igen må vi skelne mellem under “folden” og over “folden”, altså det første brugeren ser.

Ikke al JS kan udskydes eller loades asynkront
JS over folden skal loades normalt
Test at alt virker som det skal (!)

Plugins til optimering af JavaScript fx: WP Rocket, Flying Press, Flying Scripts

Optimer billeder i Wordpress

Billeder er essentielle for alle hjemmesider. Det er nærmest utænkeligt at forestille sig en hjemmeside uden billeder.

Én af de fejl jeg ofte ser, er alt for store og ukomprimerede billeder.

Brug korrekt billedstørrelse

Billeder skal tilpasses i størrelsen, så der ikke hentes flere pixels end der er brug for.

Hvis du har et billede på 2560 x 1920 pixels, giver det ikke mening af overføre alle 5 mio pixels, hvis den skærm brugeren sidder ved, kun kan vise fx 2 mio pixels.

Omvendt giver det heller ikke mening, at vise et meget lille billede til en bruger der sidder med en stor skærm.

Brug altså kun den største billed-størrelse som din hjemmeside kan vise.

De fleste temaer vil derefter vise en nedskaleret version til brugeren – tjek dette i fx Chrome Developer Tools.

Komprimering af billeder

Billeder skal komprimeres så de visuelt ligner originalen (eller tæt på), men fylder mindre.

Der er mange måder at gøre det på fx:

Komprimer inden upload, fx i Photoshop
Brug en online app før upload, fx Squoosh
Brug et Wordpress plugin, fx Shortpixel
Brug en online service (CDN), fx Bunny Optimizer

Vælg det rette billedformat

JPG/JPEG – bruges til billeder.
PNG – bruges til enkle billeder og grafik. Kan have transparent baggrund. Fylder generelt mere end JPG
WEBP – Godt, men understøttes ikke i alle browsere. Fungerer som en kombination af JPG og PNG.
GIF – bruges til animerede billeder.
SVG – bruges kun til grafik.

Lazy load

Lazy loading gør, at billeder ikke indlæses før der er brug for dem. Hvis du har mange billeder langt nede af siden, kan det være en fordel at lazy loade.

Det er dog et tveægget svært, da det kan forlænge den oplevede load tid. Især hvis du har mange brugere der scroller hurtigt ned ad siden, vil det blive et problem, da billederne da ikke når at vise sig før brugeren er videre = dårlig bruger oplevelse.

Brug aldrig lazy load above the fold.
Brug med omtanke og overvej om det er nødvendigt.
Lazy load giver højere score i diverse hastighedsværktøjer, men er måske ikke det værd.

Optimer video i Wordpress

Video er let at integrere i WordPress, men desværre går det ud over en hjemmesides generelle hastighed, hvis det gøres forkert.

Når man indsætter en Vimeo- eller Youtubevideo i WordPress, gøres det teknisk ved hjælp af en såkaldt iFrame. Populært sagt tager man et stykke af en hjemmeside, og indsætter dette i sin egen.

Desværre følger der en masse kode med denne iFrame:

HTML, CSS, JS (javascript), tilsammen mere end 500KB. En halv megabyte.
Et DNS “opkald” til fx www.youtube.com

Endnu værre så er JS-koden render-blocking, så selvom videoen ligger i bunden af siden, kan toppen ikke vises før iFramen er indlæst. Super dårligt for Web Vitals.

Der er forskellige måder at løse det på:

Lazy load og vis screen shot indtil brugeren klikker på videoen.
Ligesom billeder kan man også lazy loade video. Man bruger et billede der ligner videoafspilleren, men selve videoen og tilhørende filer loades først når brugeren klikker på billedet.
Hvis du bruger FlyingPress kan du gøre det med ét klik.
Drop Vimeo/Youtube og host din video selv, evt. på en CDN som BunnyCDN der er optimeret til netop det.
Især hvis du har video i din hero sektion, altså det første brugeren ser, er dette den bedste løsning.
Komprimer denne video så meget som muligt uden det går (for meget) ud over kvaliteten.
Et lille trick er at uploade videoen til YouTube og downloade den igen.

Optimer skrifttyper/font i Wordpress

Skrifttyper spiller en ret stor rolle i en sides “vægt”.

Der er skrifttyper der er indbygget i ethvert styresystem, det være sig Windows, MacOS, Android osv.

De kaldes system fonts under ét, og har den kæmpe fordel at de allerede er på brugeres maskine og derfor ikke skal hentes over internettet.

Ulempen er så, at det ikke er de samme skrifttyper der er på de forskellige styresystemer, så en given hjemmeside vil, hvis den bruger system fonts, se forskellig ud på fx Mac og Windows. Se eksempler på system fonts på Modern Font Stacks

Du kan altså ikke styre 100 % hvilken font der vises.

Hvis du vil have mere kontrol så er der forskellige muligheder online, fx Adobe Fonts og Google Fonts.

Adobe Fonts (som kræver abonnement) og Google Fonts (gratis) har vanvittigt mange skrifttyper, så du kan være helt sikker på, at finde én du kan lide.

Ulempen ved dem er, at de skal hentes via internettet (hver gang din side indlæses) og dermed gør din hjemmeside langsommere.

Der er dog nogle ting man kan gøre relativt nemt:

Begræns antallet af forskellige skrifttyper. To er generelt nok.
Begræns antallet af font tykkelser, på engelsk font weights.
Kombiner Google fonte til en fil. WP Rocket kan gøre dette med ét klik.
Overvej at hoste Google Fonts selv ved hjælp af et plugin.

Brug et cache plugin

En cache kan nemmest betegnes som et midlertidigt lager der gemmer data fra fx hjemmesider så de kan indlæses hurtigere i fremtiden.

Der er forskellige “lag” af caching som både kan finde sted på serveren (server side) og hos brugeren (client side).

I Wordpress bruger vi typisk et plugin til caching og der findes mange (!) – og de lover alle guld og grønne skove.

Jeg har prøvet mange forskellige og dem jeg bedst kan lide er:

Flying Press – $49 pr. år.
WP Rocket – $49 pr. år.
Litespeed cache (hvis du er på en Litespeed server) – gratis.

Hvis du vil have noget gratis så WP Fastest Cache eller Swift Performance Lite, men de småpenge et cache-plugin koster er godt givet ud i sparet tid og frustrationer. Se vores anbefalinger til de 5 bedste WordPress cache plugins.

Browser caching

Browser Caching gør, at den besøgende kan gemme filer – HTML, CSS, JavaScript og billeder i sin browsers lager og derved kan indlæse siden hurtigere ved et evt. næste besøg.

I Google PageInsights kaldes betegnes det: “Leverage browser caching” og er én af de mest almindelige forbedringsforslag.

Bemærk at du ikke kan cache eksterne filer, fx Facebook Pixel og Google Analytics (med mindre du hoster dem selv).

Browser caching kan implementeres på flere måder, afhængig af hvilken software din server benytter.

Mest almindelig er Apache server der benytter en .htaccess-fil til dette (virker også på Litespeed Server):

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType image/svg “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType application/javascript “access 1 month”
ExpiresByType application/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 2 days”
</IfModule>
## EXPIRES HEADER CACHING ##

Man kan selvfølglig også benytte et plugin, fx WP Rocket

Aktiver Brotli-komprimering

Broli er afsløseren for GZIP og brude være implementeret på alle webhosts, men er det selvfølgelig ikke.

Check her om din host understøtter Brotli: https://tools.keycdn.com/brotli-test

Hvis ikke så undersøg om din webhost kan aktivere det, og hvis ikke så brug GZIP-komprimering.

CDN

Et Content Delivery Network (CDN) kan distribuere dine statiske filer til et netværk af servere rundt omkring i verden.

Det er rigtig smart hvis du har besøgende fra flere dele af verden ELLER hvis du fx skal selv-hoste video-filer ELLER du vil optimere dine billeder uden at røre en finger.

Generelt er det ikke en fordel at bruge CDN, hvis dine brugere er i Danmark og din server er placeret i Danmark eller Europa.

Der findes mange CDN’er – mest kendt er Cloudflare, der også har en basic gratis version, og i mange tilfælde kan integreres med ét klik i din webhost.

Det er næsten aldrig en god idé.

Cloudflare har servere i over 200 byer men i den gratis version har du ingen kontrol over, hvilken server der svarer dine brugere – og det er ikke altid den nærmeste.

Hvad værre er, så skal hver lokation “varmes op”, altså hente dit indhold individuelt, så alt i alt er det en dårlig deal – selvom det er gratis.

Hvis du har brug for en CDN (og igen, det har du nok ikke), vil jeg anbefale BunnyCDN der har servere i 49 byer, altid bruger den nærmeste OG kan automatisk kopiere filer til hele netværket istedet for én server ad gangen.

BunnyCDN er ikke gratis, men koster ned til $0,01/GB

Konklusion

Som det fremgår er hastighedsoptimering ikke noget man bare lige gør. Det kræver tid og tålmodighed.

Til gengæld er der mange fordele at høste ved en hastighedsoptimeret hjemmeside:

Lavere bounce-rate
Højere konverteringsrate
Højere ranking i søgeresultater

Så selvom det måske koster tid (og evt. penge) er det i de fleste tilfælde hurtigt tjent ind igen. Se det som en investering i din forretning. Højere hastighed = Tjen flere penge på din online forretning.