Sådan gør du din hjemmeside hurtigere

En begyndervejledning til optimering af webstedsindlæsningshastighed

Artem Minaev
Opdateret: 4. oktober 2023
12 min læses
FirstSiteGuide er understøttet af vores læsere. Når du køber via links på vores side, kan vi optjene en kommission. Læs mere
Sådan gør du din hjemmeside hurtigere

Hvis du er nybegynder og ny hjemmesideejer, kommer du i de fleste tilfælde ikke til at bekymre dig om hjemmesidens hastighed. 

Når du bygg dit websted or start din blog, kan det føles som om alt er på plads. Dit websted er smukt, så det må betyde, at folk ikke vil have noget problem med at vente et par sekunder mere for at lade det indlæse korrekt, vel?

Nej, det er ikke tilfældet.

Ifølge Google research, jo længere tid det tager for en side at indlæse, jo flere mennesker vil forlade et websted.

sideindlæsningstider

Google har også introduceret Web Core Vitals (der tæller som en rangeringsfaktor for websteder), der går endnu mere i detaljer, når det kommer til hastigheden af ​​indlæsning af websteder. Jo hurtigere dit websted er, jo bedre er dine chancer for at komme til den første side med Googles søgeresultater.

Hej, mit navn er Artem.

Jeg vil dele vores erfaring, viden om vores udviklingsteam og teknikker, vi brugte til at forbedre indlæsningshastigheden på vores egen hjemmeside (FirstSiteGuide.com). 

Ved at følge denne vejledning vil du forstå de elementer, der påvirker hastigheden på dit websted. Med hvert element, Jeg vil vise dig et værktøj, der hjælper dig med at fremskynde hjemmesiden eller løse et bestemt problem. Også, hvor det er muligt, vil jeg nævne tjenester, som du trygt kan bruge, uden at skulle bruge timer på research.

PS Nogle trin i denne vejledning er specifikke for hjemmesider bygget med WordPress software, da det er det, vi bruger til vores websted. Hvis du bruger en anden værktøjer til webstedsbygger du kan anvende lignende hastighedsoptimeringsteknikker baseret på de tilgængelige funktioner.

14 trin til at forbedre webstedets hastighed

Trin 1: Kør en hastighedstest

Før du gør noget, er det vigtigt, at du laver en ordentlig test. Selvom du kan gøre meget selv uden en, anbefaler jeg kraftigt at køre mindst én hastighedstest, så du har et benchmark, der hjælper dig med at forstå, hvor godt dit websted præsterer, og hvor godt resultatet er, når du er færdig med hele forbedringen trin.

Gratis værktøjer

Heldigvis er der gratis hastighedstest tilgængelige for alle. Du skal bare vælge en, indtaste din URL og lade værktøjet udføre sin magi.

Googles PageSpeed ​​Insights

Da de fleste mennesker optimerer deres websted til Google, er det første værktøj, jeg vil nævne, Googles PageSpeed ​​Insights. Det er ret ligetil, og du kan få resultatet på få sekunder.

  1. Åbne Googles PageSpeed ​​Insights.
  2. Indtast webadressen på dit websted.
  3. Klik på knappen "Analyser".

I mit tilfælde tog det så lidt som 10-15 sekunder for testen at fuldføre og vise mig resultaterne delt i skærmbilledet nedenfor.

pagespeed insights test

Efter at have set det grønne nummer øverst, hvor du sigter efter at få en score på 100, vil der være flere andre segmenter, du vil granske. De er:

  • First Contentful Paint (FCP)
  • Største indholdsfulde maling (LCP)
  • Kumulativ layoutskift (CLS)

Alle tre elementer er en del af Web Vitals, som nu er inkluderet i Googles vigtigste metrics, der viser, hvor hurtigt eller langsomt dit websted er. Du kan lære mere om Web Vitals i vores guide om hvordan du optimerer din mobilside.

GTmetrix

En af de mest populære hjemmesidehastighedstest er GTmetrix. Det er helt gratis og kan gøres på mindre end et minut:

  1. Gå til GTmetrix.
  2. Indtast den fulde URL på dit websted.
  3. Tryk på knappen "Kør test", og vent i cirka 30 sekunder.

