Sådan mindsker du indlæsningstiden på din hjemmeside

Lær at gøre en hjemmeside hurtigere med de mest effektive forbedringer af billeder, caching, kode og serverens svartid, sorteret efter effekt.

Kladde

Kør en test af hastigheden på din hjemmeside, og du får et resultat, en liste med anbefalinger og næsten ingen vejledning i, hvor du skal begynde. Når du ved, hvordan du gør en hjemmeside hurtigere, forstår du, hvilke forbedringer der virker på hvilke dele af indlæsningen, og hvilke der giver de største resultater for den indsats, de kræver. Denne artikel handler om de mest effektive ændringer, i hvilken rækkefølge du bør tage fat på dem, og hvad en typisk hjemmeside for en lille virksomhed kan forvente af hver forbedring.

Hastighed på en hjemmeside bliver ikke bedre med én enkelt rettelse. Det er resultatet af flere uafhængige faktorer, der virker sammen: hvor tung siden er, hvor hurtigt serveren svarer, hvor effektivt filerne bliver leveret, og hvor meget arbejde browseren skal gøre for at vise det, den besøgende ser. Når du tager fat på de største bidragydere først, får du de hurtigste gevinster. Du kan læse mere om, hvilke tal for indlæsning der betyder noget, og hvorfor, i artiklen om hvad indlæsningstid er, og hvordan den måles.

Hvad er de mest almindelige årsager til lang indlæsningstid?

Før du laver ændringer, er det godt at forstå, hvor tiden faktisk går tabt. Langsomme hjemmesider har næsten altid et eller flere af disse forhold til fælles.

Billeder, der ikke er optimeret

  • Billeder er de største filer på de fleste sider og den enkelt mest almindelige årsag til lang indlæsningstid
  • En side med fem fotografier, der ikke er komprimeret, kan veje ti til tyve gange mere, end den behøver
  • Når du retter billeder, får du som regel den største forbedring af hastigheden af nogen enkelt ændring

Ingen caching

  • Uden caching kræver hvert besøg, at serveren bygger siden forfra, og at browseren downloader hver fil fra bunden
  • Caching lader besøgende, der kommer igen, indlæse sider fra gemte kopier i stedet for at downloade alt igen

Kodefiler, der ikke er minimeret

  • CSS- og JavaScript-filer indeholder ofte mellemrum, kommentarer og formatering, der gør dem læsbare for udviklere, men lægger unødvendig vægt på for browsere
  • Minimering fjerner det overskydende og gør filerne mindre, nogle gange med 30 til 50 procent

Langsomt svar fra serveren

  • Alt venter på serveren. Hvis serveren bruger mere end 800 millisekunder på at svare, er alle andre tal forsinket fra start
  • Delt hosting og databaser, der ikke er optimeret, er de mest almindelige årsager til høj Time to First Byte

Ressourcer, der blokerer visningen

  • Scripts og stilark, der indlæses i dokumentets head, sætter browseren på pause, før den kan vise noget
  • Hvis du flytter scripts, der ikke er afgørende, så de indlæses efter hovedindholdet, fjerner du den flaskehals

Hvordan optimerer du billeder for at gøre siden lettere?

Optimering af billeder er den rettelse, der har størst effekt for de fleste hjemmesider, fordi den direkte mindsker de største filer på siden. Tre ændringer sammen giver den største nedgang i størrelsen på billedfiler.

Vælg det rigtige format

  • WebP giver mindre filer end JPEG med den samme visuelle kvalitet og understøtter gennemsigtighed ligesom PNG
  • Skift til WebP for alle fotografier og almindelig grafik. Brug kun PNG, når der er brug for gennemsigtighed

Ændr størrelsen, før du uploader

  • Hvis du uploader et billede på 4.000 pixel i bredden, der skal vises i 800 pixel, tvinger du hver besøgende til at downloade fire gange mere data end nødvendigt
  • Ændr billeder til deres største bredde i visningen, før du uploader dem

