Vorgeladenes LCP-Bild

Silktide prüft, ob das Hauptbild auf Ihrer Seite – das größte Element, das Besucher beim Laden sehen – früher erscheinen könnte, wenn der Browser angewiesen wird, es eher abzurufen. Seiten wirken geladen, sobald ihr größter Inhalt sichtbar ist; daher entscheidet oft genau dieses eine Bild darüber, wie schnell sich die gesamte Seite anfühlt.

Der Zeitpunkt, an dem dieses Bild erscheint, wird als Largest Contentful Paint (LCP) gemessen, einer von Googles .

Warum das wichtig ist

Browser laden Dateien ungefähr in der Reihenfolge herunter, in der sie sie entdecken, und das Hauptbild wird oft erst spät gefunden – versteckt hinter Stylesheets und Skripten, aus referenziert oder von einem Skript eingefügt. Das Ergebnis ist eine Seite, die ihr Gerüst schnell aufbaut und dann eine Lücke dort lässt, wo der wichtigste Inhalt sein sollte.

Weil Besucher die Geschwindigkeit danach beurteilen, wann der Hauptinhalt sichtbar wird, und Google den LCP in das Suchranking einbezieht, gehört es zu den wirkungsvollsten Maßnahmen, dem Browser mitzuteilen, dass er genau diese eine Datei priorisieren soll.

So beheben Sie das

Vorladen Sie das Bild, damit der Browser es gleich zu Beginn des Ladevorgangs abruft:

<!-- Im <head>: Hero-Bild sofort abrufen -->
<link rel="preload" as="image" href="hero.jpg" fetchpriority="high">

Alternativ, wenn es sich um ein einfaches <img>-Element handelt, fügen Sie direkt fetchpriority="high" hinzu.
Laden Sie dieses Bild niemals per – loading="lazy" beim Hauptbild verzögert genau das, was zuerst kommen sollte.
Bevorzugen Sie für das Hauptbild ein schlichtes <img>-Element gegenüber einem CSS-Hintergrundbild, damit der Browser es frühzeitig selbstständig entdecken kann.

So testet Silktide das

Laden Sie die Seite in einem echten Browser, mit dem für Ihre Geschwindigkeitstests konfigurierten Gerätetyp, der Verbindungsgeschwindigkeit und dem Teststandort.
Ermitteln Sie beim Laden das größte sichtbare Inhaltselement. Handelt es sich um ein Bild, prüfen Sie, wann der Browser es entdeckt und heruntergeladen hat.
Wenn ein früherer Abruf das Bild schneller erscheinen ließe, meldet Silktide dies mit der geschätzten Zeitersparnis.

Fehlerbehebung

Das Hauptbild ändert sich zwischen Seiten oder Geräten

Preload-Hinweise gelten pro Seite, und das „größte“ Element kann sich zwischen Desktop- und Mobil-Layouts unterscheiden. Template-Logik kann pro Seite den passenden Preload ausgeben; die Attribute media und imagesrcset am Hinweis decken responsive Varianten ab.

Ich habe das Bild vorab geladen, aber der Hinweis bleibt bestehen

Die Preload-URL muss exakt mit dem übereinstimmen, was die Seite letztlich rendert – eine anders große Variante oder eine von einem umgeschriebene URL zählt nicht. Prüfen Sie außerdem, dass sich der Hinweis direkt im -Head der Seite befindet und nicht erst später von einem Skript eingefügt wird; sonst geht der Zweck verloren.