LCP — wann sieht der Besucher etwas Brauchbares?

Das LCP-Element finden.

Ohne diesen Schritt rätselt man. Die Entwicklerwerkzeuge im Browser zeigen im Leistungsbereich eine Markierung, und das Testwerkzeug von Google benennt das Element direkt.

In der Praxis ist es fast immer eines von vier Dingen: das große Bild im Kopfbereich, das erste Slider-Bild, die Hauptüberschrift oder ein Video-Vorschaubild. Welches davon, entscheidet den weiteren Weg.

Wichtig: Das Element kann sich je nach Seitentyp und Bildschirmgröße unterscheiden. Prüfe deshalb mobil und am Rechner getrennt und sieh dir mehrere Seitentypen an.

Die vier Phasen.

Diese Aufteilung ist das wichtigste Werkzeug beim LCP. Sie verhindert, dass man Bilder komprimiert, obwohl das Problem die Serverantwortzeit war — ein Fehler, den ich oft sehe.

Phase 1: Serverantwort.

Die Zeit, bis der Server überhaupt antwortet. Ist sie hoch, bringt keine Optimierung am Bild etwas, weil der Browser noch gar nicht angefangen hat.

Übliche Ursachen: kein Seitencache, veraltete PHP-Version, langsame Datenbankabfragen, externe Aufrufe während des Seitenaufbaus, zu knappe Serverressourcen. Ein Seitencache ist hier das wirksamste Einzelmittel — er verwandelt eine gerechnete Seite in eine fertige Datei (Server zu langsam, Caching einrichten).

Richtwert: Unter 200 Millisekunden ist gut, über 600 wird es zum Hauptproblem.

Phase 2: Ladeverzögerung.

Die Zeit zwischen Serverantwort und dem Moment, in dem der Browser anfängt, das Element zu laden. Hohe Werte hier bedeuten: Der Browser hat das wichtigste Bild zu spät entdeckt.

Die Gründe, in der Reihenfolge ihrer Häufigkeit:

• Das Bild wird verzögert geladen. Verzögertes Laden ist für Bilder weiter unten richtig und für das wichtigste Bild im ersten Bildschirm falsch — nimm es dort ausdrücklich aus.
• Das Bild steckt in einem Skript, etwa einem Slider. Dann muss erst das Skript laufen, bevor das Bild überhaupt bekannt ist.
• Blockierende Ressourcen davor: Stylesheets und Skripte im Kopfbereich, die erst geladen werden müssen (Blockierende Ressourcen).
• Das Bild liegt als Hintergrundbild im CSS, wird also erst entdeckt, wenn das CSS verarbeitet ist.

Das Gegenmittel für die Fälle eins und vier: Das wichtigste Bild als echtes Bildelement einbinden und es mit einem Vorlade-Hinweis versehen, damit der Browser sofort damit anfängt. Vorladen aber sparsam einsetzen — wer fünf Dinge vorlädt, priorisiert nichts mehr.

Phase 3: Ladedauer.

Hier geht es um Dateigröße. Ein Kopfbild mit zwei Megabyte braucht auf einer Mobilverbindung mehrere Sekunden, egal wie gut der Rest ist.

Was hilft: modernes Bildformat statt JPEG, passende Größe statt Riesenbild, mehrere Größen für verschiedene Bildschirme und eine ordentliche Komprimierung. Das ist zusammen oft eine Reduktion um achtzig Prozent, ohne sichtbaren Qualitätsverlust (Bilder optimieren).

Phase 4: Anzeigeverzögerung.

Das Bild ist da, wird aber noch nicht gezeigt. Üblicher Grund: Eine Schrift wird erwartet, oder ein Skript baut das Element erst zusammen. Wenn hier viel Zeit steckt, lohnt der Blick auf die Schriftenbehandlung (Schriften optimieren).

Wenn es ein Bild ist.

1. Verzögertes Laden ausschalten für dieses eine Bild.
2. Als echtes Bildelement einbinden, nicht als CSS-Hintergrund.
3. Hohe Priorität setzen oder vorladen.
4. Breite und Höhe angeben, das hilft zugleich dem CLS.
5. Modernes Format und mehrere Größen.
6. Vom selben Server ausliefern oder zumindest die Verbindung früh aufbauen.

