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

LCP optimieren: Largest Contentful Paint verbessern

Der LCP ist einer der wichtigsten Core Web Vitals. Lernen Sie, wie Sie das größte sichtbare Element Ihrer Website schneller laden und bessere Rankings erzielen.

Arnold Wender

Arnold Wender

SEO-Experte & Gruender

Inhaltsverzeichnis

Der Largest Contentful Paint (LCP) misst, wie schnell das größte sichtbare Element Ihrer Seite lädt. Ein guter LCP-Wert ist entscheidend für Ihre Google-Rankings - und für die Nutzererfahrung.

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 beeinflusst direkt die Nutzererfahrung. Mit den richtigen Optimierungen - fetchpriority, Preloading, Bildoptimierung und CDN - können Sie Ihren LCP deutlich verbessern.

Für eine professionelle PageSpeed-Optimierung stehen wir Ihnen gerne zur Verfügung.

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 & Gruender

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

Profil anzeigen