Herefter får du en karakter, der viser dig, hvor hurtig din hjemmeside er. Testen vil også vise dig detaljer som dit websteds ydeevne, dets struktur samt vitale web-data, der nu er en kerneplaceringsfaktor for Google. 

gtmetrix test

Hvis du ikke allerede har arbejdet aktivt på at optimere dit websted for hastighed, så er chancerne for, at du ikke får en perfekt score. Men bare rolig, du kan arbejde hen imod det, hvis du begynder at følge alle trinene.

Trin 2: Få hurtig og pålidelig webhosting

En hurtig hjemmeside starter med god hosting. Uanset hvor hårdt du prøver at levere den bedste brugeroplevelse, vil hastigheden på din hjemmeside lide, hvis din hosting er dårlig.

bedste hostingfirmaer tage sig af alt, og det er ikke nødvendigt, at du forstår, hvad der foregår bag lukkede døre. Fra kvalitet og velholdt hardware til regelmæssigt opdaterede softwarekomponenter er der meget, som en hostingtjeneste kan gøre for at forbedre hastigheden på dit websted.

For at starte på den rigtige måde, få dit websted hostet med Bluehost, et af de sjældne hostingfirmaer, der officielt anbefales af WordPress.org. Års erfaring og millioner af hostede hjemmesider gør dette hostingfirma til et af de bedste inden for deres felt – noget, der let vil omsættes til at have en robust hjemmeside.

Trin 3: Implementer en Content Delivery Network-tjeneste (CDN).

Vores verden er et stort sted. Selvom internethastighederne er blevet drastisk forbedret gennem årene, spiller den fysiske afstand mellem computere og servere stadig en væsentlig rolle for onlinehastigheden. Det betyder, at indlæsning af information fra en server fra dit land generelt vil være hurtigere end indlæsning af data fra hele kloden, ligesom det er nemmere for dig at købe et sofabord fra IKEA i din hjemby i stedet for at skulle køre for at få et i et andet land .

Det er her Content Delivery Networks kommer ind i billedet. De giver dig mulighed for at have dit websted hostet på flere servere over hele kloden. CDN kan genkende den nærmeste placering til hver enkelt, der indlæser dit websted, og indlæse indholdet fra den nærmeste server. Så hvis en besøgende forsøger at indlæse dit websted fra USA, vil de få indholdet fra en af ​​USA's servere, mens nogen, der kommer fra Europa, vil indlæse dit websted via en server, der er placeret i nærheden af ​​dem, for eksempel i London.

Hvis du hoster siden på Bluehost, kan du finde deres TrueSpeed ​​CDN inde i kontrolpanelet. Bare ved at konfigurere det, bliver dit websted globalt og indlæses hurtigere for folk fra hele verden.

Du kan også få 3. parts CDN-tjenester. Det mest populære CDN'er er:

Trin 4: Formindsk CSS- og JavaScript-filer

Moderne hjemmesider er fyldt med CSS- og JavaScript-filer, der arbejder sammen for at holde websider pæne og fungere i brugernes favør. Linje efter linje kode gør disse filer unødvendigt store, hvilket hurtigt kan gøre dit websted langsommere.

Webdesignere (de samme mennesker, der bygger skabelonerne, som du ender med at købe) kan godt lide at holde deres kode pæn. Det betyder, at de holder koden flot og let forståelig. Men at have disse hvide mellemrum, ekstra linjer og tegn øger kun filvægten, som nemt kan reduceres ved at formindske.

Her er et eksempel på simpel CSS-kode:

krop {

padding: 10px;

farve:#f35123;

baggrund:#f22f12;

}

Det kan minimeres til dette:

