Core/Dash-dimensjon: LCP-prioritet

Dimensjon: Ressurs: LCP-prioritet

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

Dette er ditt primære revisjonsverktøy for Load Delay. Det avslører om din LCP-ressurs kjemper om båndbredde eller blir kunstig forsinket av feilaktige HTML-attributter.

Prioritetshierarkiet

Nettleseren tildeler en nedlastingsprioritet til hver ressurs. Denne dimensjonen kartlegger LCP-elementet til en av fem spesifikke lastetilstander, rangert fra mest destruktiv (Lazy Loaded) til mest optimal (Tekst/Høy prioritet).

Bakgrunn: Når en bruker returnerer til siden din via "Tilbake"- eller "Oppdater"-knappen, returnerer de fleste nettlesere dem til deres forrige vertikale posisjon. Hvis denne posisjonen er under folden (skjermkanten), er ikke lenger ditt optimaliserte heltebilde LCP. I stedet måler nettleseren det største elementet i den nåværende visningsporten. Dette skaper et uunngåelig sett med "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 identifisert et problem. Lazy load-bilder settes i kø mye senere (av den trege DOM-parseren og ikke den raske preload-skanneren). Attributtet loading="lazy" instruerer nettleseren til å vente med nedlastingen til oppsettet er beregnet og elementet er nær visningsporten.

Løsningen: Du må fjerne dette laste-attributtet. LCP-elementet skal aldri lazy-loades.

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

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

2. Not Preloaded

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

Innvirkningen på sidehastigheten avhenger av kompleksiteten til nettsiden din. LCP-bildet går inn i en kø der ressurser kjemper om plassen. Hvis siden din har mange skript, skrifttyper, andre bilder (som ikke er lazy-loadet) eller stiler som skal lastes ned, kan nettleseren forsinke nedlastingen av dette bildet, noe som øker Load Delay.

3. Preloaded

Dette indikerer at ressursen ble oppdaget via en <link rel="preload">-tagg i dokumentets head-seksjon. Disse preload-lenkene betyr i bunn og grunn en tidlig oppdagelse, selv om bildereferansen er begravet dypt i DOM-en eller 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-tagg som må matche bilde-URL-en eksakt. Hvis de ikke stemmer overens, vil du laste ned ressursen to ganger.

4. High fetchpriority

Dette er den moderne tekniske standarden. 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, og løfter det over andre ressurser i nedlastingskøen uten vedlikeholdsarbeidet som manuelle preload-tagger krever.

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 medfører null Load Delay (det er allerede til stede i HTML-dokumentet).

Optimaliseringen: Hvis din LCP er i denne kategorien, men fortsatt treg, er flaskehalsen utelukkende Render Delay. Du må optimalisere din Critical Rendering Path (CSS/JS-blokkering) eller din skrifttypestrategi (font-display: swap), ettersom det ikke er noen bildefil å laste ned.

Arbeidsflyt: Optimalisering av Load Delay

Bruk denne dimensjonen til å validere frontend-ressursstrategien din.

1. Eliminer Lazy Loading: Filtrer på Lazy Loaded. Hvis denne verdien er større enn 0 %, finn komponenten som legger til loading="lazy" på heltebildet og fjern det. Dette er vanlig i CMS-maler som aktiverer lazy loading globalt for 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 din <head> og kobler prioritetslogikken direkte til komponenten.
3. Revider bakgrunnsbilder: Hvis du har høyt volum i Not Preloaded og din LCP er et bakgrunnsbilde, oppdager nettleseren det for sent (først etter at CSS er parset). Du må refaktorere dette til en HTML <img>-tagg med fetchpriority="high" eller fremtvinge en Preload-header.

Teknisk tommelfingerregel

Ditt distribusjonsmål 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 faller under "Not Preloaded" representerer en uoptimalisert tilstand hvor du overgir kontrollen over ressursprioritering til nettleserens standardheuristikk.