CoreDash Dimensie: LCP Priority

Dimensie: Resource: LCP Priority

De LCP Priority dimensie segmenteert prestatiedata op basis van hoe de browser de LCP resource heeft ontdekt en geprioriteerd. Terwijl de "Element Type" dimensie je vertelt wat het element is (Tekst vs. Afbeelding), vertelt deze dimensie je waarom de browser het laden ervan heeft vertraagd.

Dit is je primaire audit-tool voor Load Delay. Het onthult of je LCP asset vecht om bandbreedte of kunstmatig wordt vertraagd door onjuiste HTML attributen.

De Prioriteitshiërarchie

De browser kent een downloadprioriteit toe aan elke resource. Deze dimensie koppelt het LCP element aan een van de vijf specifieke laadstatussen, gerangschikt van het meest destructief (Lazy Loaded) tot het meest optimaal (Tekst/High Priority).

Achtergrond: Wanneer een gebruiker via de "Vorige"- of "Herlaad"-knop terugkeert naar je pagina, sturen de meeste browsers ze terug naar hun vorige verticale positie. Als deze positie onder de vouw (below the fold) ligt, is je geoptimaliseerde Hero Image niet langer de LCP. In plaats daarvan meet de browser het grootste element in de huidige viewport. Dit creëert een onvermijdelijke reeks "Not Preloaded" gebeurtenissen in je dataset. En dat is volkomen acceptabel!

1. Lazy Loaded 

Als meer dan 10% van je LCP-elementen in deze categorie valt, heb je een probleem geïdentificeerd. Lazy loading afbeeldingen worden veel later in de wachtrij geplaatst (door de trage DOM-parser en niet de snelle preload scanner). Het loading="lazy" attribuut instrueert de browser om te wachten met de download totdat de layout is berekend en het element zich in de buurt van de viewport bevindt.

De oplossing: Je moet dit loading-attribuut verwijderen. Het LCP element mag nooit lazy-loaded zijn.

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

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

2. Not Preloaded

Dit vertegenwoordigt het standaardgedrag van de browser. De browser ontdekte de afbeelding in de HTML tijdens de initiële parse, maar kreeg geen signaal om deze prioriteit te geven boven andere afbeeldingen.

De impact op de paginasnelheid hangt af van de complexiteit van je webpagina. De LCP afbeelding komt terecht in een resource-concurrentiewachtrij. Als je pagina veel scripts, fonts, andere niet-lazy afbeeldingen of styles moet downloaden, kan de browser het downloaden van deze afbeelding vertragen, wat de Load Delay verhoogt.

3. Preloaded

Dit geeft aan dat de resource is ontdekt via een <link rel="preload"> tag in de document head. Deze preload-links betekenen in feite een vroege ontdekking, zelfs als de afbeeldingsreferentie diep in de DOM begraven ligt of verborgen is in een CSS-bestand (achtergrondafbeelding).

Preloading is de meest effectieve manier om een vroege download af te dwingen. Preloading vereist het onderhouden van een aparte link-tag die exact overeen moet komen met de URL van de afbeelding. Als deze uiteenlopen, download je een asset dubbel.

4. High fetchpriority

Dit is de moderne technische standaard. De browser kreeg via het fetchpriority="high" attribuut de instructie om deze specifieke afbeelding als een kritieke resource te behandelen.

De strategie: Dit is de doelstatus voor op afbeeldingen gebaseerde LCP. Het signaleert belangrijkheid direct op het element, waardoor het boven andere assets in de downloadwachtrij wordt geplaatst zonder de onderhoudslast van handmatige preload-tags.

5. Not an Image

Status: Text Node / SVG

Het LCP element is een tekstblok (h1, p) of een ruwe SVG. Dit is de ideale architecturale staat omdat tekst nul Load Delay veroorzaakt (het is al aanwezig in het HTML-document).

De optimalisatie: Als je LCP in deze categorie valt maar nog steeds traag is, ligt de bottleneck uitsluitend bij Render Delay. Je moet je Critical Rendering Path (CSS/JS blokkering) of je font-laadstrategie (font-display: swap) optimaliseren, aangezien er geen afbeeldingsbestand is om te downloaden.

Workflow: Load Delay optimaliseren

Gebruik deze dimensie om je frontend resource-strategie te valideren.

1. Elimineer Lazy Loading: Filter op Lazy Loaded. Als deze waarde hoger is dan 0%, zoek dan de component die loading="lazy" toevoegt aan de hero image en verwijder deze. Dit komt vaak voor in CMS-templates die lazy loading globaal toepassen op alle media.
2. Migreer naar Fetchpriority: Verplaats verkeer van Not Preloaded en Preloaded naar High fetchpriority. Het vervangen van <link rel="preload"> door fetchpriority="high" schoont je <head> op en koppelt de prioriteitslogica direct aan de component.
3. Audit achtergrondafbeeldingen: Als je een hoog volume hebt in Not Preloaded en je LCP is een achtergrondafbeelding, ontdekt de browser deze te laat (pas nadat de CSS is geparst). Je moet dit refactoren naar een HTML <img> tag met fetchpriority="high" of een Preload header forceren.

Technische vuistregel

Je distributiedoel voor deze dimensie is strikt:

• <10% Lazy Loaded
• > 90% High fetchpriority (voor afbeelding-LCP's)
• 100% Not an image (voor tekst-LCP's)

Elk verkeer dat onder "Not Preloaded" valt, vertegenwoordigt een niet-geoptimaliseerde staat waarin je de controle over de resource-prioriteit overlaat aan de standaardheuristiek van de browser.