Dimension Core/Dash: LCP Prioritet

Dimension: Ressource: LCP Prioritet

Dimensionen LCP Prioritet segmenterer performancedata baseret på, hvordan browseren opdagede og prioriterede LCP-ressourcen. Mens dimensionen "Element Type" fortæller dig, hvad elementet er (Tekst vs. Billede), fortæller denne dimension dig, hvorfor browseren forsinkede indlæsningen af det.

Dette er dit primære revisionsværktøj til Load Delay. Den afslører, om dit LCP-aktiv kæmper om båndbredde eller bliver kunstigt forsinket af forkerte HTML-attributter.

Prioritetshierarkiet

Browseren tildeler en downloadprioritet til hver ressource. Denne dimension knytter LCP-elementet til en af fem specifikke indlæsningstilstande, rangeret fra mest destruktiv (Lazy Loaded) til mest optimal (Tekst/High Priority).

Baggrund: Når en bruger vender tilbage til din side via knappen "Tilbage" eller "Genindlæs", returnerer de fleste browsere dem til deres tidligere vertikale position. Hvis denne position er under folden (below the fold), er dit optimerede Hero-billede ikke længere LCP. I stedet måler browseren det største element i den aktuelle visning (viewport). Dette skaber et uundgåeligt sæt af "Not Preloaded" (ikke forudindlæste) hændelser i dit datasæt. Og det er helt fint!

1. Lazy Loaded (Dovent indlæst)

Hvis mere end 10 % af dine LCP-elementer optræder i denne gruppe, har du identificeret et problem. Billeder, der indlæses dovent (lazy loading), sættes i kø meget senere (af den langsomme DOM-parser og ikke af den hurtige preload-scanner). Attributten loading="lazy" instruerer browseren om at vente med at downloade, indtil layoutet er beregnet, og elementet er i nærheden af visningsområdet.

Løsningen: Du skal fjerne denne indlæsningsattribut. LCP-elementet bør aldrig lazy-loades.

<!-- FORKERT -->
<img src="hero.jpg" loading="lazy" alt="Hero Image" />

<!-- RIGTIGT -->
<img src="hero.jpg" fetchpriority="high" alt="Hero Image" />

2. Not Preloaded (Ikke forudindlæst)

Dette repræsenterer standardadfærden for browsere. Browseren opdagede billedet i HTML'en under den indledende parsing, men fik ikke noget signal om at prioritere det over andre billeder.

Indvirkningen på pagespeed afhænger af kompleksiteten af din webside. LCP-billedet går ind i en kø med ressourcekonkurrence. Hvis din side har mange scripts, skrifttyper, andre ikke-dovent indlæste billeder eller styles, der skal downloades, kan browseren forsinke download af dette billede, hvilket øger Load Delay.

3. Preloaded (Forudindlæst)

Dette indikerer, at ressourcen blev opdaget via et <link rel="preload">-tag i dokumentets head. Disse preload-links betyder grundlæggende en tidlig opdagelse, selvom billedreferencen er begravet dybt nede i DOM'en eller skjult i en CSS-fil (baggrundsbillede).

Preloading er den mest effektive måde at fremtvinge en tidlig download på, preloading kræver vedligeholdelse af et separat link-tag, der skal matche billedets URL nøjagtigt. Hvis de driver fra hinanden, downloader du et aktiv dobbelt.

4. High fetchpriority (Høj hentningsprioritet)

Dette er den moderne ingeniørstandard. Browseren blev instrueret via attributten fetchpriority="high" i at behandle dette specifikke billede som en kritisk ressource.

Strategien: Dette er måltilstanden for billedbaseret LCP. Det signalerer vigtighed direkte på elementet, og løfter det over andre aktiver i downloadkøen uden den vedligeholdelsesbyrde, der er forbundet med manuelle preload-tags.

5. Not an Image (Ikke et billede)

Status: Tekstnode / SVG

LCP-elementet er en blok af tekst (h1, p) eller en rå SVG. Dette er den ideelle arkitektoniske tilstand, fordi tekst medfører et Load Delay på nul (det er allerede til stede i HTML-dokumentet).

Optimeringen: Hvis din LCP er i denne kategori, men stadig langsom, er flaskehalsen udelukkende Render Delay. Du skal optimere din kritiske rendering-sti (CSS/JS-blokering) eller din strategi for indlæsning af skrifttyper (font-display: swap), da der ikke er nogen billedfil at downloade.

Arbejdsgang: Optimering af Load Delay

Brug denne dimension til at validere din strategi for frontend-ressourcer.

1. Eliminer Lazy Loading: Filtrer efter Lazy Loaded. Hvis denne værdi er større end 0 %, skal du finde den komponent, der tilføjer loading="lazy" til hero-billedet, og fjerne den. Dette er almindeligt i CMS-skabeloner, der anvender lazy loading globalt på alle medier.
2. Migrer til Fetchpriority: Flyt trafik fra Not Preloaded og Preloaded til High fetchpriority. At erstatte <link rel="preload"> med fetchpriority="high" rydder op i din <head> og kobler prioritetslogik direkte til komponenten.
3. Gennemgå baggrundsbilleder (Audit Background Images): Hvis du har en høj volumen i Not Preloaded, og dit LCP er et baggrundsbillede, opdager browseren det for sent (først efter at CSS er parset). Du skal refaktorere dette til et HTML <img>-tag med fetchpriority="high" eller fremtvinge en Preload-header.

Tumregel for ingenjörer (Tommelfingerregel)

Dit distributionsmål for denne dimension er strengt:

• < 10 % Lazy Loaded
• > 90 % High fetchpriority (for billed-LCP'er)
• 100 % Not an image (for tekst-LCP'er)

Al trafik, der falder ind under "Not Preloaded", repræsenterer en uoptimeret tilstand, hvor du overgiver kontrollen med ressourceprioritet til browserens standardheuristik.