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

LCP optimieren: Largest Contentful Paint verbessern

LCP unter 2,5 Sekunden – Praxisleitfaden für Hero-Bilder, Server und Schriften. Performance-Tipps für KMU-Websites in Halle und Sachsen-Anhalt.

Arnold Wender

Arnold Wender

SEO-Experte & Gründer

Aktualisiert: 8. Mai 2026
Inhaltsverzeichnis

Wenn ein Hotel im Saalekreis seine Buchungsseite über Mobilfunk im ländlichen Raum ausliefert, oder ein Heilpraktiker in Halle (Saale) sein Hero-Bild auf der Startseite zeigt – der erste sichtbare Eindruck 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 – gerade in Sachsen-Anhalt mit gemischter Mobilfunk-Abdeckung – für die Anfragequote über Smartphones.

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

Für mittelständische Unternehmen in Halle (Saale), im Saalekreis und in Mitteldeutschland zahlt sich LCP-Optimierung 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 bringen Sie das größte sichtbare Element zuverlässig unter 2,5 Sekunden.

Wir analysieren und optimieren LCP regelmäßig im Rahmen unserer SEO-Analyse und OnPage-Optimierung – für Restaurants, Hotels, Pflegedienste und Industrie-Kunden in Sachsen-Anhalt. Lokal verbinden wir das mit Local-SEO Halle, gestalterisch mit webdesigner-halle.de. Den Schwester-Beitrag aus Sicht der .com-Variante finden Sie auf seo-halle.com; für Vergleiche mit Süddeutschland gibt es eine Variante auf seo-baden-wuerttemberg.de.

Lesen Sie ergänzend unsere Beiträge CLS vermeiden und Bildoptimierung mit WebP/AVIF.

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äftsfuehrer der SEO-Agentur Halle. Mit über 19 Jahren Erfahrung in der Suchmaschinenoptimierung hilft er Unternehmen, ihre Online-Sichtbarkeit nachhaltig zu verbessern.

Profil anzeigen