Core/Dash Dimensie: LCP Priority

LCP Load Delay oplossen door de specifieke laadstrategie van je grootste content-element te auditen.

Gratis proefperiode [include]partners.html[\/include]

Dimensie: Resource: LCP Priority

De LCP Priority-dimensie segmenteert prestatiegegevens op basis van hoe de browser de LCP-resource heeft ontdekt en geprioriteerd. Waar de dimensie "Element Type" 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.

coredash metric table urls

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 meest destructief (Lazy Loaded) tot meest optimaal (Tekst\/High Priority).

Achtergrond: Wanneer een gebruiker terugkeert naar je pagina via de "Terug"- of "Vernieuwen"-knop, brengen de meeste browsers hen 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 het huidige viewport. Dit creëert een onvermijdelijke set "Not Preloaded"-gebeurtenissen in je dataset. En dat is volkomen normaal!

1. Lazy Loaded

Als meer dan 10% van je LCP-elementen in deze categorie verschijnt, heb je een probleem geïdentificeerd. Lazy loading afbeeldingen worden veel later in de wachtrij geplaatst (door de trage DOM-parser en niet door 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 in de buurt van het viewport is.

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 enkel 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 wachtrij voor resources. Als je pagina veel skripts, fonts, andere niet-lazy afbeeldingen of stijlen 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 verborgen zit of in een CSS-bestand (achtergrondafbeelding).
Preloading is de meest effectieve manier om een vroege download te forceren. Preloading vereist het onderhouden van een aparte link-tag die exact moet overeenkomen met de afbeeldings-URL. Als ze uit elkaar gaan lopen, 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 geeft het belang direct op het element aan, 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 blok tekst (h1, p) of een kale SVG. Dit is de ideale architecturale staat omdat tekst geen Load Delay oploopt (het is al aanwezig in het HTML-document).


De Optimalisatie: Als je LCP in deze categorie valt maar nog steeds traag is, is de bottleneck uitsluitend 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 groter is dan 0%, zoek dan de component die loading="lazy" toevoegt aan de hero image en verwijder dit. 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 een achtergrondafbeelding is, 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 Nyrkkisääntö


    Je distributiedoel voor deze dimensie is strikt: