Kort fortalt: content-visibility: auto markerer et subtrees indhold som lazy-renderet i praksis: browseren investerer ikke fuld layout og paint i sektioner langt nede på siden før brugeren nærmer sig dem.
Hvad kan det hjælpe med?
- Meget lange artikler, FAQ-sider og produktlister med mange komponenter.
- Sider hvor main thread bliver mættet ved første load på grund af enormt DOM.
- Lavere CPU og hurtigere første paint i scenarier hvor skrollbar indhold alligevel ikke skal være færdigtegnet med det samme.
Det er ikke en erstatning for at skære JavaScript ned, fjerne tredjeparts-scripts eller optimere billeder - det er et ekstra værktøj når strukturen allerede er forsvarlig.
Vigtig følge-makker: contain-intrinsic-size
Når indhold springes over, skal browseren alligevel reservere plads i layoutet - ellers kollapser sektionen til nul og ekspanderer senere, hvilket giver store hop (CLS) og en ubehagelig scrollbar. Brug realistiske intrinsic sizes eller kendte blokhøjder per sektion.
Uden pladsreservation får I præcis den effekt I prøver at undgå: layout der “popper” ind når brugeren scroller.
Risici og begrænsninger
- Forkerte højder → CLS eller spring i scrollbar-længde.
- Print og “find på side” kan kræve at indhold faktisk findes i layoutet - test jeres use cases.
- Logik der måler elementer off-screen kan fejle hvis kode antager at alt er rendt med det samme.
- Teamets vedligehold: skabeloner ændrer højde - intrinsic sizes skal opdateres.
Forhold til andre optimeringer
- Lazy loading af billeder reducerer netværk; content-visibility reducerer layout/paint-kost for DOM.
- Render-blocking CSS og store JS-bundter bør stadig adresseres først.
Relaterede begreber
- CLS
- Render-blocking
- Lazy loading (billeder - beslægtet idé om at udskyde arbejde)
FAQ
Skal alle lange sider bruge content-visibility?
Nej. Det er et avanceret værktøj når DOM og layout er så tungt at I har målt problemet. Start med billeder, JavaScript, fonts og unødvendige widgets - ofte større gevinster med lavere risiko.
Hvad sker der hvis contain-intrinsic-size er forkert?
Browseren reserverer forkert plads - det giver layout-hop, scrollbar der hopper eller dårligere CLS. I skal kalibrere intrinsic sizes eller acceptere faste blokhøjder for sektioner I lazy-render.
Virker det i Safari og Firefox?
Understøttelse har ændret sig - tjek aktuel Can I use og test på jeres målgruppes browsere før I bygger kritisk UI kun på denne teknik.
Er content-visibility det samme som lazy loading af billeder?
Nej. Lazy loading af billeder udskyder hentning af billedfiler. content-visibility handler om at springe layout/paint over for DOM-undertræer der ikke er nær viewport endnu. Begge kan bidrage til hurtigere første skærm, men løser forskellige problemer.
Næste skridt fra begreb til handling
Guides og blogindlæg der matcher begrebets emne - ud fra fælles tags og sidens fokus.
Fix CLS: sådan gør du layout stabilt uden hop i indholdet
Lær hvordan du reducerer CLS med faste dimensioner, aspect ratio, stabile embeds og korrekt font loading, så siden ikke hopper under indlæsning.
Undgå CLS fra fonts: font-display, preload og stabile fallbacks
Lær at undgå layout-hop (CLS) fra webfonts med font-display, fallback-strategi og korrekt preload. Guiden er til dig der vil have pæn typografi uden at ødelægge stabilitet.
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.
Fonts uden CLS: undgå layout hop fra webfonts og fallback fonts
Se hvordan font-display, preload, fallback fonts og font metrics påvirker CLS, og lær hvordan du gør tekst stabil fra første visning.
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.
