Godt webdesign og god hastighed er ikke modsætninger. En flot side, der tager fem sekunder på mobil, taber alligevel. Målet er designvalg, der støtter Core Web Vitals — ikke “minimalisme for enhver pris”, men bevidste kompromiser.

Designvalg der koster LCP og INP

  • Hero-sliders med autoplay og store billeder
  • Webfonte i mange vægte + ikon-fonte “fordi det er nemt”
  • Page builder-sektioner stablet uden behov (stor DOM, meget CSS/JS)
  • Chat, popups og sticky bars over fold uden pladsreservering (CLS)
  • Baggrundsvideoer og parallax der kører på alle enheder

Hver effekt er et valg. Spørg: hjælper den konverteringen mere, end den koster i load og respons?

Designarbejdsplads — balance mellem æstetik og performance

Fundament: hosting og tema

Hosting sætter loftet for TTFB. Temaet sætter loftet for DOM og CSS. Vælg et let, velvedligeholdt tema — eller et block theme du faktisk kan styre — frem for et “alt-i-én”-multipurpose-tema med 40 demoer, du aldrig bruger.

Page builders — brug med disciplin

Builders som Elementor, Divi, Bricks, Oxygen og Gutenberg/blokke kan alle være “hurtige nok”, hvis du bygger stramt. De bliver langsomme, når hver sektion henter egne widgets, animationer og globale styles.

  • Færre sektioner over fold; ét klart LCP-element (billede eller overskrift)
  • Undgå at loade builder-assets på sider, der ikke bruger dem
  • Test mobil efter hver større layoutændring — ikke kun desktop-preview
  • Gutenberg/blokke kan være lettere, men “tunge blok-plugins” findes også her

Billeder og media i designet

Designeren vælger ofte 3000 px-fotos “for skarphed”. Browseren viser måske 600 px. Resize, komprimér og brug moderne formater — se store billeder og lazy load. Lazy-load aldrig det primære LCP-billede.

Typografi uden at bremse

Begræns antal familier og vægte. Self-host eller optimér Google Fonts — se Optimér Google Fonts. `font-display: swap` (eller tilsvarende) undgår usynlig tekst; undgå layout-hop med fornuftige fallbacks.

Checklist før launch

  1. Mobil LCP under kontrol på den vigtigste landingsside
  2. Ingen unødvendig third-party over fold
  3. Billeder i rigtig størrelse + dimensioner (mod CLS)
  4. Page builder-widgets: kun det brugte
  5. PSI field/lab + en reel klik-test (INP) på knapper og menu
Webdesign på skærm — hurtig og overskuelig UI

Kort sagt

Design for mennesker og for netværk. Færre tunge effekter, rigtige billeder, let tema/builder-brug. En hurtig side er også godt design. Brug et helbredstjek, eller få en audit, hvis layoutet er flot — men felt-data er røde.