Core/Dash-dimension: LCP Priority

Dimension: Resurs: LCP Priority

Dimensionen LCP Priority segmenterar prestandadata baserat på hur webbläsaren upptäckte och prioriterade LCP-resursen. Medan dimensionen "Element Type" (Elementtyp) talar om vad elementet är (Text vs. Bild), förklarar den här dimensionen 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 kämpar om bandbredd eller fördröjs på konstgjord väg av felaktiga HTML-attribut.

Prioritetshierarkin

Webbläsaren tilldelar en nedladdningsprioritet till varje resurs. Den här dimensionen 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 "Uppdatera"-knappen, returnerar de flesta webbläsare dem till deras tidigare vertikala position. Om denna position är nedanför den synliga delen av skärmen (below the fold) är din optimerade Hero Image inte längre LCP. Istället mäter webbläsaren det största elementet i den aktuella vyn. Detta skapar en oundviklig mängd "Not Preloaded"-händelser i ditt dataset. Och det är helt i sin ordning!

1. Lazy Loaded

Om mer än 10% av dina LCP-element hamnar i den här kategorin har du identifierat ett problem. Lazy-laddade bilder köas mycket senare (av den långsamma DOM-tolken och inte den snabba preload-skannern). Attributet loading="lazy" instruerar webbläsaren att vänta med nedladdningen tills layouten är beräknad och elementet närmar sig den synliga vyn.

Åtgärden: Du måste ta bort detta laddningsattribut. LCP-elementet ska aldrig lazy-laddas.

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

<!-- KORREKT -->
<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 inledande tolkningen men fick ingen signal om att prioritera den över andra bilder.

Inverkan på sidhastigheten beror på din webbsidas komplexitet. LCP-bilden hamnar i en kö med konkurrerande resurser. 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-sektion. Dessa preload-länkar innebär i grunden en tidig upptäckt, även om bildreferensen är begravd djupt i DOM:en eller gömd i en CSS-fil (bakgrundsbild).

Preloading är det mest effektiva sättet att tvinga fram en tidig nedladdning, men det kräver underhåll av en separat länk-tagg som måste matcha bildens exakta URL. Om de hamnar ur synk kommer du att ladda ner en tillgång dubbelt.

4. High fetchpriority

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

Strategin: Detta är måltillståndet för bildbaserad LCP. Det signalerar viktighet direkt på elementet, vilket lyfter den över andra tillgångar i nedladdningskön utan underhållsbördan av manuella preload-taggar.

5. Not an Image

Status: Textnod / SVG

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

Optimeringen: Om din LCP tillhör den här kategorin men fortfarande är långsam, är flaskhalsen uteslutande Render Delay. Du måste optimera din Critical Rendering Path (blockerande CSS/JS) eller din laddningsstrategi för typsnitt (font-display: swap), eftersom det inte finns någon bildfil att ladda ner.

Arbetsflöde: Optimera Load Delay

Använd den här dimensionen för att validera din strategi för frontend-resurser.

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 tillämpar 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 i 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 tolkats). Du måste skriva om 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)
• 100% Not an image (för text-LCP)

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