Komprimer til et passende niveau af kvalitet

  • En indstilling af kvalitet på 75 til 85 i formater med tab giver filer, der er 60 til 80 procent mindre end originalen, uden forskel i kvaliteten, man kan se, for de fleste fotografier
  • Kombinationen af det rigtige format, den rigtige størrelse og passende komprimering kan mindske vægten af billeder på en side med 80 til 90 procent

Du kan læse en fuld vejledning om filformater, typer af komprimering, lazy loading og responsive billeder i artiklen om hvordan du optimerer billeder, så de indlæses hurtigere.

Hvordan mindsker caching indlæsningstiden?

Caching gemmer kopier af sidens ressourcer, så de ikke skal downloades eller bygges igen ved hver forespørgsel. Der er to typer, der virker på forskellige punkter i vejen frem til den besøgende.

Caching i browseren

  • Den besøgendes browser gemmer CSS, JavaScript, billeder og skrifttyper efter det første besøg
  • Ved besøg, der kommer igen, indlæses de filer fra den lokale enhed i stedet for at blive downloadet igen, og det mindsker indlæsningstiden dramatisk for besøgende, der vender tilbage
  • Caching i browseren styres af headers for cache, der er sat på serveren. De fleste moderne hostingplatforme sætter dem automatisk

Caching på serveren

  • Serveren gemmer sider, der er lavet på forhånd, så de ikke skal bygges forfra ved hver forespørgsel
  • Det gør Time to First Byte hurtigere for alle besøgende, også dem, der kommer for første gang
  • Caching på serveren har størst effekt på dynamiske hjemmesider, hvor siderne bliver lavet ud fra forespørgsler til en database

Du kan læse en detaljeret forklaring på, hvordan caching i browseren virker, og hvordan du sætter det op, i artiklen om hvad caching i browseren er, og hvordan det virker.

Hvad gør minimering for hastigheden?

CSS- og JavaScript-filer, der er skrevet af udviklere, indeholder mellemrum, linjeskift og kommentarer, der gør koden lettere at læse og vedligeholde. Browsere har ikke brug for noget af det. Minimering fjerner det og giver mindre filer, der downloader hurtigere uden at ændre, hvordan de virker.

  • Minimering af CSS mindsker typisk filstørrelsen med 20 til 30 procent
  • Minimering af JavaScript kan mindske filstørrelsen med 30 til 50 procent, mere for store filer med mange kommentarer og meget luft
  • Minimering er en af de lettere gevinster, fordi den ikke kræver ændringer i, hvordan siden ser ud eller virker, og ofte kan slås til med et plugin eller en indstilling på platformen

Du kan læse en fuld gennemgang af, hvordan minimering virker på CSS, JavaScript og HTML, i artiklen om hvad minimering er, og hvordan det hjælper din hjemmeside.

Hvordan mindsker et CDN indlæsningstiden for besøgende?

Et CDN, et content delivery network, mindsker den fysiske afstand mellem den besøgende og den server, der leverer dine filer. Uden et CDN forbinder alle besøgende til én server ét sted. Med et CDN bliver hver besøgende betjent fra den server, der er tættest på dem.

  • For besøgende tæt på den oprindelige server er forbedringen i hastighed fra et CDN lille
  • For besøgende i andre lande eller regioner kan et CDN mindske Time to First Byte med hundredvis af millisekunder
  • CDN har størst effekt på hjemmesider med et internationalt publikum eller meget medieindhold
  • Nogle hostingplatforme har levering via CDN med som standard. Hvor det er med, behøver du ikke gøre mere

Du kan læse en fuld forklaring på, hvordan CDN virker, og hvem der har brug for et, i artiklen om hvad et CDN er, og hvordan det hjælper din hjemmeside.

Hvad er lazy loading, og hvordan mindsker det den første indlæsningstid?

Lazy loading udskyder download af billeder og andre ressourcer, der ligger under det synlige område, til den besøgende ruller tæt på dem. Det mindsker den mængde data, browseren skal downloade, før siden kan bruges.

  • På en side med tyve billeder betyder lazy loading, at browseren kun downloader de tre eller fire billeder, der er synlige på skærmen, når siden åbner første gang
  • De øvrige billeder indlæses, mens den besøgende ruller, så downloadet spredes over tid i stedet for at blive lagt først
  • Lazy loading forbedrer direkte Time to Interactive og kan have en mærkbar effekt på Largest Contentful Paint, når indholdet i det synlige område ikke er fyldt med billeder
  • Brug ikke lazy loading på billeder i det synlige område. De skal indlæses med det samme

