Emner / images
Billeder er ofte den største vægt på en side og samtidig det mest almindelige LCP-element. Under emnet billeder samler vi guides og artikler om formater (WebP, AVIF), responsive `srcset` og `sizes`, lazy loading uden at skade LCP, og hvordan du balancerer kvalitet mod filstørrelse.
Du lærer også at skelne mellem problemer: et komprimeret billede kan stadig være for stort i pixeldimensioner, og et lille billede kan stadig loade for sent hvis det er skjult bag JavaScript eller CSS. Vores indhold lægger vægt på waterfall og målinger frem for “best practices” der ikke passer til dit konkrete layout.
Billeder hænger tæt sammen med CLS: hvis du ikke reserverer plads, skaber du layout-skift når mediet lander. Derfor supplerer emnet billeder naturligt CLS- og LCP-indhold. Følg rækkefølgen der matcher dit diagnosebillede - ikke en fast checkliste fra et generelt blogindlæg.
Når du har været igennem guiderne, er ordbogsider om AVIF, WebP, `srcset` og lazy loading gode opslagsværker. De hjælper dig med at holde terminologien skarp i teamet og i dokumentation.
Et sidste tjek: sørg for at dine billeder faktisk matcher de viewports du designer til - `sizes`-attributten skal afspejre layout, ellers sender du stadig for store filer selv med et perfekt `srcset`.
Eksterne kilder du kan bruge til at validere målinger: PageSpeed Insights, web.dev Vitals og DevTools Performance.
Start her
- Sådan fejlsøger du LCP fra start til slut - seneste guide i emnet
- Fetchpriority, preload og preconnect - seneste blogindlæg i emnet
- Slå relaterede begreber op i ordbogen
Relaterede begreber (ordbog)
Guides
Guide
Sådan fejlsøger du LCP fra start til slut
Følg en praktisk arbejdsgang til at finde årsagen til høj LCP, fra serverrespons og render blocking til billeder, prioritering og netværksrækkefølge.
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
Forbedr LCP med billeder
Lær hvordan du forbedrer LCP ved at optimere hero-billedet med rigtige dimensioner, AVIF eller WebP, preload og korrekt responsive opsætning.
Guide
Lazy-load billeder korrekt uden at skade LCP og brugeroplevelse
Se hvordan du bruger lazy loading rigtigt, undgår at skade LCP og vælger de billeder der skal prioriteres tidligt i stedet.
Blogindlæg
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
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.
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.