Core/Dash Dimension: LCP Priority

Dimension: Ressource: LCP Priority

Die Dimension LCP Priority segmentiert Leistungsdaten basierend darauf, wie der Browser die LCP-Ressource entdeckt und priorisiert hat. Während die Dimension "Element Type" Ihnen mitteilt, um was für ein Element es sich handelt (Text vs. Bild), verrät Ihnen diese Dimension, warum der Browser das Laden verzögert hat.

Dies ist Ihr wichtigstes Audit-Tool für Load Delay. Es deckt auf, ob Ihr LCP-Asset um Bandbreite kämpft oder durch falsche 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 vom destruktivsten (Lazy Loaded) bis zum optimalsten (Text/High Priority).

Hintergrund: Wenn ein Benutzer über die "Zurück"- oder "Neu laden"-Schaltfläche auf Ihre Seite zurückkehrt, bringen die meisten Browser ihn an seine vorherige vertikale Position zurück. Wenn sich diese Position below the fold (im nicht direkt sichtbaren Bereich) befindet, ist Ihr optimiertes Hero-Bild nicht mehr das LCP. Stattdessen misst der Browser das größte Element im aktuellen Viewport. Dies erzeugt in Ihrem Datensatz unvermeidlich eine Reihe von "Not Preloaded"-Ereignissen. Und das ist völlig in Ordnung!

1. Lazy Loaded

Wenn mehr als 10% Ihrer LCP-Elemente in diesen Bereich fallen, haben Sie ein Problem identifiziert. Lazy Loading-Bilder werden viel später in die Warteschlange eingereiht (durch den langsamen DOM-Parser und nicht durch den schnellen Preload-Scanner). Das loading="lazy"-Attribut weist den Browser an, mit dem Download zu warten, bis das Layout berechnet ist 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 werden.

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

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

2. Not Preloaded

Dies stellt das Standardverhalten des Browsers dar. Der Browser hat das Bild während des initialen Parsings im HTML entdeckt, erhielt aber kein Signal, es gegenüber anderen Bildern zu priorisieren.

Die Auswirkungen auf die Ladegeschwindigkeit hängen von der Komplexität Ihrer Webseite ab. Das LCP-Bild reiht sich in eine Warteschlange für umkämpfte Ressourcen ein. Wenn Ihre Seite viele Skripte, Schriftarten, andere Non-Lazy-Bilder oder Styles herunterladen muss, verzögert der Browser möglicherweise den Download dieses Bildes, was das 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 bedeuten im Grunde eine frühe Entdeckung, selbst wenn die Bildreferenz tief im DOM vergraben oder in einer CSS-Datei versteckt ist (Hintergrundbild).

Preloading ist der effektivste Weg, um einen frühen Download zu erzwingen. Preloading erfordert jedoch die Pflege eines separaten Link-Tags, das exakt mit der Bild-URL übereinstimmen muss. Wenn diese voneinander abweichen, laden Sie ein Asset doppelt herunter.

4. High fetchpriority

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

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

5. Not an Image

Status: Text Node / SVG

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

Die Optimierung: Wenn Ihr LCP in diese Kategorie fällt, aber immer noch langsam ist, besteht der Engpass ausschließlich im Render Delay. Sie müssen Ihren Critical Rendering Path (CSS/JS-Blockierung) oder Ihre Font-Loading-Strategie (font-display: swap) optimieren, da es keine Bilddatei herunterzuladen gibt.

Workflow: Load Delay optimieren

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

1. Lazy Loading eliminieren: Filtern Sie nach Lazy Loaded. Wenn dieser Wert größer als 0% ist, finden Sie die Komponente, die loading="lazy" zum Hero-Bild hinzufügt, und entfernen Sie es. Dies ist bei CMS-Templates üblich, die Lazy Loading global auf alle Medien anwenden.
2. Zu Fetchpriority migrieren: 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 Prioritätslogik direkt an die Komponente.
3. Hintergrundbilder auditieren: Wenn Sie ein hohes Volumen bei Not Preloaded haben und Ihr LCP ein Hintergrundbild ist, entdeckt der Browser es zu spät (erst nachdem das CSS geparst wurde). Sie müssen dies in ein HTML-<img>-Tag mit fetchpriority="high" refaktorieren oder einen Preload-Header erzwingen.

Engineering-Faustregel

Ihr Verteilungsziel für diese 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 unoptimierten Zustand dar, in dem Sie die Kontrolle über die Ressourcenpriorität den Standard-Heuristiken des Browsers überlassen.