Optimer cookie banner uden CLS og INP problemer

Mange cookie-bannere er kopieret fra standard-skabeloner uden hensyn til layoutstabilitet og interaktionsbudget. Resultatet er CLS når boksen lander, og INP når consent-SDK kører tung logik på main thread. Denne guide hjælper dig med at justere eller bygge et banner, så det bliver mere stabilt og mindre tungt - uden at gøre kort proces med lovkrav (i tvivl: juridisk rådgivning).

Hvornår er den relevant? Når I måler dårlig CLS eller INP på sider med banner, eller når brugere oplever at siden «hopper» eller klik føles langsomme ved samtykke.

Hvornår denne guide er relevant

Tegn på at banneret skaber problemer

Højt CLS i de første sekunder, eller INP-problemer ved klik på banner-knapper.

Hvad brugeren typisk oplever

Indhold der flytter sig, eller forsinket respons når de accepterer.

Det skal du undersøge først

Hvordan banneret loader

Synkront i head? Via tag manager? Sent i body?

Hvilke scripts der følger med

Consent-platform, tag manager, marketing - kortlæg kæden.

Om indholdet skubbes

Sammenlign screenshots før/efter banner vises.

Trin 1: Kortlæg den nuværende løsning

Overlay eller inline banner

Overlay ændrer ofte mindre i layout end en bjælke der skubber indhold - men overlay kan stadig give CLS hvis det ikke er forberedt.

Tredjeparts consent platform eller egen løsning

Platforme er hurtige at implementere men kan være tunge - I skal stadig konfigurere timing og scope.

Den praktiske tommelfingerregel (så banneret ikke bliver en “perf-bremse”)

Et cookie banner er (perf-mæssigt) to problemer:

• geometri: flytter det layoutet, eller kan det vises uden at skubbe indhold?
• arbejde: hvad sker der på main thread når banneret vises, åbnes, og når brugeren klikker?

Hvis du løser geometri uden at tænke JS, får du ofte lavere CLS men stadig dårlig INP ved “Accepter”. Hvis du løser JS uden at tænke geometri, får du ofte hurtige klik men layout-hop når banneret lander.

Trin 2: Tjek for CLS problemer

Banner der skubber indhold ned

Flyt banner til overlay eller reservér plads med min-height på container.

Sen indsprøjtning

Hvis banneret kommer via JS efter LCP, kan det flytte indhold - overvej server-side eller tidligere placering af skelettet.

Manglende reserveret plads

Brug aspect-ratio eller fast højde på baren.

Konkret mønster der ofte virker på content-sites

• Fixed overlay nederst (ikke i normal dokument-flow)
• kendt højde og stabil padding
• minimal markup der kan styles tidligt (så banneret ikke “popper” ind)

Eksempel (idé – ikke en fuld CMP):

<div id="cookie-banner" class="cookie-banner" hidden>
  <p>Vi bruger cookies til statistik og forbedringer.</p>
  <div class="cookie-actions">
    <button type="button" data-accept>Accepter</button>
    <button type="button" data-settings>Indstillinger</button>
  </div>
</div>

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  min-height: 88px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

Trin 3: Tjek for INP probleme

Tunge scripts

Flyt ikke-kritisk logik til efter første interaktion eller idle.

Blokerende klik

Undgå at køre store opdateringer synkront på klik - split opgaver.

For mange afhængigheder

Reducer kæden af scripts der kører ved «Accepter».

Typisk INP-killer: “accept = load alt”

Hvis “Accepter” udløser at I loader tag manager + analytics + A/B + session replay + chat i samme tick, kan klik-eventen blive en lang task på mobil.

Praktisk mønster:

• accept gemmes hurtigt (lokalt) og UI lukker med det samme
• tung loading starter efter luk (fx setTimeout(..., 0) / idle) og gerne i batches

Trin 4: Gør banneret visuelt stabilt

Fast placering

Bund eller overlay med kendt geometri.

