Kort fortalt: Prerender (i bred forstand) betyder at browseren før brugerens næste klik begynder at hente og eventuelt udføre en side eller route, så navigation føles næsten øjeblikkelig. Historisk har rel=prerender og tilsvarende mekanismer skiftet form; moderne browsere arbejder med mere kontrollerede API’er som Speculation Rules - men principperne er de samme: spekulation om næste skridt mod omkostning i CPU, netværk og privatliv.
Hvad du vinder
- Lavere oplevet ventetid ved navigation til en side brugeren ofte vælger (fx produkt → kurv, oversigt → artikel).
- Bedre oplevet “app-følelse” i SPAs, når bundter og data allerede ligger klar.
Hvad det koster
- Netværk: du downloader HTML, JS, CSS og måske billeder brugeren aldrig ser.
- CPU og batteri: parsing og JavaScript på mobil kan presse INP og termisk throttling hvis du er grådig.
- Server/CDN-last: hver prerender er i princippet et ekstra besøg.
- Privatliv og compliance: hvis næste side kører analytics eller sætter cookies, kan du udløse tracking før brugeren bevidst valgte siden - det skal afstemmes med samtykke og politikker.
Moderne tilgang (Speculation Rules m.fl.)
I stedet for “prerender alt” kan du typisk:
- angive hvilke URL’er der må spekuleres;
- begrænse hvornår (fx kun på hover eller når link er synligt);
- skelne mellem prefetch af dokument vs. fuld prerender med rendering.
Understøttelse og bedste praksis ændrer sig - tjek altid aktuel browserdokumentation for dit mål-publikum. Brug progressive enhancement: hvis spekulation fejler, skal siden stadig virke normalt.
Relation til prefetch og bfcache
- Prefetch er ofte mere begrænset og lavere risiko - god til at hente næste dokument “i baggrunden”.
- bfcache handler om tilbage/ frem navigation og gemmer eksisterende dokumenttilstand - det er ikke det samme som at forberede en ny URL du ikke har besøgt endnu.
Hvornår er prerender en dårlig idé?
- Siden er tung (store JS-bundler, tunge videoer) og få brugere går derhen.
- Siden er personlig (priser, konti, helbred) - risiko for at lække signaler eller vise forkert cache.
- Du har allerede dårlig INP - ekstra baggrundsarbejde kan forværre konkurrence om main thread.
Relaterede begreber
- Third-party scripts - ofte det der gør prerender farlig eller dyr
- JavaScript bundle - jo mindre JS, jo billigere er spekulation
- HTTP cache - nogle gange er bedre server-side caching billigere end aggressiv klient-prerender
FAQ
Er prerender det samme som prefetch?
Ofte nej i praksis: prefetch henter typisk ressourcer med lav prioritet. Prerender (eller speculation med rendering) kan gå længere og forberede en hel dokumenttilstand - med højere omkostning. Præcis adfærd afhænger af browser og API.
Er det GDPR-sikkert at prerender alt?
Nej. Du bør kun præ-forberede URL’er der er offentlige, ikke-personlige og som ikke trigger unødig databehandling. Tænk over login, personlige priser og marketing-tags.
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.
Sådan læser du en waterfall og finder flaskehalse i load
Lær at læse en waterfall korrekt og find problemer med TTFB, LCP, render blocking og tredjepart, så du kan prioritere den rigtige optimering.
