Largest Contentful Paint verbessern, ohne Entwickler zu sein

Wenn jemand sagt, eine Website "fühlt sich langsam an", dann meint er meistens nicht die Zeit bis zum ersten Pixel. Er meint den Moment, in dem das eigentliche Bild der Seite endlich da ist. Genau dieses Gefühl misst Largest Contentful Paint, kurz LCP.

LCP ist eine der Core Web Vitals und steht für die Zeit, bis das grösste sichtbare Element im Viewport geladen ist. Das ist meist ein Hero-Bild, ein grosser Headline-Block oder ein Video-Thumbnail. Bleibt diese Stelle zu lange leer oder grau, wirkt die Seite zäh, egal wie schnell der Server tatsächlich antwortet.

Warum dich LCP überhaupt interessieren sollte

LCP ist nicht nur ein Wert in einem Tool. Er beschreibt, wie schnell ein Besucher das Gefühl bekommt, "auf der Seite angekommen zu sein". In der Praxis hat das spürbare Folgen:

• Längere LCP-Zeiten erhöhen die Wahrscheinlichkeit, dass jemand abbricht.
• Mobile Nutzer reagieren empfindlicher als Desktop-Nutzer.
• Suchmaschinen werten LCP als Teil der Nutzererfahrung.

Du musst nicht jeden Wert auswendig kennen. Wichtig ist, dass eine Seite in den ersten zwei bis zweieinhalb Sekunden visuell "steht". Alles dahinter wird langsam zu echtem Reibungsverlust.

Was LCP in der Realität bremst

Die Ursachen sind selten exotisch. Meistens ist es eine Kombination aus wenigen, sehr typischen Punkten:

• das LCP-Element ist ein zu grosses, unkomprimiertes Bild
• der Server liefert die HTML-Antwort spät
• Skripte oder Tracking-Code laden vor dem Hauptinhalt
• Schriften blockieren den Aufbau der Seite
• das Layout hängt von extern gehosteten Elementen ab

Du musst diese Liste nicht selbst abarbeiten. Aber du solltest erkennen, wenn jemand in einem Angebot "Performance-Optimierung" verspricht, ohne ein einziges dieser Themen anzusprechen.

Hebel, die nichts mit Code zu tun haben

Vieles an LCP entscheidet sich, bevor jemand die erste Zeile Code schreibt. Drei Punkte fallen besonders oft ins Gewicht:

• die Bildgrösse und das Bildformat des Hero-Visuals
• die Anzahl an Drittanbieter-Skripten, die direkt im Header laden
• die Frage, ob ein eigenes Hero-Video überhaupt nötig ist

Diese Entscheidungen liegen meistens auf der Marketingseite. Wer hier strenger filtert, gewinnt mehr Performance, als jede technische Mikrooptimierung später aufholen kann.

Bilder als grösste Bremse

In den meisten Projekten ist das LCP-Element ein Bild. Das macht Bilder zur stärksten Stellschraube. Worauf es ankommt:

• die Originaldatei ist nicht zehnmal so gross wie nötig
• moderne Formate wie WebP oder AVIF werden ausgespielt
• es werden mehrere Auflösungen für verschiedene Geräte erzeugt
• die Datei liegt nicht hinter einem trägen externen Service

Die technische Umsetzung gehört in das CMS und in die Bildpipeline. Tieferes Detail dazu findest du im Beitrag zum Thema Bilder auf der Website richtig optimieren.

Schriften und Skripte ruhig halten

Viele Seiten verlieren LCP-Zeit nicht durch ein einziges grosses Bild, sondern durch viele kleine Anfragen, die früh ausgelöst werden. Typische Kandidaten sind:

• mehrere Webfont-Familien in voller Schnittbreite
• Tag-Manager, der weitere Skripte nachlädt
• Chat-Widgets, A/B-Tools oder Cookie-Banner-Skripte
• Karten, die schon vor dem Sichtkontakt rendern

Hier hilft kein einzelner Trick. Es hilft eine ehrliche Inventur dessen, was wirklich auf jeder Seite laden muss. Welche Auswirkung Schriften alleine haben, sieht man gut im Beitrag Webfonts und Performance: ein heikles Verhältnis.

Was du als Auftraggeber sinnvoll prüfen kannst

Du musst keine Devtools öffnen, um eine grobe Einschätzung zu bekommen. Ein paar einfache Fragen reichen:

• Wie schwer ist das Hero-Bild im Quelltext der Startseite?
• Wie viele externe Skripte laden vor dem Hauptinhalt?
• Lädt das LCP-Element schon, bevor der Cookie-Banner fertig ist?
• Liegt der Mobile-Wert deutlich schlechter als der Desktop-Wert?

Wer diese Fragen sauber beantworten kann, hat meistens auch ein gutes Bild davon, wo die wirklichen Bremsen sitzen.

Pragmatische Reihenfolge

Statt parallel an allem zu drehen, lohnt eine klare Reihenfolge:

• LCP-Element identifizieren
• Bild oder Block dahinter so klein und sauber wie möglich machen
• alles abhängen, was nicht zwingend vor diesem Element laden muss
• Schriften und Drittanbieter erst danach im Detail anpacken

Diese Reihenfolge ist nicht spektakulär, aber sie führt schneller zu spürbarem Effekt als jede einzelne Mikrooptimierung. LCP gehört in den grösseren Rahmen der Core Web Vitals, die wir an anderer Stelle ausführlicher einordnen.

Fazit und nächster Schritt

LCP ist kein abstrakter Wert. Er beschreibt, wie geduldig deine Besucher mit der Seite sein müssen, bevor sie überhaupt ankommen. Wenn dieser Eindruck schon kippt, ist jede weitere Optimierung im Funnel teurer.

Wenn du nicht sicher bist, wie deine Seite an dieser Stelle steht, lässt sich das in einer ruhigen Bestandsaufnahme meist schnell einordnen. Oft reicht ein kurzer Blick, um zu sehen, ob das Problem im Bild, im Stack oder in der Drittanbieter-Last liegt.