Core/Dash-dimensie: LCP Priority

Dimensie: Resource: LCP Priority

De LCP Priority-dimensie segmenteert prestatiedata op basis van hoe de browser de LCP-resource ontdekte en prioriteerde. Waar de dimensie "Element Type" vertelt wat het element is (tekst vs. afbeelding), toont deze dimensie waarom de browser het laden heeft vertraagd.

Dit is je primaire audit-tool voor laadvertraging. Het laat zien of je LCP-asset vecht om bandbreedte of kunstmatig wordt vertraagd door onjuiste HTML-attributen.

De prioriteitshiërarchie

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

Achtergrond: Wanneer een gebruiker terugkeert naar je pagina via de "Terug"- of "Herladen"-knop, sturen de meeste browsers hen terug naar hun vorige verticale positie. Als deze positie onder de vouw ligt, is je geoptimaliseerde hero-afbeelding niet langer de LCP. In plaats daarvan meet de browser het grootste element in de huidige viewport. Dit veroorzaakt een onvermijdelijke reeks "Not Preloaded"-events in je dataset. En dat is prima!

1. Lazy Loaded

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

De oplossing: Verwijder dit loading-attribuut. Het LCP-element mag nooit lazy-loaded worden.

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

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

2. Not Preloaded

Dit is 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 in een wachtrij voor resource-concurrentie terecht. Als je pagina veel scripts, lettertypen, andere niet-lazy afbeeldingen of stijlen moet downloaden, kan de browser het downloaden van deze afbeelding uitstellen, wat de laadvertraging verhoogt.

3. Preloaded

Dit geeft aan dat de resource is ontdekt via een <link rel="preload">-tag in de head van het document. Deze preload zorgt in feite voor een vroege ontdekking, zelfs als de verwijzing naar de afbeelding diep in de DOM zit of verborgen is in een CSS-bestand (achtergrondafbeelding).

Preloading is de meest effectieve manier om een vroege download af te dwingen. Dit vereist wel het onderhoud van een aparte link-tag die exact moet overeenkomen met de URL van de afbeelding. Als deze uit elkaar lopen, download je een asset dubbel.

4. High fetchpriority

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

De strategie: Dit is de doelstatus voor LCP op basis van afbeeldingen. Het geeft de prioriteit rechtstreeks 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 tekstblok (h1, p) of een raw SVG. Dit is de ideale architectonische staat omdat tekst nul laadvertraging veroorzaakt (het is immers al aanwezig in het HTML-document).

De optimalisatie: Als je LCP in deze categorie valt maar nog steeds traag is, ligt het knelpunt uitsluitend bij de rendervertraging. Je moet je Critical Rendering Path (blokkerende CSS/JS) of je font-laadstrategie (font-display: swap) optimaliseren, aangezien er geen afbeelding hoeft te worden gedownload.

Workflow: laadvertraging optimaliseren

Gebruik deze dimensie om je frontend-resourcestrategie 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-afbeelding 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 rechtstreeks aan de component.
3. Audit achtergrondafbeeldingen: Als je veel volume hebt in Not Preloaded en je LCP een achtergrondafbeelding is, ontdekt de browser deze te laat (pas nadat de CSS is geparseerd). Je moet dit refactoren naar een HTML-<img>-tag met fetchpriority="high" of een Preload-header afdwingen.

Vuistregel voor engineers

Je distributiedoel voor deze dimensie is strikt:

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

Al het verkeer dat onder "Not Preloaded" valt, vertegenwoordigt een niet-geoptimaliseerde status waarin je de controle over de resource-prioriteit overlaat aan de standaardheuristieken van de browser.