Core/Dash-dimension: LCP-prioritet

Dimension: Resurs: LCP-prioritet

Dimensionen LCP-prioritet segmenterar prestandadata baserat på hur webbläsaren hittade och prioriterade LCP-resursen. Medan dimensionen ”Elementtyp” visar vad elementet är (text kontra bild), visar den här dimensionen varför webbläsaren fördröjde laddningen av det.

Detta är ditt primära granskningsverktyg för laddningsfördröjning. Det visar om din LCP-resurs slåss om bandbredd eller fördröjs på konstgjord väg av felaktiga HTML-attribut.

Prioriteringshierarkin

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 skadlig (Lazy Loaded) till mest optimal (Text/High Priority).

Bakgrund: När en användare går tillbaka till din sida via ”Bakåt”- eller ”Ladda om”-knappen, återför de flesta webbläsare dem till deras tidigare vertikala position. Om den här positionen är under skärmkanten är din optimerade hero-bild 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 din data. 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. Bilder med lazy loading läggs i kön mycket senare (av den långsamma DOM-parsern och inte av den snabba preload-skannern). Attributet loading="lazy" instruerar webbläsaren att vänta med hämtningen 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 laddas med lazy loading.

<!-- 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 initiala parsningen men fick ingen signal om att prioritera den framför andra bilder.

Inverkan på sidhastigheten beror på din webbsidas komplexitet. LCP-bilden hamnar i en kö för resurskonkurrens. Om din sida har många skript, typsnitt, andra icke-lazy-bilder eller stilar att hämta kan webbläsaren fördröja hämtningen av den här bilden, vilket ökar laddningsfördröjningen.

3. Preloaded

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

Preloading är det mest effektiva sättet att tvinga fram en tidig hämtning, men det kräver att du underhåller en separat länk-tagg som måste matcha bildens URL exakt. Om de skiljer sig åt dubbelhämtar du resursen.

4. High fetchpriority

Detta är den moderna utvecklingsstandarden. 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 prioritet direkt på elementet och lyfter upp det före andra resurser i hämtningskön, utan underhållsarbetet med 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 orsakar noll laddningsfördröjning (den finns redan i HTML-dokumentet).

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

Arbetsflöde: Optimera laddningsfördröjning

Använd den här dimensionen för att validera din resursstrategi för frontend.

1. Eliminera lazy loading: Filtrera på Lazy Loaded. Om det här värdet är större än 0 % letar du upp komponenten som lägger till loading="lazy" på hero-bilden och tar bort det. Detta är vanligt i CMS-mallar som tillämpar lazy loading globalt på alla medier.
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 prioriteringslogiken 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 refaktorera detta till en HTML-<img>-tagg med fetchpriority="high" eller tvinga fram en Preload-header.

Teknisk tumregel

Ditt fördelningsmål för den här dimensionen är strikt:

• <10% Lazy Loaded
• > 90% High fetchpriority (för bild-LCP:er)
• 100% Not an image (för text-LCP:er)

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