krop{polstring:10px;farve:#f35123;baggrund:#f22f12}

Selvom denne simple forskel ikke vil have en væsentlig indflydelse på dit websted, så forestil dig, hvad der sker, når du har tusinder og atter tusinder af unødvendige hvide mellemrum og linjer.

Heldigvis behøver du ikke selv at gå igennem koden og foretage ændringerne for at minimere dine CSS- og JavaScript-filer. Der er plugins, der vil gøre dette automatisk for dig og sikre, at alt fungerer korrekt:

  1. Gå til "Plugins > Tilføj nyt".
  2. Søge efter "Autoptimize".
  3. Installer og aktiver "Autoptimize".
  4. Gå til "Indstillinger -> Autooptimer".
  5. Tjek "Optimer JavaScript-kode?" og "Aggregerede JS-filer?". 
  6. Tjek "Optimer CSS-kode?" og "Aggregerede CSS-filer?". 

Trin 5: Aktiver browsercaching

Ved at aktivere browsercaching tillader du, at indholdet gemmes i folks browsere. Det betyder, at hvis en besøgende beslutter sig for at vende tilbage til dit websted, vil de ikke skulle downloade alle filerne fra serveren igen, da de allerede har dem gemt i deres browser.

Browsercache kan forbedre hastigheden på dit websted væsentligt for tilbagevendende brugere.

For at aktivere dette på dit websted, skal du blot bruge et gratis WordPress-plugin såsom:

Hvis du f.eks. bruger W3 Total Cache, skal du blot gøre det installer pluginet:

  1. Gå til Plugins -> Tilføj ny.
  2. Søg efter "W3 Total Cache".
  3. Installer og aktivér pluginnet.
  4. Gå gennem opsætningen ved at lade plugin teste dit websted og din serverindstillinger.
w3 total cache opsætning

Pluginnet sætter automatisk dine cacheindstillinger op, og de vil straks begynde at virke til din fordel. Hvis du beslutter dig for at gå ind i flere detaljer, kan du åbne fanen Ydelse, der nu er synlig i venstre side af WordPress-menuen, hvor alle plugin-indstillingerne er synlige. Her kan du ændre andre muligheder, hvis det er nødvendigt.

Trin 6: Optimer og rens WordPress-databasen

Dit WordPress-websted kan ikke fungere uden en database. Alt, hvad du gør og har på siden, er gemt der. Som du kan forestille dig, holder temaer og plugins det ikke altid rent, så selvom du afinstallerer et specifikt plugin, vil det efterlade nogle data i din database. Med tiden vil databasen blive rodet og ineffektiv, hvilket vil resultere i en langsom hjemmeside.

Selvom det er muligt at rydde op i databasen manuelt, ville det betyde, at du er nødt til at forstå, hvordan det fungerer. Og selvom du gør det, er chancerne for, at du stadig kan ødelægge det.

Heldigvis er der gratis WordPress-plugins tilgængelige, som vil optimere og rense databasen for dig. Men før du gør noget, skal du sørge for det oprette en fuld backup af dit websted eller har en måde at fortryde ændringer. Selv om WP-Optimize er et velkendt og sikkert plugin, direkte redigering af en database kan nogle gange gå galt. 

Så hvis noget går galt, foreslår jeg WP-nulstilling. Dette plugin vil skabe et øjebliksbillede af dit websted og giver dig mulighed for hurtigt at rulle alle ændringer tilbage. Så hvis noget går galt, kan du gendanne din database på et par minutter i modsætning til at gendanne en fuld backup, der kan tage længere tid.

  1. Gå til Plugins -> Tilføj ny.
  2. Find WP-Optimize, installer og aktiver den.
  3. Vælg de muligheder, du ønsker, og klik på knappen for at starte optimeringen.
wp optimize opsætning

Trin 7: Brug optimerede/premium og simple temaer

Skabeloner og temaer er ikke kun visuelle. For at skabe dem skal webdesignere indkode funktioner, muligheder og indsætte billeder, der alle kombineres til et enkelt arbejdstema.

Som du kan forestille dig, vil en skabelon, der f.eks. indlæser fem filer og tre billeder, indlæses meget hurtigere end den, der kommer pakket med ti filer og tyve billeder. Det store antal er ikke den eneste vigtige faktor, men hvor godt alt er optimeret kommer også i betragtning.

Da der er så mange WordPress-temaer og skabeloner tilgængelige, er det svært at bestemme de bedste. Her er nogle af de populære WordPress-temaer der er designet til at se godt ud og indlæses hurtigt:

Trin 8: Optimer alle billeder på din hjemmeside

Billeder kan nemt blive et af de vigtigste hastighedsproblemer på dit websted. Ikke-optimerede billeder forbliver unødvendigt store og svære at downloade. Hvis du bruger for mange af dem, vil brugerne have svært ved at indlæse hele siden på din hjemmeside og sandsynligvis ende med at forlade, før de ser indholdet.

Heldigvis er det ikke så svært at holde billeder optimeret. Det er vigtigt, at du undersøger dit tema/skabelon for at finde ud af, hvilke billedstørrelser du har brug for. Du kan derefter tage dig af billedet, før du uploader det, ved at ændre størrelsen på dets størrelse og ændre dets kvalitetsindstillinger.

Hvis du kun skal optimere et par billeder, kan du bruge en 3. parts tjeneste som f.eks TinyPNG. Dette billedoptimeringsværktøj giver dig mulighed for at uploade dine kildebilleder og vil derefter automatisk blive optimeret. Bare træk og slip billederne, og lad Pandaen virke magisk. Du vil derefter komme til at downloade de optimerede versioner af dine billeder, som du trygt kan lægge på din hjemmeside.

Hvis du allerede har en aktiv hjemmeside og ikke har tid til at optimere billeder et ad gangen, er der et freemium-plugin, der løser alle dine problemer. ShortPixel Image Optimizer vil tage sig af alle dine billeder, der er tilgængelige i dit mediebibliotek. Det fungerer også godt med NextGEN, Foo Gallery, samt andre galleri- og skyder-plugins.

Den gratis version lader dig håndtere op til hundrede billeder. Nogle af funktionerne omfatter:

  • Optimering af størrelse og kvalitet af billeder.
  • Konvertering af formater til et andet.
  • Virker med WebP og AVIF.

Alt du skal gøre er at installere pluginnet og tilpasse indstillingerne til den måde, du ønsker. Vælg den komprimering, du har brug for, indstil størrelsen på billederne, og tryk på knappen, når du er klar til, at plugin'et starter optimeringsprocessen.

shortpixel opsætning

Trin 9: Lazy load billeder og videoer

Normalt, når en bruger åbner et websted, starter hele indholdet, der skal vises, automatisk indlæsning. Så selvom en bruger kun har brug for indholdet over skillelinjen, vil de stadig have alt tilgængeligt på siden indlæst.

I stedet kan du ved doven indlæsning af billeder og videoer få brugerne til kun at indlæse indhold, der er synligt på skærmen. Når brugeren begynder at rulle, begynder billeder og videoer, der bevæger sig ind i det synlige område af skærmen, at indlæse. På denne måde vil hele siden indlæses hurtigere og give en bedre brugeroplevelse.

Sådan aktiverer du doven indlæsning i WordPress:

  1. Gå til Plugins -> Tilføj ny.
  2. Søg efter Lazy Load af WP Rocket.
  3. Installer og aktiver pluginet.
  4. Tjek indhold, som du vil lade indlæse, og gem indstillinger.
doven belastning opsætning

Trin 10: Undgå hotlinking af billeder

Hotlinking er en handling, der involverer kopiering af kilden til et billede fra et websted for at bruge det på et andet. Selvom billedet vises uden problemer, indlæses det faktisk ikke fra din server. I stedet bruger den alle ressourcerne på det originale websted, og det anses faktisk for ulovligt.

Ved at forhindre hotlinking kan du forhindre andre i at stjæle dine billeder. På denne måde sparer du ressourcer på din egen hostingtjeneste, hvilket betyder, at dit websted vil være det eneste, der bruger disse ressourcer, hvilket resulterer i en hurtigere hjemmeside for dine besøgende.

Der er flere måder at forhindre hotlinking på:

  • Brug af et CDN: De fleste populære CDN'er som Cloudflare og KeyCDN har allerede hotlinking-beskyttelse slået til.
  • Brug af sikkerhedsplugins: Alt i en WP-sikkerhed og firewall plugin lader dig have kontrol over hotlinking.
  • Deaktivering af højreklik på dine billeder: brug et plugin som Forhindr indholdstyveri [Deaktiver højreklik].
  • Ændring af .htaccess-fil: mere avancerede brugere kan deaktivere hotlinking direkte ved at ændre koden i .htaccess-filen.

Trin 11: Vær vært for videoer på tredjepartstjenester og aflast store medier

Når du starter et websted, giver det mening at have alle dine videoer og store mediefiler på din egen server. Men hvad du måske mangler er, at lagring og reproduktion af store filer optager serverressourcer. Når det kommer til hastigheden på dit websted, er det meget mere praktisk at afloade videoer og store mediefiler på 3. parts tjenester for at spare båndbredde.

En video indlæst fra YouTube vil fungere lige så godt (hvis ikke bedre) end indlæst fra din server. Og hvis du har højere trafik, betyder det den mindre indvirkning på din båndbredde, hvilket resulterer i et hurtigere websted.

Når det kommer til videoer, kan du hoste dem på:

Trin 12: Hold plugins på et minimum/find de plugins, der bremser dig

Hvert plugin forbedrer din hjemmeside. Men hver ny funktion betyder også nye filer, der optager plads og båndbredde. Det er heller ikke alle plugins, der er kodet ens, så chancerne er, at du har et plugin, der sænker dit websted ved at indlæse unødvendige elementer, som du måske ikke engang er opmærksom på.

Før du begynder at deaktivere alle plugins, foreslår jeg, at du laver en hastighedstest.

  1. Gå til Plugins -> Tilføj ny.
  2. Søg efter P3 (Plugin ydeevne Profiler).
  3. Installer og aktiver pluginet.
  4. Gå til Værktøjer -> P3 Plugin Profiler.
  5. Start scanningen.

Dette plugin vil køre nogle test på dit websted og vise dig en graf og detaljer. Det, du er interesseret i her, er fanen "Runtime by Plugin", der vil tegne en graf, der viser dig alle dine aktive plugins og deres indflydelse på webstedet.

Tjek efter de største "kagestykker" på din graf, som viser de plugins, der er de langsomste på dit websted. Bemærk, at dette ikke betyder, at du skal slippe af med det specifikke plugin. 

Denne test giver dig mulighed for at analysere alle dine tilføjelser, så du kan afveje fordele og ulemper og beslutte, hvilke langsomme plugins du kan afinstallere eller finde et alternativ til.

p3 plugin profiler test

Trin 13: Kontroller omdirigeringer på dit websted

At have omdirigeringer forbedrer brugeroplevelsen, og kan endda forbedre din SEO hvis det gøres korrekt. At have aktive omdirigeringer vil ikke have en negativ indvirkning på dit websted. Men med hver omdirigering bliver dit websted en lille smule langsommere. Så hvis du ender med at have for mange omdirigeringer (opretter en såkaldt omdirigeringskæde), vil millisekunder lægges sammen, og dit websted bliver langsommere.

Et af de mest populære værktøjer til at håndtere omdirigeringer er Screaming Frog. Du kan også tjekke ud:

Ved at installere softwaren eller køre en online scanning (afhængigt af det værktøj, du har valgt), vil du være i stand til at scanne dit websted. Det vil vise dig en detaljeret analyse af webstedet og hurtigt vise dig omdirigerede URL'er. Da kun at vide, at en URL er omdirigeret, ikke giver meget mening, vil du elske den funktion, der viser dig kilden til en omdirigering. Dette vil hjælpe dig med at forstå dit websted og give dig mulighed for at handle på omdirigeringer ved at fjerne dem, der ikke er nødvendige.

Hvis du finder en omdirigeringskæde, der bremser dit websted, er løsningen enkel – i stedet for at omdirigere fra link A til link B, der går til link C, skal du blot ændre omdirigeringen til det sidste led i kæden.

Til håndtering af omdirigeringer i WordPress kan du bruge en gratis WP 301-omdirigeringer plugin, der hjælper dig med at administrere alle dine omdirigeringer.

Trin 14: Optimer indhold (brug uddrag, del lange artikler og kommentarer osv.)

Nogle gange kan du gøre meget ved at ændre små ting. hvis du skriver en blog, kan du opnå et hurtigere websted ved at kontrollere indholdet. Når du viser de seneste artikler fra bloggen, skal du bruge uddrag i stedet for at indlæse hele artiklen.

Hvis du bruger en klassisk editor, er det relativt nemt at vise et tilpasset uddrag:

  1. Gå til WordPress Dashboard -> Indlæg -> Tilføj nyt.
  2. Klik på knappen 'Skærmindstillinger'.
  3. Aktiver mulighed for uddragsboks. 
  4. Rul ned, find uddragsboksen og skriv en tilpasset oversigt.
tilpasset uddrag

Nu afhænger visning af uddraget på din hjemmeside af dit tema. Det er muligvis allerede slået til, eller du skal muligvis kontrollere indstillingen et sted i dit tema. Jeg foreslår, at du tjekker dokumentationen eller kontakter support, fordi hvert tema er forskelligt.

Hvis du har tendens til at skrive lange artikler, kan du hurtigt dele dem op i to eller flere dele. Hvis du bruger en Block-editor, behøver du ikke eksterne plugins. Du skal blot redigere et langt indlæg, klikke på "plus"-symbolet og finde "Page Break"-blokken, der deler din artikel i to.

Hvis du bruger en klassisk editor, skal du blot tilføje tag, der vil gøre det samme.

Til sidst, for dem, der har mange kommentarer, kan du vælge at sideinddele kommentarer i stedet for at indlæse dem alle på én gang:

  1. Gå til WordPress-indstillinger -> Diskussion.
  2. Find muligheden "Opdel kommentarer i sider".
  3. Indtast antallet af kommentarer, der skal vises på en enkelt side.
  4. Gem indstillinger.
paginere kommentarer

Bliv ved med at teste hastigheden på din hjemmeside

Selvom du gør hvert trin fra denne tutorial og med succes fremskynder dit websted, betyder det ikke, at du er færdig. Ting kan hurtigt ændre sig, og du ved aldrig, hvor godt dit websted vil opføre sig i morgen eller om en måned. Det er derfor, det er afgørende, at du laver regelmæssige hastighedstests og forbedrer dit websted regelmæssigt.

Du kan bogmærke denne tutorial, hvis du glemmer, hvor og hvordan du skal teste dit websted, samt huske, hvilke trin du skal gennemgå for at fremskynde det.

Hvordan en langsom hjemmeside kan skade dig

Selvom du ikke har noget imod at vente på, at websteder indlæses, har de fleste mennesker et problem med det. Og forsømmer du problemet, kan det skade dig i det lange løb. Hvordan?

  • Højere afvisningsprocenter – Selvom din besøgende beslutter sig for at vente på, at en side indlæses, betyder det ikke, at de vil være tålmodige gennem hele deres besøg. Du risikerer højere afvisningsprocenter, der får folk til at forlade dit websted, efter de har besøgt den første side.
  • At miste penge - Hvis du sælge produkter eller tjenester på dit websted, vil en langsom side afvise potentielle købere og fremtidige kunder.
  • Mister trafik – Vil du have mere trafik, der vil drive dit websted fremad? I så fald har du ikke råd til at miste en besøgende, fordi dit websted ikke er korrekt optimeret.
  • Lavere SERP-rangering – Google og andre søgemaskiner tager indlæsningshastigheden i betragtning. En langsommere side kan resultere i at blive skubbet længere ned på søgemaskinens resultatside, selvom dit indhold er godt.

Synes du stadig ikke, at hastighed er vigtig? Jeg håber, at disse fire grunde vil overbevise dig om, hvordan hastigheden på et websted er afgørende, og at du er klar til at gøre din bedre.

Konklusion

Alle elsker smukke og veldesignede sider. Men hvis det betyder, at du skal vente et par ekstra sekunder på, at hjemmesiden indlæses, er chancerne for, at du mister en vis procentdel af besøgende.

Så uanset hvad du gør, skal du ikke ofre hastighed for æstetik. Det er muligt at have begge dele; du skal bare være tålmodig og arbejde på din hjemmeside for at forbedre den.

4 kommentarer vedr "Sådan gør du din hjemmeside hurtigere"

  1. Team Koderey

    Hej, jeg nød virkelig at læse guiden. Som digital marketingmedarbejder kan jeg relatere til alt, hvad du nævnte ovenfor. Mange tak for at dele det samme.

  2. Nikita Shevchenko

    Det tog mig en del tid at optimere min egen blog til hastighed. Jeg er en online marketingmedarbejder, men ikke en kodningsspecialist, så processen var lidt overvældende i begyndelsen.

    Guiderne som denne hjalp mig meget!

  3. Scott Duncan

    Tak for at dele sådanne nyttige tips til at øge webstedshastigheden, for mig fungerede billedkomprimering som en charme, jeg læste om dette utrolige tip på WPblog, og det virkede.

Giv en kommentar

Din e-mail adresse vil ikke blive offentliggjort. Krævede felter er markeret *

Send dette til en ven