Hvad er en responsiv hjemmeside? (også søgt som responsive hjemmeside) Det er en side, hvor layout, typografi og medier tilpasser sig viewporten — mobil, tablet og desktop — uden en separat “mobil-site”. På engelsk: responsive web design; på dansk: responsiv / responsivt website.

For hastighed er responsivitet mere end pæne breakpoints. Det handler om at levere de rigtige bytes til den rigtige skærm — især billeder.

Hvad gør en side responsiv?

  • Fleksibelt layout — CSS (ofte flex/grid + media queries) der ombryder sektioner
  • Flydende typografi — læsbar tekst uden vandret scroll
  • Responsive images — srcset/sizes (eller et image-CDN), så telefonen ikke henter et 2000px hero
  • Touch-venlig UI — knapper og menuer der virker med finger, ikke kun mus

Et tema kan være “responsivt” i layoutet og stadig være langsomt, hvis det sender desktop-billeder og tung CSS til mobil.

Responsiv hjemmeside og hastighed

Properly size images er den praktiske halvdel af responsivt design. Uden det taber du ofte på LCP på mobil. Above the fold ser forskelligt ud på telefon og laptop — mål derfor mobil særskilt.

Manglende bredde/højde (eller aspect-ratio) på responsive billeder giver typisk CLS: indholdet “hopper”, når billedet lander.

WordPress i praksis

  • Brug indbyggede responsive billeder; undgå at tvinge fuldbredde-originaler ind i små containere
  • Test page builder-sektioner på smalle viewports — skjulte desktop-blokke må ikke stadig loade tunge assets
  • Prioritér mobil Core Web Vitals; det er det, Search Console oftest vægter
  • Lazy-load under fold er fint — men ikke på LCP-billedet (se lazy load)

Sådan tjekker du det

  1. Åbn siden på en rigtig telefon (eller DevTools device mode)
  2. Kør PageSpeed Insights på mobil
  3. I Network: se hvilken billedfil der faktisk hentes til hero
  4. Ret dimensioner/format, genmål

Responsivt layout uden responsive assets er kun halvt arbejde. Vil du have pejling på din egen side? Start med et helbredstjek eller læs om WordPress hastighedsoptimering.