Core/Dash Dimension: LCP-Priorität

Dimension: Ressource: LCP-Priorität

Die Dimension LCP-Priorität segmentiert Leistungsdaten basierend darauf, wie der Browser die LCP-Ressource entdeckt und priorisiert hat. Während die Dimension "Elementtyp" Ihnen sagt, was das Element ist (Text vs. Bild), sagt Ihnen diese Dimension, warum der Browser das Laden verzögert hat.

Dies ist Ihr primäres Audit-Tool für die 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, geordnet vom destruktivsten (Lazy Loaded) bis zum optimalsten (Text/Hohe Priorität).

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

1. Lazy Loaded

Wenn mehr als 10 % Ihrer LCP-Elemente in diesem Bucket erscheinen, 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 Attribut loading="lazy" weist den Browser an, mit dem Download zu warten, bis das Layout berechnet ist und sich das Element in der Nähe des Ansichtsfensters befindet.

Die Lösung: Sie müssen dieses Ladeattribut entfernen. Das LCP-Element sollte niemals per Lazy-Loading geladen werden.

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

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

2. Not Preloaded

Dies stellt das Standardverhalten des Browsers dar. Der Browser hat das Bild beim ersten Parsen im HTML entdeckt, erhielt jedoch kein Signal, es gegenüber anderen Bildern zu priorisieren.

Die Auswirkung auf die Pagespeed hängt von der Komplexität Ihrer Webseite ab. Das LCP-Bild wird in eine Ressourcen-Warteschlange eingereiht. Wenn Ihre Seite viele Skripte, Schriftarten, andere Non-Lazy-Bilder oder Stile herunterladen muss, verzögert der Browser möglicherweise den Download dieses Bildes, was die Load Delay erhöht.

3. Preloaded

Dies weist darauf hin, dass die Ressource über ein <link rel="preload">-Tag im Dokumentenkopf 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 (Hintergrundbild) versteckt ist.

Preloading ist der effektivste Weg, um einen frühen Download zu erzwingen. Preloading erfordert 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 Entwicklungsstandard. Der Browser wurde über das Attribut fetchpriority="high" angewiesen, dieses spezifische Bild als kritische Ressource zu behandeln.

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

5. Kein Bild

Status: Textknoten / SVG

Das LCP-Element ist ein Textblock (h1, p) oder eine rohe 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 dennoch langsam ist, liegt der Engpass ausschließlich bei der Render Delay. Sie müssen Ihren Critical Rendering Path (blockierendes CSS/JS) oder Ihre Strategie zum Laden von Schriftarten (font-display: swap) optimieren, da keine Bilddatei heruntergeladen werden muss.

Workflow: Optimierung der Load Delay

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 diese. Dies kommt häufig in CMS-Vorlagen vor, 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 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.

Technische Faustregel

Ihr Verteilungsziel für diese Dimension ist streng:

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

Jeder Traffic, der in "Not Preloaded" fällt, stellt einen unoptimierten Zustand dar, in dem Sie die Kontrolle über die Ressourcenpriorität den Standardheuristiken des Browsers überlassen.