Punkt eins und drei zusammen sind oft eine Verbesserung um eine ganze Sekunde — für eine Änderung, die zehn Minuten dauert.

Wenn es Text ist.

Ist das LCP-Element eine Überschrift, hängt alles an zwei Dingen: der Serverantwortzeit und der Schrift. Eine Schrift, die geladen werden muss, bevor der Text erscheint, verzögert das LCP um genau diese Ladezeit.

Die Lösung ist, den Text sofort mit einer Systemschrift anzuzeigen und später auf die eigene Schrift zu wechseln. Das erzeugt ein kurzes Umspringen, ist aber dem leeren Bildschirm vorzuziehen — und mit einer gut gewählten Ersatzschrift fällt es kaum auf (Schriften).

Der Slider-Fehler.

Ein eigener Abschnitt, weil es so häufig ist. Ein Bildslider im Kopfbereich ist fast immer die Ursache für ein schlechtes LCP, und zwar aus mehreren Gründen gleichzeitig: Das Bild steckt in einem Skript, das Skript muss erst geladen und ausgeführt werden, oft werden alle Bilder geladen statt nur dem ersten, und das Element verschiebt sich beim Aufbau.

Die ehrliche Frage ist, ob der Slider überhaupt etwas bringt. Erfahrungsgemäß sehen die meisten Besucher nur das erste Bild, und die hinteren Inhalte werden kaum wahrgenommen. Ein einzelnes starkes Bild mit klarer Aussage ist schneller und wirkt meist besser.

Wenn der Slider bleiben soll: erstes Bild statisch im HTML, alle weiteren verzögert, Skript nachrangig laden, feste Höhe für den Bereich.

Typische Fehler.

• Bilder komprimiert, obwohl das Problem die Serverantwortzeit war.
• Verzögertes Laden pauschal für alle Bilder aktiviert.
• Zu viel vorgeladen, damit nichts mehr priorisiert.
• Nur die Startseite optimiert, während Produktseiten schlecht bleiben.
• Nur am Rechner gemessen.
• Externe Bildquelle ohne frühen Verbindungsaufbau.

Prüfweg.

1. LCP-Element bestimmen, mobil und am Rechner.
2. Phasen aufschlüsseln.
3. Größte Phase angehen, nicht die offensichtlichste.
4. Erneut messen mit demselben Werkzeug.
5. Mehrere Seitentypen gegenprüfen.
6. Nach einigen Wochen die Felddaten ansehen.

Wenn du nicht weiterkommst.

Wenn dein LCP schlecht ist und die Empfehlungsliste des Testwerkzeugs dir nicht sagt, wo du anfangen sollst. Ich messe deine Seite mit echten Nutzerdaten statt mit einem einzelnen Test, sortiere die Befunde nach Wirkung und behebe die, die zählen: Ladezeit optimieren. Dauerhaft begleitet die WordPress-Wartung — damit neue Inhalte die Werte nicht wieder kaputt machen.

Orientierungswerte, keine Fixpreise — nach einem kurzen Gespräch bekommst du ein Festpreisangebot.

Wer hilft.

Ich bin Manuel Killert, Webentwickler aus Quakenbrück. Ich mache Websites schneller — und zwar messbar, nicht gefühlt. Das heißt: erst messen, dann die zwei oder drei Stellen beheben, die tatsächlich den Unterschied machen, dann noch einmal messen.

Was ich nicht mache: eine Punktzahl schönrechnen. Es gibt Tricks, mit denen ein Testwerkzeug hundert Punkte zeigt, während die Seite für echte Besucher gleich langsam bleibt. Das ist Selbstbetrug, und ich sage dir, wenn jemand dir so etwas verkauft hat.

Ich arbeite mit dem, was du hast — Theme, Plugins, Hoster. Ein Neubau ist manchmal die ehrlichere Antwort, und dann sage ich das auch, statt monatelang an einer Seite zu optimieren, die grundsätzlich falsch gebaut ist.