Preload er et resource hint, der fortæller browseren, at en bestemt fil er vigtig for den aktuelle side. Det angives normalt med <link rel="preload"> i dokumentets <head>. Browseren kan dermed begynde at hente filen, før den møder den i CSS, JavaScript eller længere nede i HTML’en.

Det mest relevante formål er at afkorte netværkskæden frem mod Largest Contentful Paint (LCP). Hvis et hero-billede først opdages efter CSS, et script eller en lazy-load-løsning, kan en korrekt preload få billedets download i gang tidligere. Det samme kan gælde den ene webfont, som er nødvendig for den første synlige tekst.

Preload er prioritering, ikke komprimering

Preload gør ikke en fil mindre og fjerner ikke dens dekoderings- eller eksekveringstid. Det ændrer udelukkende, hvornår browseren forsøger at hente filen. Derfor virker det bedst på få, veldokumenterede flaskehalse i critical rendering path. Et preload-tag på en ressource, der ikke bruges på den aktuelle side, er spild af båndbredde.

Browseren har allerede en avanceret prioriteringsmodel. Hvis du preloader mange billeder, flere skrifttyper, scripts og stylesheets, tilsidesætter du den model uden at skabe ekstra kapacitet. HTML, Critical CSS og LCP-ressourcen kan i stedet komme til at kæmpe om den samme mobilforbindelse.

Praktiske WordPress-eksempler

På en WordPress-forside er det ofte hero-billedet, der bør undersøges først. Det skal være et reelt <img> med korrekte dimensioner, ikke et CSS-baggrundsbillede gemt i flere stylesheets. WordPress’ responsive billeder betyder også, at preload skal angive den rigtige filvariant; en preload af desktop-versionen må ikke tvinge en stor fil ned på mobil.

  • Preload højst det billede, der faktisk er LCP i hver vigtig skabelon.
  • Angiv korrekt as-type, eksempelvis image eller font.
  • Brug crossorigin ved cross-origin fonts, så filen ikke hentes to gange.
  • Forbind preload af fonts med font-display, så tekst fortsat er synlig under hentning.
  • Undgå preload af scripts, der først behøves efter interaktion.

Sådan måler og retter du preload

Find først LCP-elementet i Chrome DevTools eller Google PageSpeed Insights. I Network-panelet skal du kontrollere, hvornår den relevante fil opdages, starter og afslutter. Tilføj derefter ét preload og sammenlign med samme cache-tilstand og netværksprofil. Se også efter advarsler om “preloaded but not used”.

Hvis LCP ikke forbedres, er årsagen ofte en anden: langsom server, et for tungt billede, render-blocking CSS eller et billedformat uden passende responsive størrelser. Fjern preloads, der ikke giver dokumenteret effekt. Et enkelt præcist hint er værdifuldt; en række gæt i <head> er det sjældent.