Slik gjør du nettsiden raskere: 12 praktiske metoder

01Hvorfor er nettsidehastighet viktig?

En side som laster sakte, betyr at du mister besøkende før de har sett innholdet. Særlig på mobilnett er noen sekunders venting nok til at brukeren trykker tilbake. På en side du har betalt annonser for, betyr det at betalte klikk går til spille.

Hastighet påvirker også synligheten i søk. Google bruker Core Web Vitals til å måle sideopplevelsen: 2,5 sekunder for LCP (innlasting av det største innholdet), 200 millisekunder for INP (respons på interaksjon) og 0,1 for CLS (visuell forskyvning) regnes som «gode» terskler. Vi har forklart disse målingene nærmere i artikkelen hva er Core Web Vitals.

De 12 metodene nedenfor er trinnene som gjør størst forskjell på de fleste nettsider. Du trenger ikke gjøre alt på en gang. Mål først, og start med det største problemet.

02Mål først: hvilke verktøy?

Optimalisering uten måling er som å skyte i mørket. De gratis verktøyene nedenfor viser hvor problemet er.

• PageSpeed Insights: Viser både data fra ekte brukere (hvis tilgjengelig) og laboratorietest.
• Fanen Lighthouse i Chrome-utviklerverktøyene: Lokale tester og detaljerte anbefalinger.
• Core Web Vitals-rapporten i Search Console: Reell brukeropplevelse på alle sidene på nettstedet.
• Nettverksfanen (Network): Viser hvilken fil som lastes hvor raskt og i hvilken størrelse.

03Bildeoptimalisering

På de fleste nettsider utgjør bilder størstedelen av sidevekten. Derfor kommer den raskeste gevinsten som regel her.

1. Bytt til moderne formater

Å levere bilder i WebP- eller AVIF-format gir mye mindre filer enn JPEG og PNG ved tilsvarende bildekvalitet. For eldre nettlesere kan du angi et reserveformat med picture-taggen.

<picture>
  <source srcset="urun.avif" type="image/avif">
  <source srcset="urun.webp" type="image/webp">
  <img src="urun.jpg" alt="Produktnavn" width="800" height="600">
</picture>

2. Server riktig størrelse

Det er unødvendig å laste ned en fil på 3000 piksler for et bilde som vises 400 piksler bredt på telefon. La nettleseren velge riktig fil etter skjermstørrelsen med attributtene srcset og sizes.

3. Sen innlasting og størrelsesangivelse

Legg til loading=lazy på bilder som ligger under skjermkanten, slik at de bare lastes når brukeren nærmer seg dem. Ikke last hovedbildet øverst på siden sent, siden det som regel er LCP-elementet. Å angi bredde og høyde på alle bilder hindrer at innholdet hopper (CLS).

04Forenkle kode og ressurser

Nettleseren må laste ned og behandle CSS- og JavaScript-filer før den viser siden. Jo større og flere disse filene er, desto senere vises siden og desto senere svarer den på interaksjon.

4. Fjern ubrukt kode

Coverage-panelet i Chrome-utviklerverktøyene viser hvor mye av hver fil som faktisk brukes. Fjern ubrukte komponenter og biblioteker, og minifiser de gjenværende filene.

5. Utsett blokkerende skript

Last JavaScript-filer som ikke trengs for sidens første visning med defer. Da kan nettleseren fortsette å behandle HTML-en mens skriptene lastes ned i bakgrunnen.

<script src="/js/main.js" defer></script>

6. Reduser tredjepartsskript

Tredjeparts chatteverktøy, sporingskoder, plugin-moduler for sosiale medier og innebygde videoer kan belaste siden betydelig. Vurder om hver av dem virkelig trengs, og vis videoer med et lite forhåndsvisningsbilde til brukeren klikker.

05Gjør skriftene lettere

Nettskrifter gir nettsiden karakter, men hvis de lastes feil, kan teksten dukke opp sent eller siden hoppe.

7. Bruk WOFF2 og delsett

Server skriftene i WOFF2-format og bare med tegnsettet du trenger (for eksempel latinske tegn). Ikke last vekter du ikke bruker. De fleste nettsider klarer seg med to eller tre vekter.

8. Juster synlighet og prioritet

Med font-display: swap vises teksten med systemskrift til skriften er lastet. Hovedskriften som brukes øverst på siden kan du forhåndslaste med preload.

<link rel="preload" href="/fonts/ana-font.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: "AnaFont";
  src: url("/fonts/ana-font.woff2") format("woff2");
  font-display: swap;
}

06Server- og hurtigbufferinnstillinger

Uansett hvor lett koden og bildene er, åpnes siden sent hvis serveren svarer sakte. Forbedringer i dette laget påvirker alle sidene samtidig.

9. Slå på nettleserens hurtigbuffer

Angi hurtigbufferhoder med lang levetid for filer som sjelden endres, som logo, CSS, JavaScript og skrifter. Da slipper gjenkommende besøkende å laste dem ned på nytt. Når en fil oppdateres, kan du bryte hurtigbufferen ved å gi navnet et versjonstillegg.

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/avif "access plus 1 year"
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
</IfModule>

10. Komprimering og moderne protokoll

Send tekstbaserte filer (HTML, CSS, JavaScript, SVG) komprimert med Brotli eller gzip. Sørg for at serveren din støtter HTTP/2 eller HTTP/3. Disse protokollene gjør det lettere å laste ned mange små filer parallelt.

11. Forkort serverens responstid

Hvis tiden til første byte (TTFB) er lang, skyldes det som regel trege databasespørringer, dynamiske sider uten hurtigbuffer eller for lite serverressurser. Sidehurtigbuffer, bedre spørringer eller et mer passende hostingabonnement reduserer denne tiden.

12. Bruk CDN

Et innholdsdistribusjonsnettverk (CDN) leverer de statiske filene dine fra servere som ligger geografisk nær besøkende. På nettsider med besøk fra ulike byer og land reduserer det forsinkelsen tydelig og avlaster hovedserveren.

07Hvilken metode forbedrer hva?

Hver metode påvirker en ulik måling. Fokuser først på metodene i raden for målingen som er dårligst i målerapporten din.

08Hastighet er ikke noe man gjør én gang

Et nytt kampanjebanner, et stort foto som lastes opp eller en ny sporingskode kan oppheve måneders optimalisering på noen få dager. Gjør derfor hastighetsmåling til en del av den jevnlige vedlikeholdsrutinen, og gjenta PageSpeed Insights-testen etter hver større oppdatering. Du finner flere steg i vedlikeholdsrutinen i artikkelen vår om vedlikehold av nettsider.

Hastighet er billigst når den planlegges fra start i designfasen. Lette komponenter, riktig bildeoppsett og en ren kodestruktur gjør de fleste rettelsene etter lansering unødvendige. Vi bruker denne tilnærmingen sammen i prosessene for SEO-vennlig webdesign og mobiltilpasset design, og vi har samlet sjekklisten for teknisk SEO i guiden SEO-vennlig webdesign.

For bedrifter som vil følge måling og rapportering jevnlig, vurderer tjenesten vår SEO og analyse hastighetsdata sammen med søkeresultatene.