Du kan læse en fuld vejledning i, hvordan lazy loading virker, og hvordan du bruger det, i artiklen om hvad lazy loading er, og hvordan det virker.

Hvordan gør ressourcer, der blokerer visningen, en side langsommere?

Når en browser møder et script eller et stilark i dokumentets head, sætter den visningen på pause, til filen er færdig med at indlæse. Den besøgende ser ingenting, mens det sker. Det kaldes en ressource, der blokerer visningen.

Sådan mindsker du blokering af visningen

  • Flyt JavaScript, der ikke er afgørende, så det indlæses sidst i dokumentet, eller brug attributten defer eller async, så scripts ikke sætter visningen på pause
  • Find ud af, hvilken CSS der skal bruges med det samme (stilarter til det synlige område), og hvilken der kan indlæses senere
  • Fjern eller erstat scripts fra tredjeparter, der ikke er nødvendige. Chatwidgets, indlæg fra sociale medier og scripts til sporing lægger alle tid til blokeringen

Hvad med serverens svartid?

Alle andre forbedringer er begrænset af, hvor hurtigt serveren svarer til at begynde med. En langsom server lægger forsinkelse på, før browseren kan begynde at indlæse nogen ressource.

Hvad påvirker serverens svartid

  • Kvaliteten af hosting: delt hosting fordeler CPU og hukommelse mellem mange sider og giver uforudsigelige svartider
  • Databasens ydeevne: langsomme forespørgsler til databasen, der ikke er optimeret, forsinker serverens evne til at lave et svar
  • Caching på serveren: uden caching udløser hver forespørgsel, at siden bygges helt forfra ud fra databasen
  • Geografisk afstand til serveren: selv før et CDN kommer ind i billedet lægger en server, der ligger langt fra den besøgende, ventetid på

En god Time to First Byte er under 800 millisekunder. Hvis din TTFB konsekvent ligger over det, giver bedre hosting eller caching på serveren gevinster, som ingen optimering af det, besøgende ser, kan matche.

Hvor begynder du, når du vil gøre en hjemmeside hurtigere?

Hvis du arbejder med forbedringer af hastighed for første gang, giver denne rækkefølge de hurtigste gevinster for den mindste indsats på en typisk hjemmeside for en lille virksomhed.

Rækkefølge efter prioritet for de fleste hjemmesider

  • Først: optimer billeder. Det tager fat på den største kilde til sidens vægt og står ofte for 60 til 80 procent af den indlæsningstid, der kan undgås
  • Dernæst: slå caching til. Caching i browseren og på serveren mindsker arbejdet ved hvert besøg, især for besøgende, der kommer igen
  • Derefter: minimer CSS og JavaScript. Mindre arbejde og en sikker forbedring af tiden til overførsel af filer
  • Så: tilføj et CDN, hvis dit publikum er spredt geografisk, eller hvis levering af medier er en stor del af din side
  • Til sidst: tag fat på ressourcer, der blokerer visningen, og serverens svartid, hvis de øvrige trin er gennemført, og pointene stadig er dårlige

Når du har lavet en række ændringer, så kør en test af hastigheden for at måle forbedringen, før du går videre til det næste område. Du kan læse en vejledning i, hvordan du tolker resultater af tests korrekt, i artiklen om hvordan du tester hastigheden på din hjemmeside. Du kan læse en gennemgang af de bestemte tal, som de forbedringer påvirker, i artiklen om hvad Core Web Vitals er.

Sådan mindsker WEMASY indlæsningstiden på hjemmesider

WEMASY's hjemmesidebygger tager sig automatisk af flere af de mest almindelige forbedringer af hastighed. Billeder bliver komprimeret og lavet om til WebP ved upload. Headers til caching i browseren er sat op som standard. CSS- og JavaScript-filer, som platformen leverer, er minimeret. Levering via CDN er med i alle planer og leverer statiske filer fra det sted, der er tættest på hver besøgende.

