Core/Dash Dimension: LCP Priority

Dimension: Resource: LCP Priority

Dimensionen LCP Priority segmenterar prestandadata baserat på hur webbläsaren upptäckte och prioriterade LCP-resursen. Medan dimensionen "Element Type" talar om vad elementet är (Text vs. Bild), talar denna dimension om varför webbläsaren fördröjde laddningen av det.

Detta är ditt primära granskningsverktyg för Load Delay. Det avslöjar om din LCP-tillgång slåss om bandbredd eller fördröjs artificiellt av felaktiga HTML-attribut.

Prioritetshierarkin

Webbläsaren tilldelar en nedladdningsprioritet till varje resurs. Denna dimension mappar LCP-elementet till ett av fem specifika laddningstillstånd, rankade från mest destruktivt (Lazy Loaded) till mest optimalt (Text/High Priority).

Bakgrund: När en användare återvänder till din sida via "Bakåt"- eller "Ladda om"-knappen, återställer de flesta webbläsare dem till deras tidigare vertikala position. Om denna position är "below the fold" (nedanför den synliga ytan), är din optimerade Hero Image inte längre LCP. Istället mäter webbläsaren det största elementet i den aktuella viewporten. Detta skapar en oundviklig uppsättning "Not Preloaded"-händelser i ditt dataset.  Och det är helt okej!

1. Lazy Loaded 

Om mer än 10 % av dina LCP-element hamnar i denna kategori har du identifierat ett problem. Lazy loading-bilder köas mycket senare (av den långsamma DOM-parsern och inte den snabba preload-scannern). Attributet loading="lazy" instruerar webbläsaren att vänta med  nedladdningen tills layouten är beräknad och elementet är nära viewporten.

Lösningen: Du måste ta bort detta loading-attribut. LCP-elementet ska aldrig vara lazy-loaded.

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

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

2. Not Preloaded

Detta representerar webbläsarens standardbeteende. Webbläsaren upptäckte bilden i HTML-koden under den initiala parsningen men fick ingen signal om att prioritera den över andra bilder.

Inverkan på sidhastigheten beror på komplexiteten hos din webbsida. LCP-bilden hamnar i en kö för resurskonkurrens. Om din sida har många skript, typsnitt, andra icke-lazy-bilder eller stilar att ladda ner kan webbläsaren fördröja nedladdningen av denna bild, vilket ökar Load Delay.

3. Preloaded

Detta indikerar att resursen upptäcktes via en <link rel="preload">-tagg i dokumentets head. Dessa preload-länkar innebär i princip en tidig upptäckt, även om bildreferensen ligger djupt begravd i DOM:en eller är dold i en CSS-fil (bakgrundsbild).

Preloading är det mest effektiva sättet att tvinga fram en tidig nedladdning, men preloading kräver att man underhåller en separat länktagg som måste matcha bildens URL exakt. Om de skiljer sig åt laddar du ner en tillgång dubbelt.

4. High fetchpriority

Detta är den moderna tekniska standarden. Webbläsaren instruerades via attributet fetchpriority="high" att behandla denna specifika bild som en kritisk resurs.

Strategin: Detta är måltillståndet för bildbaserad LCP. Det signalerar viktighet direkt på elementet och lyfter det över andra tillgångar i nedladdningskön utan underhållskostnaden för manuella preload-taggar.

5. Inte en bild

Status: Textnod / SVG

LCP-elementet är ett textblock (h1, p) eller en rå SVG. Detta är det ideala arkitektoniska tillståndet eftersom text medför noll Load Delay (den finns redan i HTML-dokumentet).

Optimeringen: Om din LCP är i denna kategori men fortfarande långsam, är flaskhalsen uteslutande Render Delay. Du måste optimera din Critical Rendering Path (CSS/JS-blockering) eller din strategi för typsnittsladdning (font-display: swap), eftersom det inte finns någon bildfil att ladda ner.

Arbetsflöde: Optimera Load Delay

Använd denna dimension för att validera din resursstrategi för frontend.

1. Eliminera Lazy Loading: Filtrera på Lazy Loaded. Om detta värde är större än 0 %, hitta komponenten som lägger till loading="lazy" på hero-bilden och ta bort det. Detta är vanligt i CMS-mallar som applicerar lazy loading globalt på all media.
2. Migrera till Fetchpriority: Flytta trafik från Not Preloaded och Preloaded till High fetchpriority. Att ersätta <link rel="preload"> med fetchpriority="high" rensar upp din <head> och kopplar prioritetslogiken direkt till komponenten.
3. Granska bakgrundsbilder: Om du har hög volym i Not Preloaded och din LCP är en bakgrundsbild, upptäcker webbläsaren den för sent (först efter att CSS har parsats). Du måste refaktorisera detta till en HTML <img>-tagg med fetchpriority="high" eller tvinga fram en Preload-header.

Teknisk tumregel

Ditt distributionsmål för denna dimension är strikt:

• <10 % Lazy Loaded
• > 90 % High fetchpriority (för Bild-LCP:er)
• 100 % Inte en bild (för Text-LCP:er)

All trafik som hamnar i "Not Preloaded" representerar ett icke-optimerat tillstånd där du överlåter kontrollen över resursprioritering till webbläsarens standardheuristik.