Hurtigere hjemmeside hjælp til en langsom hjemmeside

Priority Hints

Priority Hints er mekanismer til at påvirke hvordan browseren prioriterer ressourcer. I praksis møder du det især som `fetchpriority` på billeder/links – som kan flytte LCP, men også give bagslag.

Skrevet af Kim Tetzlaff

Kort fortalt: Priority Hints handler om at påvirke browserens prioritering af netværksrequests. I praksis bruger du det ofte via fetchpriority (fx på LCP-billedet), men det er vigtigt at forstå hvad det kan – og hvad det ikke kan.

Hvad betyder det i praksis?

Browseren prioriterer altid ressourcer:

  • HTML først
  • kritisk CSS højt (ofte render-blocking)
  • scripts afhænger af defer/async
  • billeder afhænger af placering, størrelse og heuristik

Problemet er: browserens heuristik kan tage fejl i din konkrete skabelon. Priority hints er en måde at give browseren et ekstra signal.

Hvorfor er det vigtigt for LCP?

LCP afhænger ofte af ét stort element:

  • et hero-billede
  • en stor tekstblok (hvor CSS/fonts og render delay kan dominere)

Hvis LCP-elementet er et billede, kan fetchpriority="high" og/eller Preload være det der gør at download starter tidligt nok.

Men: hvis LCP-elementet er tekst, hjælper det typisk mere at reducere render-blocking og rendering-arbejde (se render-blocking og Critical CSS).

Hvad fetchpriority kan og ikke kan

Det kan:

  • øge eller sænke prioriteten på en request som browseren allerede kender til
  • ændre konkurrencen mellem flere downloads på samme netværk

Det kan ikke:

  • få en ressource “opdaget” hvis den først kommer sent i HTML/JS
  • kompensere for langsom TTFB eller tung rendering
  • erstatte caching og gode headers

Typiske fejl

1) Sæt “high” på alt

Hvis alt er high, er intet high. Du kan også skade andre kritiske ressourcer, fx CSS eller scripts der er nødvendige for første paint.

2) Preload + fetchpriority uden at måle

Det kan give dobbelt-downloads (hvis du preloader forkert) eller bare flytte flaskehalsen. Brug Waterfall-analyse og DevTools.

3) Prioritér forkert billede

På mange sites er LCP-billedet ikke “det største i markup”, men det der ender med at blive størst i viewport. Hvis du prioriterer et forkert billede (fx logo), spilder du budget.

Sådan vælger du det rigtige (hurtig metode)

  1. Find LCP-elementet i Lighthouse/PSI.
  2. Se i waterfall hvornår request starter.
  3. Hvis den starter sent, så spørger du:
    • blev den opdaget sent? (HTML/JS/srcset)
    • eller var den lav prioritet?
  4. Brug derefter:
    • fetchpriority="high" hvis opdagelsen er tidlig men prioriteten er lav
    • preload hvis opdagelsen er for sen (med omtanke)

Relaterede begreber

  • fetchpriority – dit konkrete værktøj i markup
  • Preload – start download tidligt
  • HTTP prioritet – browserens netværksprioritering mere generelt
  • LCP – hvad du reelt prøver at forbedre

FAQ

Er Priority Hints det samme som preload?

Nej. `preload` starter en specifik download tidligt. Priority Hints påvirker prioriteten på en request, men den request skal stadig blive opdaget først. De kan kombineres, men det er ikke det samme.

Skal jeg sætte fetchpriority=high på alle billeder?

Nej. Det udvander effekten og kan stjæle båndbredde fra det vigtigste. Brug det typisk kun på et reelt LCP-billede eller et meget tidligt kritisk asset.

Eksterne kilder

Specifikationer og praktiske referencer for resource priority og fetchpriority.

Næste skridt fra begreb til handling

Guides og blogindlæg der matcher begrebets emne - ud fra fælles tags og sidens fokus.

Om forfatteren

Kim Tetzlaff

Kim skriver og vedligeholder indhold på hurtigere-hjemmeside.dk med fokus på målelig performance, Core Web Vitals og teknisk SEO. Målet er at gøre optimering konkret: hvad der faktisk flytter tal i feltdata, og hvordan du finder den korteste vej fra symptom til fix.

Kim Tetzlaff