Largest Contentful Paint (LCP)

LCP misst, wie lange es dauert, bis das größte sichtbare Element einer Seite tatsächlich da ist. Wenn jemand sagt „die Seite hat sich beim Laden langsam angefühlt", geht es meistens um LCP: den Moment, in dem endlich was Sinnvolles auf dem Schirm steht.

LCP gehört zu den Core Web Vitals, Googles Standard-Set für Besuchererlebnis, und zählt fürs Suchranking.

Was ist ein guter LCP?Copy Anchor Link

LCP wird in Millisekunden gemessen und in drei Kategorien eingeteilt. Maßgeblich ist das 75. Perzentil über alle Seitenaufrufe, so wie Google es ausweist.

Was als „größtes inhaltliches Element" zähltCopy Anchor Link

Der Browser verfolgt das größte Element, das im sichtbaren Viewport fertig gerendert ist. Infrage kommen:

• <img> und <image> innerhalb von <svg>
• <video> (der Poster-Frame)
• Ein Element mit einer per CSS gesetzten background-image
• Block-Level-Textknoten

Die „Größe" ist die gerenderte Fläche am Schirm, geschnitten mit dem Viewport. Off-Screen-Inhalt zählt nicht, auch wenn er größer wäre.

Das „größte" kann sich beim Laden ändern. Der Browser emittiert LCP-Einträge, bis der Besucher interagiert (Klick, Scroll, Taste). Der letzte Eintrag vor dieser Interaktion ist der LCP-Wert.

Wann LCP reportet wirdCopy Anchor Link

LCP wird finalisiert:

• wenn der Besucher scrollt, klickt oder eine Taste drückt (was zuerst kommt), oder
• wenn die Seite versteckt wird (visibilitychange).

Der fastmon-Tracker greift den finalen LCP in genau diesem Moment ab und packt ihn in den nächsten gebündelten Payload.

BeispieleCopy Anchor Link

Marketing-Seite mit Hero-Bild. LCP ist fast immer das Hero-<img>. Liegt das Bild below the fold oder ist lazy-loaded, wird stattdessen ein Textblock zum LCP, meistens schneller.

SaaS-Dashboard mit Skeleton-Loader. LCP ist erst der Skeleton-Container, dann, sobald echter Content rendert, springt's auf das größte Daten-Element. Pass auf falsch-„schnelle" LCPs auf, die nur kommen, weil eine fette Skeleton-Box davor stand.

Artikel mit eingebettetem Video. LCP ist das Video-Poster, nicht der Text. Wenn du das Poster-Bild optimierst, verbesserst du den LCP, auch wenn der Besucher hinterher den Body liest.

LCP in fastmon ansehenCopy Anchor Link

Die LCP-Seite findest du unter Core Web Vitals → LCP. Zwei Kacheln zeigen den LCP mit Bewertung und den Anteil gemessener Seitenaufrufe.

• Wohin die Zeit geht: Serverantwort, Load Delay, Load Duration und Render Delay als ein Balken, gegen die Zielaufteilung von web.dev.
• Verlauf: das gewählte Perzentil vor den Bewertungszonen oder eine Linie pro Phase, daneben die Verteilung.
• Wo der LCP schlecht ist: Seitentyp und Gerät oder eine andere Dimension, sortiert nach Seitenaufrufen über 4 s. Eine Zeile öffnet ihr eigenes Diagramm und ihren Breakdown.
• LCP-Elemente: jedes Element mit Selektor, Art, Discovery-Pfad und Phasen. Das Detail prüft HTML, Preload, fetchpriority, Lazy Loading und Browser-Cache, und AI Prompt gibt es an einen Assistenten weiter.

Per API bekommst du dasselbe über POST /analytics/element-targets, mit fetch_priority_high_rate, lazy_rate und cache_rate pro Element. Einen Deploy vergleichst du mit compare_to_release_id in der Analytics-API.

Programmatisch:

curl https://api.fastmon.eu/organizations/$ORG/analytics/query \
  -H "Authorization: Bearer fm_$TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "time_range": { "from": "2026-05-01T00:00:00Z", "to": "2026-05-07T00:00:00Z" },
    "metrics": ["lcp"],
    "aggregations": ["p75"],
    "group_by": { "granularity": "day", "dimensions": ["url"] }
  }'

Schlechten LCP verbessernCopy Anchor Link

LCP zerfällt in vier Phasen, und Wohin die Zeit geht zeigt jede davon. Fang mit der größten an.

1. TTFB. Wenn dein Time-to-First-Byte schon >1.500 ms ist, rettet keine Frontend-Optimierung deinen LCP. HTML am Edge cachen, oder statisch rendern.
2. Resource Load Delay. Das LCP-Bild wird zu spät angefordert. Preload (<link rel="preload" as="image">) oder im HTML weiter nach oben.
3. Resource Load Duration. Das LCP-Bild ist zu groß oder zu langsam ausgeliefert. Moderne Formate (AVIF/WebP), responsive Größen via srcset, CDN nahe deinen Besuchern.
4. Element Render Delay. Der Browser hat die Bytes, ist aber durch render-blocking CSS oder JavaScript blockiert. Critical CSS inlinen, unkritische Scripts deferren.

Jede Phase im Detail erklärt Optimize LCP auf web.dev.

Häufige ÜberraschungenCopy Anchor Link

• LCP ist meistens ein Bild, kein Text. Wenn du nur an Fonts rumschraubst, verschiebst du deinen LCP wahrscheinlich kein Stück.
• Ein lazy geladener Hero verzögert LCP. Ein lazy_rate über 0 an einem LCP-Element zeigt das.
• background-image zählt mit. Wenn dein „Hero" ein CSS-Hintergrund ist, misst der Browser den trotzdem als LCP.

Nächste SchritteCopy Anchor Link

• Interaction to Next Paint (INP): die Responsiveness-Metrik, die häufig regrediert, wenn du LCP durch zusätzliches JavaScript optimierst.
• Cumulative Layout Shift (CLS): die Visual-Stability-Metrik.
• Web-Vitals-Übersicht: alle fünf Metriken und ihre Schwellen.