Performance 10 Min. Lesezeit

LCP optimieren: Largest Contentful Paint unter 2,5 Sekunden bringen

So funktioniert LCP-Optimierung — Hero-Bilder, Server, Schriften und Render-Blocking-Resources systematisch verbessern. Mit fetchpriority, Preload und CDN.

Der erste sichtbare Eindruck einer Website entscheidet über Vertrauen und Conversion. Genau diese Wahrnehmung misst Largest Contentful Paint (LCP). Ein guter LCP-Wert ist entscheidend für Google-Rankings, für die Nutzererfahrung und besonders für die Anfragequote über Smartphones mit gemischter Mobilfunk-Abdeckung.

Was ist der LCP?

Der LCP ist einer der drei Core Web Vitals, die Google seit 2021 als Ranking-Faktoren verwendet. Er misst die Zeit vom Laden der Seite bis das größte Element im sichtbaren Bereich vollständig gerendert ist.

LCP-Bewertung

BewertungZeitBedeutung
Gut≤ 2,5sKeine Optimierung nötig
Verbesserungswürdig2,5s – 4sSollte optimiert werden
Schlecht> 4sDringender Handlungsbedarf

Ziel — LCP unter 2,5 Sekunden, idealerweise unter 2 Sekunden.

Was ist typischerweise das LCP-Element?

Das LCP-Element ist meist eines der folgenden:

  1. Hero-Bilder — Große Bilder im oberen Bereich
  2. Hintergrundbilder — CSS background-images
  3. Video-Poster — Vorschaubilder von Videos
  4. Große Textblöcke — Überschriften oder Absätze
  5. SVG-Grafiken — Logos oder Illustrationen

LCP-Element identifizieren

In Chrome DevTools:

  1. F12 drücken
  2. Performance Tab öffnen
  3. Seite neu laden
  4. Im Timeline “LCP” markiert

Oder mit Lighthouse:

  1. Lighthouse-Audit durchführen
  2. Unter “Diagnostics” nach “Largest Contentful Paint element” suchen

Die 4 Hauptursachen für schlechten LCP

1. Langsame Server-Antwortzeit (TTFB)

Der Server braucht zu lange, um die erste Antwort zu senden.

Lösungen:

  • Server-seitiges Caching aktivieren
  • CDN verwenden
  • Hosting-Provider wechseln
  • Datenbank-Abfragen optimieren
# Nginx Caching Beispiel
location ~* \.(jpg|jpeg|png|webp|avif|gif|ico|css|js)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

2. Render-Blocking Resources

CSS und JavaScript blockieren das Rendering.

Lösungen:

  • Critical CSS inline einbinden
  • JavaScript defer oder async laden
  • Nicht-kritisches CSS verzögert laden
<!-- Critical CSS inline -->
<style>
  /* Nur above-the-fold Styles */
  .hero { ... }
</style>

<!-- Rest verzögert laden -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

3. Langsame Ressourcen-Ladezeiten

Bilder und Fonts laden zu langsam.

Lösungen:

  • Bilder in WebP/AVIF konvertieren
  • Responsive Images mit srcset
  • Font-Display: swap verwenden
  • Ressourcen preloaden

4. Client-seitige Rendering-Verzögerung

JavaScript baut den Inhalt erst im Browser auf.

Lösungen:

  • Server-Side Rendering (SSR)
  • Static Site Generation (SSG)
  • Hydration optimieren

fetchpriority: Die geheime Waffe

Das fetchpriority-Attribut gibt dem Browser einen Hinweis zur Priorisierung:

<!-- Höchste Priorität für LCP-Bild -->
<img
  src="hero.jpg"
  alt="Hero"
  fetchpriority="high"
  loading="eager"
  width="1920"
  height="1080"
>

Werte für fetchpriority

  • high: Höhere Priorität als normal
  • low: Niedrigere Priorität
  • auto: Browser entscheidet (Standard)

Nicht übertreiben — fetchpriority="high" nur für das LCP-Element. Zu viele priorisierte Ressourcen heben sich gegenseitig auf.

Preload für kritische Ressourcen

<head>
  <!-- LCP-Bild vorladen -->
  <link
    rel="preload"
    href="/hero.webp"
    as="image"
    type="image/webp"
    fetchpriority="high"
  >

  <!-- Kritische Fonts vorladen -->
  <link
    rel="preload"
    href="/fonts/main.woff2"
    as="font"
    type="font/woff2"
    crossorigin
  >
</head>

Wann Preload verwenden?

  • LCP-Bilder
  • Kritische Fonts
  • CSS-Dateien (wenn nicht inline)
  • JavaScript, das sofort benötigt wird

