Kort fortalt: I stedet for at hydrere hele træet markerer du interaktive øer - resten forbliver ren HTML. Det passer godt til indholdssider der ellers ville trække hele React-runtime.
Forhold til frameworks
Astro populariserede modellen; andre frameworks tilbyder lignende selective hydration. Kombinér med tree shaking og minification for små ø-assets.
SEO
Da HTML er komplet, er LCP for tekst/billeder ofte lettere at optimere end i ren CSR.
Statisk skal, interaktive øer
Islands-tilgangen serverer meste indhold som hurtig HTML/CSS og isolerer JavaScript til små «øer» der hydreres uafhængigt. Det reducerer typisk hydration-omkostning sammenlignet med at hydrere hele dokumenttræet.
Det kræver design- og komponentdisciplin: hvad er virkelig interaktivt, og hvad er bare styling? Hver unødig ø er stadig et script og et runtime-budget.
Kommunikation mellem øer
Når øer skal dele state (kurv, login, tema), undgå at sprede global event-suppe. Brug eksplicitte grænser og små state-lag så afhængigheder kan testes og profileres.
Tredjeparts-widgets bør indlejres som egne øer med klare performance-budgetter - ellers vokser øerne til et kontinent.
Build-værktøjer og mental model
Teams der kommer fra SPA-verdenen skal omstille sig til at tænke «HTML først». Oplær i code review: afvis PR’er der gør hele layoutet til klientkomponent uden behov.
Mål før/efter på LCP og INP på mobile profiles - islands giver ikke automatisk gevinst hvis billeder og fonts stadig er flaskehalse.
Videre på sitet
Relaterede guides og blogindlæg finder du i kortene nederst på siden. Overblik: Blog, Guides, Ordbog.
FAQ
Er islands det samme som micro-frontends?
Beslægtet idé om opdeling, men teknisk anderledes - islands handler om hydration-granularitet.
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.
5 grunde til at din hjemmeside er langsom og hvad du gør ved det
Se de mest almindelige årsager til en langsom hjemmeside, hvordan du spotter dem, og hvilke ændringer der typisk giver mest effekt først.