Point for hastighed og data om Core Web Vitals kan ses i WEMASY's analytics-dashboard med anbefalinger for hver side, der markerer de problemer, der er tilbage. Det betyder, at du kan følge forbedringer efter enhver ændring af indhold eller design uden selv at køre eksterne tests.

Se, hvad der er med, hos WEMASY hjemmesidebygger, eller se planerne på prissiden.

Ofte stillede spørgsmål

Hvad er den hurtigste måde at gøre en hjemmeside hurtigere?

Optimering af billeder giver den største forbedring af hastigheden for den mindste indsats på de fleste hjemmesider. Billeder, der ikke er komprimeret, er den enkelt største grund til, at sider bliver tunge, og hvis du skifter til WebP med ordentlig komprimering og de rigtige mål, kan du mindske størrelsen på billedfiler med 80 til 90 procent. Efter billeder er det at slå caching i browseren til og minimere CSS- og JavaScript-filer de næste forbedringer med størst effekt. Med WEMASY's hjemmesidebygger kan du sætte det op direkte på din hjemmeside.

Påvirker hastigheden på en hjemmeside placeringerne i søgning?

Ja. Søgemaskiner bruger Core Web Vitals, som måler bestemte tal for indlæsning, hvor godt siden reagerer, og visuel stabilitet, som signaler om placering. Sider med gode point for Largest Contentful Paint, Interaction to Next Paint og Cumulative Layout Shift har en fordel i rangeringen frem for sider med dårlige point, især når sider, der konkurrerer, har samme kvalitet af indholdet. Forbedringer af hastighed, der hæver point for Core Web Vitals, kan give bedre synlighed i søgning.

Hvad er en god indlæsningstid for en hjemmeside?

For Core Web Vitals er det vigtigste mål en Largest Contentful Paint under 2,5 sekunder. I praksis lever en side, der kan bruges fuldt ud inden for tre sekunder på en mobilforbindelse, op til den grænse, der betyder mest, både for besøgendes oplevelse og for placeringer i søgning. Fuld indlæsning af siden på under fem sekunder på mobil er en fornuftig standard for de fleste små virksomheders hjemmesider.

Hvordan ved jeg, hvad der gør min hjemmeside langsom?

Kør en test af hastigheden på siden med et værktøj, der viser feltdata sammen med data fra laboratorium. Se på de bestemte tal, der er markeret som dårlige, i stedet for at fokusere på den samlede score. En TTFB over 800 millisekunder peger på problemer med serveren. En dårlig LCP peger som regel på problemer med billeder eller ressourcer, der blokerer visningen. En høj Total Blocking Time peger på problemer med kørsel af JavaScript. Hvert tal viser et forskelligt område at undersøge.

Påvirker hosting hastigheden på en hjemmeside?

Ja, meget. Kvaliteten af hosting påvirker Time to First Byte, som afgør, hvor hurtigt browseren kan begynde at indlæse nogen ressource. Delt hosting fordeler regnekraft mellem mange sider og giver svartider, der svinger. Hosting med caching på serveren og levering via CDN mindsker TTFB og forbedrer hastigheden for alle besøgende, uanset hvilke andre optimeringer du har lavet på selve siden.

Kan jeg gøre min hjemmeside hurtigere uden en udvikler?

Ja, for de fleste af de forbedringer, der gør den største forskel. Optimering af billeder, valg af de rigtige filformater og tilføjelse af alt-tekst kan du gøre uden at røre ved kode. Caching i browseren og minimering bliver ofte håndteret automatisk af platformen til hjemmesiden, eller du kan slå dem til i indstillinger. Du har typisk kun brug for en udvikler til avancerede ændringer som særlig opsætning af serveren, at fjerne ressourcer, der blokerer visningen, på sider, der er kodet i hånden, eller at optimere forespørgsler til databasen.

Brug det med det samme
på din egen hjemmeside.

Start gratis med WEMASY, og byg din side på få minutter.