Bilder für LCP optimieren

1. Responsive Images

<img
  src="hero-800.jpg"
  srcset="
    hero-400.jpg 400w,
    hero-800.jpg 800w,
    hero-1200.jpg 1200w,
    hero-1600.jpg 1600w
  "
  sizes="100vw"
  alt="Hero Bild"
  width="1600"
  height="900"
  fetchpriority="high"
>

2. Moderne Formate

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero" fetchpriority="high">
</picture>

3. Richtige Dimensionen

Nie ein 4000px-Bild für einen 1200px-Container laden.

Fonts und LCP

Schriftarten können den LCP verzögern, wenn Text das LCP-Element ist.

font-display: swap

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
}

Mit swap zeigt der Browser sofort Text (mit Fallback-Font) an.

Fonts preloaden

<link
  rel="preload"
  href="/fonts/custom.woff2"
  as="font"
  type="font/woff2"
  crossorigin
>

CDN verwenden

Ein Content Delivery Network beschleunigt die Auslieferung:

Vorteile

  • Geringere Latenz durch geografische Nähe
  • Caching auf Edge-Servern
  • Automatische Bildoptimierung (bei einigen CDNs)

Bekannte CDNs

  • Cloudflare (kostenloser Tarif verfügbar)
  • Fastly
  • AWS CloudFront
  • Bunny.net

LCP messen und überwachen

PageSpeed Insights

https://pagespeed.web.dev/

Gibt Labor- und Felddaten sowie konkrete Empfehlungen.

Chrome DevTools

  1. F12 → Performance Tab
  2. Seite mit Throttling laden
  3. LCP im Timeline markiert

Web Vitals JavaScript

import { onLCP } from 'web-vitals';

onLCP(metric => {
  console.log('LCP:', metric.value);
  // An Analytics senden
});

Checkliste für besseren LCP

  • LCP-Element identifizieren
  • fetchpriority="high" für LCP-Bild
  • Bilder in WebP/AVIF bereitstellen
  • Critical CSS inline einbinden
  • JavaScript defer/async laden
  • Fonts preloaden mit font-display: swap
  • CDN verwenden
  • Server-Caching aktivieren
  • TTFB unter 800ms halten

Häufige LCP-Fehler

1. Lazy Loading für LCP-Bilder

<!-- FALSCH -->
<img src="hero.jpg" loading="lazy">

<!-- RICHTIG -->
<img src="hero.jpg" loading="eager" fetchpriority="high">

2. Zu große Bilder

Ein 5 MB Hero-Bild dauert selbst mit schnellem Internet zu lange.

3. Unnötiges JavaScript vor dem Content

JavaScript vermeiden, das vor dem LCP-Element lädt und es blockiert.

4. Fehlende Preload-Hints

Der Browser erfährt erst spät von wichtigen Ressourcen.

Fazit

LCP-Optimierung zahlt sich doppelt aus: bessere Rankings durch grüne Core Web Vitals und höhere Anfragequote auf Mobilgeräten. Mit fetchpriority, Preloading, sauberer Bildoptimierung und einem passenden CDN lässt sich das größte sichtbare Element zuverlässig unter 2,5 Sekunden bringen.

Verwandte Themen

Häufige Fragen

Wie wird das LCP-Element gefunden?

Chrome DevTools (Performance Tab) oder PageSpeed Insights. Beide zeigen das LCP-Element und seine Ladezeit.

Ist ein LCP von 3 Sekunden schlecht?

Ein LCP von 3 Sekunden fällt in die Kategorie “verbesserungswürdig”. Google empfiehlt unter 2,5 Sekunden, idealerweise unter 2 Sekunden.

Kann JavaScript das LCP-Element sein?

Ja, wenn JavaScript den größten sichtbaren Inhalt rendert. Dies ist bei Single-Page-Apps häufig der Fall — und ein Grund für SSR.

Hilft ein CDN immer beim LCP?

Ein CDN hilft besonders bei geografisch verteilten Nutzern. Bei lokalen Websites ist der Effekt geringer, aber Caching-Vorteile bleiben.

Themen:

LCP Core Web Vitals Performance Page Speed SEO wissen-portal

Individuelle Beratung gewünscht?

Wender Media unterstützt Sie bei der praktischen Umsetzung — von der technischen Konzeption bis zum Launch. Schreiben Sie uns, wir antworten innerhalb von 24 Stunden.

Jetzt Beratung anfragen

Kostenlos & unverbindlich — info@wendermedia.info

Verwandte Artikel