Emner / render-blocking
Render-blocking ressourcer er typisk CSS og synkrone scripts der forsinker browserens mulighed for at tegne indhold. Resultatet er længere tid til første synlige pixel og ofte dårligere LCP. Her samler vi guides og artikler om critical CSS, defer/async-strategier og hvordan du afbalancerer “hurtig første paint” med vedligeholdelig kode.
Mange temaer og frameworks loader store CSS-bundles globalt. Indholdet her hjælper dig med at diagnosticere hvad der rent faktisk blokerer i dit waterfall, og hvilke dele du trygt kan udskyde eller opdele. Vi advarer også mod at inline alt for meget CSS uden strategi - det kan skade caching og gøre HTML tung.
Render-blocking hænger sammen med JavaScript: scripts i head uden `defer` kan stoppe HTML-parsing. Emnet suppleres derfor af javascript- og performance-indhold, så du ser helheden i stedet for at flytte flaskehalsen et andet sted hen.
Efter læsning bør du kunne åbne DevTools Network, pege på de tidlige blokkerende requests, og prioritere dem der påvirker første viewport. Det er den mest pålidelige måde at undgå tilfældig optimering på.
Husk at “fjerne render-blocking” ikke er det samme som “fjerne CSS”: du flytter ofte arbejdet til senere i kæden eller splitter det i mindre bidder. Målet er at minimere det der blokerer *første* meningsfulde visning.
Eksterne kilder du kan bruge til at validere målinger: PageSpeed Insights, web.dev Vitals og DevTools Performance.
Start her
- Gør hero til LCP - seneste guide i emnet
- Hvordan du spotter render delay - seneste blogindlæg i emnet
- Slå relaterede begreber op i ordbogen
Relaterede begreber (ordbog)
Guides
Guide
Gør hero til LCP
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.
Guide
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.
Guide
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.
Blogindlæg
Blog
Hvordan du spotter render delay
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.
Blog
Fetchpriority, preload og preconnect
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.
Blog
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.
Fortsæt i emneklyngen
Gå videre til relaterede sidetyper for at dække emnet fra flere vinkler.