Core/Dash Dimension: LCP Priority

Dimension: Resource: LCP Priority

Dimensionen LCP Priority segmenterer performance-data 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 audit-værktøj til Load Delay. Det afslører, om dit LCP-aktiv kæmper om båndbredde eller bliver kunstigt forsinket af forkerte HTML-attributter.

Prioritetshierarkiet

Browseren tildeler en download-prioritet til hver ressource. Denne dimension kortlægger LCP-elementet til en af fem specifikke indlæsningstilstande, rangeret fra mest destruktiv (Lazy Loaded) til mest optimal (Text/High Priority).

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

1. Lazy Loaded 

Hvis mere end 10% af dine LCP-elementer optræder i denne kategori, har du identificeret et problem. Lazy loading-billeder sættes i kø meget senere (af den langsomme DOM-parser og ikke den hurtige preload-scanner). loading="lazy"-attributten  instruerer browseren til at vente med  downloaden, indtil layoutet er beregnet, og elementet er tæt på viewporten.

Løsningen: Du skal fjerne denne loading-attribut. LCP-elementet må aldrig være lazy-loaded.

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

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

2. Not Preloaded

Dette repræsenterer standard browseradfærd. Browseren opdagede billedet i HTML'en under den indledende parsing, men fik intet signal om at prioritere det over andre billeder.

Indvirkningen på pagespeed afhænger af kompleksiteten af din webside. LCP-billedet indgår i en ressource-konfliktkø. Hvis din side har mange scripts, skrifttyper, andre ikke-lazy billeder eller styles, der skal downloades, kan browseren forsinke downloaden af dette billede, hvilket øger Load Delay.

3. Preloaded

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 i DOM'en eller skjult i en CSS-fil (baggrundsbillede).

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

4. High fetchpriority

Dette er den moderne tekniske standard. Browseren blev instrueret via fetchpriority="high"-attributten til 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 vedligeholdelsesomkostningerne ved manuelle preload-tags.

5. Not an Image

Status: Text Node / SVG

LCP-elementet er en tekstblok (h1, p) eller en rå SVG. Dette er den ideelle arkitektoniske tilstand, da tekst har nul Load Delay (det er allerede til stede i HTML-dokumentet).

Optimeringen: Hvis din LCP er i denne kategori, men stadig er langsom, er flaskehalsen udelukkende Render Delay. Du skal optimere din Critical Rendering Path (CSS/JS-blokering) eller din font-indlæsningsstrategi (font-display: swap), da der ikke er nogen billedfil at downloade.

Workflow: Optimering af Load Delay

Brug denne dimension til at validere din frontend-ressourcestrategi.

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

Teknisk tommelfingerregel

Dit distributionsmål for denne dimension er strengt:

• <10% Lazy Loaded
• > 90% High fetchpriority (for Billede-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 over ressourceprioritet til browserens standardheuristikker.