Kort fortalt: Render delay er det frustende scenarie hvor LCP-elementet i princippet kunne være klar, men browseren først tegner (paint) det senere. Derfor kan PSI vise noget i stil med:
- TTFB: lav
- Resource load delay: lav/moderat
- Resource load time: lav/moderat
- Element render delay: høj
Det er en “browser-side” flaskehals, ikke et server-svar.
Hvad betyder render delay?
LCP er ikke kun “download”. Det er en kæde:
- HTML modtages
- Browseren parser HTML
- CSS og JS opdages og hentes
- CSS parses og styles beregnes
- Layout beregnes
- Paint/composite tegner pixels
Render delay er den del hvor punkt 2–6 (især 4–6) tager tid.
Hvorfor er det vigtigt?
Render delay er ofte grunden til at en side kan have:
- ok netværk og caching
- men stadig en “tung” følelse ved første visning
Det er også her du finder mange af de forbedringer der ikke handler om “komprimer billeder”, men om:
- færre blokeringer
- mindre arbejde på main thread
- billigere paint
Typiske årsager (i prioriteret rækkefølge)
1) Render-blocking CSS
Hvis kritisk CSS hentes sent eller er for stor, kan browseren ikke tegne hurtigt. Se:
2) Fonts og typografi
Webfonts kan skabe FOIT/FOUT og påvirke hvornår tekst bliver “færdig” i sin endelige form. Se:
3) Main-thread arbejde (JS + rendering)
Store scripts, hydration og tredjepart kan blokere. Se:
4) Dyr paint/composite (visuelle effekter)
Store gradients, blur, fixed overlays, mask-image, store shadows – især på mobil – kan gøre første paint dyr. Det er ofte overset, fordi det “bare er CSS”.
5) Layout thrashing og store layout-beregninger
Hvis du måler og skriver DOM forkert, kan browseren lave layout igen og igen. Se:
Hvordan finder du årsagen (praktisk)
- Kør Lighthouse/PSI og se LCP-elementet.
- Optag page load i Chrome DevTools Performance.
- Kig efter:
- lange “Recalculate Style”, “Layout”, “Paint”
- lange JS-blokke før første paint
- ressource-kæder i Waterfall-analyse
Hvis render delay dominerer, er det sjældent nok bare at optimere TTFB eller billeder.
Hvad du typisk gør først (konkrete greb)
- Reducér render-blocking CSS (split, critical CSS, fjern unødige imports).
- Skær tredjepart ned eller udsæt det.
- Gør hero-området lettere at male: færre dyre effekter, færre fixed overlays.
- Sørg for at LCP-elementet er “meningsfuldt” (ofte H1/hero) og ikke en tilfældig paragraf der tilfældigvis er størst.
Relaterede begreber
- LCP – hvad LCP måler
- Waterfall-analyse – se kæder og prioritet
- Preload og Preconnect – når netværk/opdagelse er en del af problemet
FAQ
Hvorfor kan render delay være høj når TTFB er lav?
Fordi render delay handler om arbejde i browseren efter HTML er modtaget: parsing, CSS, layout, paint, JS og prioritering. Du kan have hurtig server og stadig langsom første paint.
Er render delay altid et JS-problem?
Nej. Det kan være JS, men det kan også være dyre visuelle effekter, store gradients, render-blocking CSS, fonts eller layout thrashing.
Eksterne kilder
Google beskriver LCP-opdelingen, og DevTools forklarer rendering-trinnene.
Næste skridt fra begreb til handling
Guides og blogindlæg der matcher begrebets emne - ud fra fælles tags og sidens fokus.
Gør hero til LCP: sådan ændrer du struktur, CSS og prioritering
Hvis LCP bliver en tilfældig paragraf i stedet for hero, får du både dårligere tal og en måling der ikke matcher brugerens første indtryk. Her er en konkret metode til at få hero (H1/billede) til at blive LCP – uden at snyde.
Brug fetchpriority og preload rigtigt på de vigtigste ressourcer
Få en praktisk guide til hvordan du bruger fetchpriority og preload på billeder, fonts og CSS uden at overstyre browseren forkert.
Fjern render blocking CSS og JavaScript for hurtigere første visning
Lær hvordan du reducerer render blocking fra CSS og JavaScript, så siden viser indhold hurtigere og giver bedre FCP og LCP.
Hvordan du spotter render delay (uden at stirre på score)
Render delay er ofte grunden til at LCP bliver 1–2 sekunder for sent, selv når TTFB ser fin ud. Her er metoden til at finde årsagen hurtigt – og vælge den rigtige type fix.
Fetchpriority, preload og preconnect: hvornår de hjælper og hvornår de gør skade
Lær hvornår fetchpriority, preload og preconnect faktisk forbedrer load, og hvornår de bare skaber mere støj og dårlig prioritering i browseren.
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.
