LCP Optimierung - Largest Contentful Paint verbessern
Technisches SEO 10 Min. Lesezeit

LCP optimieren: Largest Contentful Paint verbessern

LCP ist der Conversion-Killer Nr. 1. So bringen Mittelständler im Ruhrgebiet ihren Largest Contentful Paint zuverlässig unter 2,5 Sekunden.

Arnold Wender

Arnold Wender

SEO-Experte & Gründer

Aktualisiert: 8. Mai 2026
Inhaltsverzeichnis

Wenn ein Industrie-Einkäufer in der Verwaltung eines Stahlwerks in Bochum auf der Suche nach einem Zerspanungsspezialisten ist und eine Lieferantenseite öffnet, hat diese Seite genau zwei Sekunden Zeit. Lädt das Hero-Bild nicht innerhalb von 2,5 Sekunden, ist der nächste Klick auf das Browser-Back-Symbol — und damit auch auf den Wettbewerber. Genau das misst Largest Contentful Paint (LCP): wie schnell das größte sichtbare Element Ihrer Seite vollständig gerendert ist. Ein guter LCP-Wert ist entscheidend für Google-Rankings — und im B2B-Vertrieb des Ruhrgebiets vielleicht sogar wichtiger für die Conversion-Rate.

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

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)

Preload für kritische Ressourcen

Teilen Sie dem Browser frühzeitig mit, was er laden soll:

<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

Laden Sie nie ein 4000px-Bild für einen 1200px-Container.

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)

Empfohlene 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 5MB Hero-Bild dauert selbst mit schnellem Internet zu lange.

3. Unnötiges JavaScript vor dem Content

Vermeiden Sie JavaScript, 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

Der LCP ist ein kritischer Ranking-Faktor — und im Ruhrgebiet, wo viele B2B-Anbieter um knappe Einkaufsbudgets aus Konzernen wie thyssenkrupp, Evonik oder RWE konkurrieren, oft genauso entscheidend für die Lead-Conversion. Mit fetchpriority="high", sauber gesetzten Preload-Hints, optimierten Bildern in WebP/AVIF und einem CDN bringen Sie selbst träge gewachsene Mittelstandsseiten zuverlässig unter die 2,5-Sekunden-Schwelle.

Vertiefen Sie das Thema mit unserem CLS-Optimierungsguide, unseren Crawl-Budget-Tipps und dem Beitrag zu Mobile-First-Indexing. Buchen Sie eine PageSpeed-Optimierung oder eine SEO-Analyse für Ihre Website in Essen, Dortmund oder Mülheim. Vergleichen Sie die Performance-Sicht unserer Schwesterseite seo-leipzig.com oder lassen Sie sich von webdesigner-halle.de bei tiefergehenden Frontend-Themen unterstützen.

FAQ

Wie finde ich mein LCP-Element?

Nutzen Sie 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.

Schlagworte

#LCP #Core Web Vitals #Performance #Page Speed #SEO
Arnold Wender, SEO-Experte

SEO-Experte & Gründer

Arnold Wender ist Gründer und Geschäftsführer der SEO-Agentur Essen. Mit über 18 Jahren Erfahrung in der Suchmaschinenoptimierung hilft er Unternehmen, ihre Online-Sichtbarkeit nachhaltig zu verbessern.

Profil anzeigen