CoreDash Dimension: LCP Priority

Dimension: Resource: LCP Priority

Die Dimension LCP Priority segmentiert Performance-Daten basierend darauf, wie der Browser die LCP-Ressource entdeckt und priorisiert hat. Während die Dimension „Element Type“ angibt, um was für ein Element es sich handelt (Text vs. Bild), erklärt diese Dimension, warum der Browser das Laden verzögert hat.

Dies ist Ihr primäres Audit-Tool für den Load Delay. Es zeigt auf, ob Ihr LCP-Asset um Bandbreite kämpft oder durch fehlerhafte HTML-Attribute künstlich verzögert wird.

Die Prioritätshierarchie

Der Browser weist jeder Ressource eine Download-Priorität zu. Diese Dimension ordnet das LCP-Element einem von fünf spezifischen Ladezuständen zu, eingestuft von am schädlichsten (Lazy Loaded) bis hin zu optimal (Text/High Priority).

Hintergrund: Wenn ein Nutzer über die Schaltflächen „Zurück“ oder „Neu laden“ auf Ihre Seite zurückkehrt, führen die meisten Browser ihn an die vorherige vertikale Position. Falls diese Position below the fold liegt, ist Ihr optimiertes Hero Image nicht mehr das LCP. Stattdessen misst der Browser das größte Element im aktuellen Viewport. Dies führt zu einer unvermeidbaren Anzahl von „Not Preloaded“-Events in Ihrem Datensatz. Und das ist absolut in Ordnung!

1. Lazy Loaded 

Falls mehr als 10 % Ihrer LCP-Elemente in diesem Bereich erscheinen, haben Sie ein Problem identifiziert. Lazy loading Bilder werden deutlich später in die Warteschlange gestellt (durch den langsamen DOM-Parser statt durch den schnellen Preload-Scanner). Das loading="lazy" Attribut weist den Browser an, mit dem Download zu warten, bis das Layout berechnet wurde und sich das Element in der Nähe des Viewports befindet.

Die Lösung: Sie müssen dieses Lade-Attribut entfernen. Das LCP-Element sollte niemals lazy-loaded sein.

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

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

2. Not Preloaded

Dies entspricht dem Standardverhalten des Browsers. Der Browser hat das Bild im HTML während des initialen Parsens entdeckt, erhielt jedoch kein Signal, es gegenüber anderen Bildern zu priorisieren.

Die Auswirkung auf die Seitengeschwindigkeit hängt von der Komplexität Ihrer Webseite ab. Das LCP-Bild landet in einer Warteschlange für Ressourcenkonflikte. Falls Ihre Seite viele Scripte, Schriftarten, andere nicht-lazy Bilder oder Styles laden muss, verzögert der Browser unter Umständen den Download dieses Bildes, was den Load Delay erhöht.

3. Preloaded

Dies zeigt an, dass die Ressource über ein <link rel="preload"> Tag im Document Head entdeckt wurde. Diese Preload-Links ermöglichen eine frühzeitige Entdeckung, selbst wenn die Bildreferenz tief im DOM vergraben oder in einer CSS-Datei (Hintergrundbild) versteckt ist.

Preloading ist der effektivste Weg, einen vorzeitigen Download zu erzwingen. Es erfordert jedoch die Pflege eines separaten Link-Tags, das exakt mit der Bild-URL übereinstimmen muss. Weichen diese voneinander ab, wird ein Asset doppelt heruntergeladen.

4. High fetchpriority

Dies ist der moderne Engineering-Standard. Dem Browser wurde über das Attribut fetchpriority="high" befohlen, dieses spezifische Bild als kritische Ressource zu behandeln.

Die Strategie: Dies ist der Zielzustand für bildbasiertes LCP. Es signalisiert die Wichtigkeit direkt am Element und stuft es in der Download-Warteschlange über andere Assets hoch, ohne den Wartungsaufwand manueller Preload-Tags.

5. Not an Image

Status: Text Node / SVG

Das LCP-Element ist ein Textblock (h1, p) oder eine reine SVG. Dies ist der ideale architektonische Zustand, da Text keinen Load Delay verursacht (da er bereits im HTML-Dokument vorhanden ist).

Die Optimierung: Falls Ihr LCP in diese Kategorie fällt, aber dennoch langsam ist, liegt der Flaschenhals ausschließlich beim Render Delay. Sie müssen Ihren Critical Rendering Path (CSS/JS-Blocking) oder Ihre Font-Loading-Strategie (font-display: swap) optimieren, da keine Bilddatei heruntergeladen werden muss.

Workflow: Optimierung des Load Delay

Nutzen Sie diese Dimension, um Ihre Frontend-Ressourcenstrategie zu validieren.

1. Lazy Loading eliminieren: Filtern Sie nach Lazy Loaded. Falls dieser Wert höher als 0 % ist, identifizieren Sie die Komponente, die das loading="lazy" zum Hero Image hinzufügt, und entfernen Sie es. Dies tritt häufig bei CMS-Templates auf, die Lazy Loading global auf alle Medien anwenden.
2. Migration zu Fetchpriority: Verschieben Sie Traffic von Not Preloaded und Preloaded zu High fetchpriority. Das Ersetzen von <link rel="preload"> durch fetchpriority="high" bereinigt Ihren <head> und koppelt die Priorisierungslogik direkt an die Komponente.
3. Hintergrundbilder prüfen: Falls Sie ein hohes Volumen bei Not Preloaded haben und Ihr LCP ein Hintergrundbild ist, entdeckt der Browser dieses zu spät (erst nachdem das CSS geparst wurde). Sie müssen dies in ein HTML-<img>-Tag mit fetchpriority="high" umwandeln oder einen Preload-Header erzwingen.

Engineering-Faustregel

Ihr Ziel für die Verteilung in dieser Dimension ist strikt:

• < 10 % Lazy Loaded
• > 90 % High fetchpriority (für Bild-LCPs)
• 100 % Not an image (für Text-LCPs)

Jeglicher Traffic, der unter „Not Preloaded“ fällt, stellt einen nicht optimierten Zustand dar, in dem Sie die Kontrolle über die Ressourcenpriorisierung an die Standard-Heuristiken des Browsers abgeben.