Core/Dash-dimensjon: LCP Priority

Dimensjon: Ressurs: LCP Priority

Dimensjonen LCP Priority 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 lastingen 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/High Priority).

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 "below the fold", er ditt optimaliserte Hero Image ikke lenger LCP. I stedet måler nettleseren det største elementet i gjeldende viewport. Dette skaper et uunngåelig sett med "Not Preloaded"-hendelser i datasettet ditt. Og det er helt greit!

1. Lazy Loaded 

Hvis mer enn 10 % av dine LCP-elementer havner i denne kategorien, har du identifisert et problem. Lazy loading-bilder settes i kø mye senere (av den trege DOM-parseren og 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 skal aldri lastes med lazy-load.

<!-- 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 standard nettleseratferd. Nettleseren oppdaget bildet i HTML-en under den innledende parsingen, men fikk ingen signaler om å prioritere det over andre bilder.

Effekten på pagespeed avhenger av kompleksiteten til nettsiden din. LCP-bildet havner i en kø for ressurskonkurranse. Hvis siden din har mange skript, fonter, andre ikke-lazy bilder 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. Denne preload-linken betyr i bunn og grunn en tidlig oppdagelse, selv om bildereferansen er begravd 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 nøyaktig. Hvis de ikke samsvarer, laster du ned en ressurs to ganger.

4. High fetchpriority

Dette er den moderne tekniske standarden. Nettleseren ble instruert via attributtet fetchpriority="high" om å 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 medfører.

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 (den 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 fontlastingsstrategi (font-display: swap), ettersom det ikke er noen bildefil å laste ned.

Arbeidsflyt: Optimalisering av Load Delay

Bruk denne dimensjonen til å validere din frontend-ressursstrategi.

1. Eliminer Lazy Loading: Filtrer på Lazy Loaded. Hvis denne verdien er større enn 0 %, finn komponenten som legger til loading="lazy" på hero-bildet og fjern det. Dette er vanlig i CMS-maler som bruker 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 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 tvinge frem en Preload-header.

Tommelfingerregel for utviklere

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 havner i "Not Preloaded" representerer en uoptimalisert tilstand hvor du overgir kontrollen over ressursprioritering til nettleserens standardheuristikk.