Kort fortalt: Hydration er processen hvor HTML, der allerede er renderet (server-side eller statisk), bliver “koblet” til JavaScript, så UI’et bliver interaktivt.
I mange setups betyder det, at browseren skal:
- downloade JavaScript til komponenter
- parse og execute koden
- bygge runtime state
- attach event listeners
Hvis det sker på store dele af siden, kan det blive dyrt – især på mobil.
Hvorfor betyder det noget?
- Hydration kan give ekstra CPU-arbejde på mobil
- Stor hydration kan skabe long tasks
Hvilken indflydelse har hydration?
Hydration påvirker typisk:
- INP: hvis main thread er optaget, reagerer UI langsommere ved klik/tap
- LCP: hvis CPU er travl tidligt, kan rendering blive forsinket
- batteri/varme: især på mobil, hvor meget JS kan være dyrt
Et klassisk symptom er: siden ser klar ud, men føles tung ved første interaktion, fordi hydration stadig kører.
Hvornår blev hydration et stort tema?
Hydration blev mere relevant i takt med udbredelsen af JavaScript-frameworks der:
- server-renderer HTML for hurtigere “første visning”
- men stadig har brug for klient-JS for interaktivitet
Det skabte en ny balance: hurtig first paint, men potentielt tung JS-arbejde bagefter.
Hvornår er hydration “det værd”?
Hydration giver mening når du reelt har behov for interaktivitet:
- søgning, filter, checkout
- dashboards
- komplekse komponenter
På et videnssite er meget indhold ofte statisk, så det er et oplagt sted at minimere hydration.
Typiske forbedringer
- Begræns interaktivitet til små islands
- Fjern unødvendige client-side komponenter
Konkrete optimeringer (praktisk)
1) Begræns interaktivitet til “islands”
I stedet for at gøre hele siden interaktiv, så isolér det:
- kun den komponent der skal kunne klikkes/filtreres
- resten som statisk HTML
Det giver typisk stor effekt på INP.
2) Udskyd hydration til efter behov
Hvis en komponent ikke er nødvendig ved første visning:
- load den først ved interaktion (klik på “åbn”)
- eller når den kommer i viewport
3) Fjern tredjepart der tvinger ekstra JS
Nogle tredjeparts widgets kræver tung JS initialisering. På et content-site bør de være sparsomt brugt, især tidligt i load.
4) Mål CPU og long tasks
Brug DevTools Performance:
- kig efter long tasks under load og første interaktion
- se hvilke scripts der bruger mest tid
Tjekliste
- Kun nødvendige dele af siden er interaktive
- Store komponenter hydreres ikke ved første paint, medmindre nødvendigt
- INP testes på mobil (lav-end hvis muligt)
FAQ
Kan man have et hurtigt site uden hydration?
Ja, hvis du ikke har brug for client-side interaktivitet.
For mange content-sites er statisk HTML + meget lidt JS ofte den hurtigste og mest stabile løsning. Du kan stadig have små widgets, men undgå at gøre hele UI’et “app-agtigt” hvis det ikke er nødvendigt.
Er hydration det samme som “JavaScript på siden”?
Ikke helt. Hydration er den specifikke proces hvor framework-komponenter bliver interaktive.
Du kan godt have lidt JavaScript (fx små widgets, analytics, formular-validering) uden at hydrere store UI-områder. Det er ofte en god måde at holde performance stabil på.
Næste skridt fra begreb til handling
Guides og blogindlæg der matcher begrebets emne - ud fra fælles tags og sidens fokus.
Fjern eller udsæt tunge tredjeparts scripts uden at ødelægge funktionalitet
Følg en praktisk guide til at finde, vurdere og udsætte tredjeparts scripts, så de ikke ødelægger LCP, INP og den samlede brugeroplevelse.
Sådan finder du lange tasks i DevTools og forbedrer INP
Lær hvordan du bruger DevTools til at finde lange tasks, tunge event handlers og JavaScript der gør siden træg at bruge.
Optimer cookie banner uden CLS og INP problemer
Lær hvordan du bygger eller justerer cookie bannere, så de ikke skubber indhold, blokerer interaktion eller gør siden tungere end nødvendigt.
Hvordan tredjeparts scripts gør din hjemmeside langsom
Få overblik over hvordan chat widgets, tracking, consent, video embeds og andre tredjeparts scripts påvirker LCP, INP, CLS og TTFB.
Cookie banner og Core Web Vitals: den oversete årsag til dårlig brugeroplevelse
Se hvordan cookie bannere og consent scripts kan påvirke load, layout og interaktion, og lær hvordan du undgår at de ødelægger brugeroplevelsen.
Sådan læser du en waterfall og finder flaskehalse i load
Lær at læse en waterfall korrekt og find problemer med TTFB, LCP, render blocking og tredjepart, så du kan prioritere den rigtige optimering.