Undgå layout hop

Match typografi og knapstørrelser så UI ikke reflow’er når webfont loader.

Gør første visning roligere

Undgå unødige animationer der starter samtidig med LCP.

Trin 5: Begræns belastningen fra scripts

Kun det nødvendige tidligt

Consent-kernen - ikke hele marketing-stakken.

Resten efter handling eller accept

Når lovgivningen tillader det.

Undgå unødig blocking

Se render-blocking hvis jeres eget CSS/JS forstærker problemet.

Trin 6: Test igen

Mobil og desktop

CLS og INP varierer.

Før og efter

Samme metode som ved andre performance-ændringer.

Samtykke accepteret og ikke accepteret

Marketing kan ændre belastning efter accept.

Typiske fejl

Banneret ses ikke som en del af performance arbejdet

Det er en del af jeres frontend.

Flere lag af consent scripts

Én sandhed om samtykke - færre duplikerede SDK’er.

Der testes kun visuelt

Brug målinger.

Checkliste

• Stabil visning uden tydelige hop under LCP
• Ingen store CLS-spikes ved banner-load
• Klik på accept/indstillinger føles responsive (INP)

Sådan kontrollerer du resultatet (konkret)

1. CLS
   • optag en Performance-trace på “første load uden accept”
   • tjek at banneret ikke skubber hero/overskrift
2. INP / klik-latens
   • optag mens du klikker “Accepter” og “Indstillinger”
   • find om der ligger lange tasks direkte efter klik
3. Bivirkninger
   • virker consent logik stadig (cookies sættes korrekt, tracking er korrekt gated)
   • virker siden uden JS-fejl

Afslutning

Opsummering: stabil geometri, mindre tidlig JS, og test på tværs af tilstande og enheder.

Læs baggrunden i cookie banner og Core Web Vitals, og fortsæt med CLS og layout samt INP og JavaScript.

Relaterede guides

Fjern eller udsæt tunge tredjeparts scripts uden at ødelægge funktionalitet

2026-03-26

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

2026-03-25

Lær hvordan du bruger DevTools til at finde lange tasks, tunge event handlers og JavaScript der gør siden træg at bruge.

Forbedr INP ved at reducere JavaScript og lange tasks

2026-03-05

Få bedre interaktivitet ved at trimme JavaScript, splitte bundles og fjerne lange tasks, der gør siden langsom at bruge.

Undgå CLS fra fonts: font-display, preload og stabile fallbacks

2026-03-30

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.

Fix CLS: sådan gør du layout stabilt uden hop i indholdet

2026-02-20

Lær hvordan du reducerer CLS med faste dimensioner, aspect ratio, stabile embeds og korrekt font loading, så siden ikke hopper under indlæsning.

Sådan fejlsøger du LCP fra start til slut

2026-03-27

Følg en praktisk arbejdsgang til at finde årsagen til høj LCP, fra serverrespons og render blocking til billeder, prioritering og netværksrækkefølge.

FAQ

Kan et cookie banner skade LCP?

Indirekte ja: hvis banneret skubber eller skjuler LCP-elementet, eller hvis tunge scripts forsinker rendering. Fokus er ofte CLS og INP, men helheden påvirker første visning.

Hvordan undgår jeg at banneret giver CLS?

Reservér plads med kendt højde, undgå sent indsprøjtet indhold der skubber hero, og brug overlay der ikke flytter hovedlayout - se [CLS-guiden](/guides/fix-cls-layout-stabilitet/).

Skal consent script altid loade først?

Kun den del der er nødvendig for at vise lovpligtige valg og gemme samtykke. Marketing og analytics kan ofte vente til efter accept eller til idle - afhængigt af jeres juridiske setup.

Næste skridt efter guiden

Brug emnesider, ordbog og blog til at validere og uddybe næste ændring.

Se relaterede emnerLæs forklarende blogindlægTjek begreber i ordbogSe hele ordbogen (A–Å)