Core/Dash Dimension: LCP-prioritet

Dimensjon: Ressurs: LCP-prioritet

Dimensjonen LCP-prioritet segmenterer ytelsesdata basert på hvordan nettleseren oppdaget og prioriterte LCP-ressursen. Mens dimensjonen «Elementtype» forteller deg hva elementet er (tekst vs. bilde), forteller denne dimensjonen deg hvorfor nettleseren forsinket lastingen av det.

Dette er ditt primære revisjonsverktøy for lasteforsinkelse. Det avslører om LCP-ressursen din kjemper om båndbredde, eller om den blir kunstig forsinket av feil HTML-attributter.

Prioritetshierarkiet

Nettleseren tildeler en nedlastingsprioritet til hver ressurs. Denne dimensjonen kartlegger LCP-elementet til en av fem spesifikke lastetilstander, rangert fra den mest ødeleggende (Lazy Loaded) til den mest optimale (Text/High Priority).

Bakgrunn: Når en bruker går tilbake til siden din via «Tilbake»- eller «Oppdater»-knappen, sender de fleste nettlesere dem tilbake til den forrige vertikale posisjonen. Hvis denne posisjonen er under bretten, er ikke det optimaliserte hero-bildet ditt lenger LCP-en. I stedet måler nettleseren det største elementet i gjeldende viewport. Dette skaper en uunngåelig mengde «Not Preloaded»-hendelser i datasettet ditt. Og det er helt i orden!

1. Lazy Loaded

Hvis mer enn 10 % av LCP-elementene dine havner i denne kategorien, har du avdekket et problem. Bilder med lazy loading legges i kø mye senere (av den trege DOM-parseren, ikke den raske preload-skanneren). Attributtet loading="lazy" instruerer nettleseren om å vente med nedlastingen til layouten er beregnet og elementet er nær viewporten.

Løsningen: Du må fjerne dette loading-attributtet. LCP-elementet må aldri bruke lazy loading.

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

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

2. Not Preloaded

Dette representerer nettleserens standardoppførsel. Nettleseren oppdaget bildet i HTML-koden under den første parsingen, men fikk ingen signaler om å prioritere det over andre bilder.

Effekten på sidehastigheten avhenger av hvor kompleks nettsiden din er. LCP-bildet havner i en ressurskonkurransekø. Hvis siden din har mange skript, fonter, andre bilder uten lazy loading eller stilark som skal lastes ned, kan nettleseren utsette nedlastingen av dette bildet. Dette øker lasteforsinkelsen.

3. Preloaded

Dette indikerer at ressursen ble oppdaget via en <link rel="preload">-tag i dokumentets head. Denne preloading-lenken betyr i praksis tidlig oppdagelse, selv om bildereferansen ligger dypt begravet i DOM-en eller er skjult i en CSS-fil (bakgrunnsbilde).

Preloading er den mest effektive måten å tvinge frem en tidlig nedlasting på. Men preloading krever vedlikehold av en separat link-tag som må samsvare nøyaktig med bildets URL. Hvis de blir forskjellige, laster du ned ressursen to ganger.

4. High fetchpriority

Dette er den moderne utviklerstandarden. Nettleseren ble instruert via attributtet fetchpriority="high" til å behandle dette spesifikke bildet som en kritisk ressurs.

Strategien: Dette er måltilstanden for bildebasert LCP. Det signaliserer viktighet direkte på elementet. Dette løfter det over andre ressurser i nedlastingskøen, uten vedlikeholdsbyrden som følger med manuelle preload-tagger.

5. Not an Image

Status: Tekstnode / SVG

LCP-elementet er en tekstblokk (h1, p) eller en rå SVG. Dette er den ideelle arkitektoniske tilstanden, fordi tekst gir null lasteforsinkelse (den er allerede til stede i HTML-dokumentet).

Optimaliseringen: Hvis LCP-en din er i denne kategorien, men fortsatt er treg, er flaskehalsen utelukkende gjengivelsesforsinkelse. Du må optimalisere den kritiske renderingsbanen (CSS/JS-blokkering) eller strategien for fontlasting (font-display: swap), siden det ikke finnes noen bildefil å laste ned.

Arbeidsflyt: Optimalisere lasteforsinkelse

Bruk denne dimensjonen til å validere ressursstrategien for frontenden din.

1. Eliminer lazy loading: Filtrer på Lazy Loaded. Hvis denne verdien er over 0 %, må du finne komponenten som legger til loading="lazy" på hero-bildet, og fjerne den. Dette er vanlig i CMS-maler som aktiverer lazy loading globalt på alle medier.
2. Migrer til fetchpriority: Flytt trafikk fra Not Preloaded og Preloaded til High fetchpriority. Å erstatte <link rel="preload"> med fetchpriority="high" rydder opp i <head> og kobler prioriteringslogikken direkte til komponenten.
3. Analyser bakgrunnsbilder: Hvis du har høyt volum i Not Preloaded og LCP-en din er et bakgrunnsbilde, oppdager nettleseren det for sent (først etter at CSS er parset). Du må refaktorere dette til en HTML-<img>-tag med fetchpriority="high", eller tvinge frem en Preload-header.

Teknisk tommelfingerregel

Distribusjonsmålet ditt for denne dimensjonen er strengt:

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

All trafikk som havner under «Not Preloaded», representerer en uoptimalisert tilstand der du overlater kontrollen over ressursprioritering til nettleserens standardheuristikk.