PageSpeed er ikke bare viktig for brukeropplevelsen – det er også en direkte ranking-faktor for Google. En rask nettside gir lavere bounce rate, høyere konverteringer og bedre SEO. Her er din komplette guide til å oppnå PageSpeed 100/100.
Hvorfor er PageSpeed viktig?
Tallene snakker for seg selv:
- 53% av mobile brukere forlater sider som tar mer enn 3 sekunder å laste
- 1 sekund forsinket lastetid kan redusere konverteringer med 7%
- Google bruker PageSpeed som ranking-faktor siden 2018
- Amazon tapte $1.6 milliarder i salg per år for hver sekund forsinket lastetid
Forstå Core Web Vitals
Google fokuserer på tre hovedmålinger:
1. Largest Contentful Paint (LCP)
Måler hvor lang tid det tar før hovedinnholdet er synlig.
- God: Under 2.5 sekunder
- Trenger forbedring: 2.5-4 sekunder
- Dårlig: Over 4 sekunder
2. First Input Delay (FID)
Måler hvor lang tid det tar før siden er interaktiv.
- God: Under 100ms
- Trenger forbedring: 100-300ms
- Dårlig: Over 300ms
3. Cumulative Layout Shift (CLS)
Måler visuell stabilitet (unngå at innhold "hopper").
- God: Under 0.1
- Trenger forbedring: 0.1-0.25
- Dårlig: Over 0.25
Bildeoptimalisering - Den største forskjellen
Bilder utgjør ofte 50-70% av total sidestr else. Optimalisering her gir størst effekt.
1. Bruk moderne bildeformater
- WebP: 25-35% mindre enn JPEG, støttes av 97% av nettlesere
- AVIF: 50% mindre enn JPEG, økende støtte
- Implementering: Bruk picture-element med fallbacks
2. Komprimer bildene
- Bruk verktøy som TinyPNG, Squoosh eller ImageOptim
- Mål: Under 100KB per bilde
- Kvalitet: 80-85% er ofte optimal balanse
3. Riktig størrelse
- Ikke last inn 3000px bilder hvis du viser 300px
- Bruk srcset for forskjellige skjermstørrelser
- Lag flere versjoner: thumbnail, medium, large
4. Lazy loading
- Last kun bilder når de er i viewport
- Innebygd støtte: loading="lazy" attribute
- Unnta above-the-fold bilder
Optimaliser JavaScript
JavaScript er ofte den største bremseklossen for hastighet.
1. Minifiser og komprimer
- Fjern kommentarer, whitespace og ubrukt kode
- Bruk Terser eller UglifyJS
- Komprimer med Gzip eller Brotli
2. Code splitting
- Del opp koden i mindre chunks
- Last kun det som trengs for hver side
- Bruk dynamic imports
3. Defer og async
- async: Last ned parallelt, kjør så snart klar
- defer: Last ned parallelt, kjør etter HTML er parsed
- Bruk defer for scripts som ikke er kritiske
4. Fjern ubrukt kode
- Bruk Chrome DevTools Coverage-tab
- Fjern ubrukte biblioteker
- Tree-shake dependencies
CSS-optimalisering
1. Critical CSS
- Inline CSS som trengs for above-the-fold innhold
- Last resten av CSS asynkront
- Verktøy: Critical, Penthouse
2. Minifiser CSS
- Fjern whitespace og kommentarer
- Kombiner flere CSS-filer
- Bruk CSS-preprocessors optimalt
3. Fjern ubrukt CSS
- Bruk PurgeCSS eller UnCSS
- Fjern hele frameworks hvis du kun bruker små deler
Server og hosting-optimalisering
1. Bruk CDN (Content Delivery Network)
- Distribuer innhold fra servere nær brukerne
- Anbefalte: Cloudflare, AWS CloudFront, Fastly
- Kan redusere lastetid med 50-80%
2. Enable caching
- Browser caching: Cache-Control headers
- Server-side caching: Redis, Memcached
- CDN caching: Cache statiske ressurser
3. Komprimer alt
- Gzip: 70-90% størrelse-reduksjon
- Brotli: Enda bedre, men mindre støttet
- Komprimer HTML, CSS, JS, SVG
4. Velg rask hosting
- Server response time bør være under 200ms
- Bruk moderne hosting (Vercel, Netlify, AWS)
- Unngå billig shared hosting
Next.js-spesifikke optimaliseringer
Hvis du bruker Next.js (som denne siden):
1. Image-komponenten
import Image from 'next/image'
<Image
src="/image.jpg"
width={800}
height={600}
alt="Description"
loading="lazy"
/>2. Dynamic imports
const DynamicComponent = dynamic(() =>
import('../components/heavy-component'),
{ loading: () => <p>Loading...</p> }
)3. Optimaliser fonter
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })Verktøy for testing
- Google PageSpeed Insights: Offisiell Google-test
- WebPageTest: Detaljert analyse med waterfall
- Chrome DevTools: Lighthouse og Performance-tab
- GTmetrix: Visuell fremstilling av laste-prosessen
Sjekkliste for 100/100
- ☑ Alle bilder WebP/AVIF, komprimert under 100KB
- ☑ Lazy loading på alle bilder unntatt above-fold
- ☑ JavaScript minifisert, defer/async
- ☑ Critical CSS inline
- ☑ All kode minifisert og komprimert (Gzip/Brotli)
- ☑ CDN implementert
- ☑ Browser caching konfigurert
- ☑ Server response time under 200ms
- ☑ Ingen layout shifts (fixed dimensions)
- ☑ Preload kritiske ressurser
- ☑ Font optimization (font-display: swap)
Vanlige Feil å Unngå
Mange bedrifter gjør disse feilene når de prøver å optimalisere PageSpeed:
- Optimaliserer alt samtidig: Start med én ting om gangen og mål effekten
- Ignorerer mobil: Over 60% av trafikk er mobil - optimaliser for mobil først
- For mye JavaScript: Unødvendige biblioteker og plugins bremser nettsiden
- Dårlig hosting: Billig hosting kan ødelegge all optimalisering
- Ikke tester regelmessig: PageSpeed endres over tid - test månedlig
ROI av PageSpeed Optimalisering
Investering i PageSpeed gir betydelig avkastning:
- 7% økning i konvertering per sekund raskere lastetid
- 11% økning i page views for hvert sekund raskere
- 16% reduksjon i bounce rate når lastetid forbedres fra 3 til 1 sekund
- Bedre Google-ranking - hastighet er en direkte ranking-faktor
- Lavere annonsekostnader - bedre Quality Score i Google Ads
Konklusjon
PageSpeed 100/100 er oppnåelig, men krever systematisk arbeid. Start med bildeoptimalisering (størst effekt), deretter JavaScript, så CSS og server-optimalisering. Test jevnlig og forbedre kontinuerlig.
Husk: Målet er ikke perfekt score, men rask opplevelse for brukerne. Fokuser på reell hastighet, ikke bare tall. En nettside som laster raskt gir bedre brukeropplevelse, høyere konvertering og bedre SEO-resultater.
