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 & Gründer

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. Gerade für Unternehmen im Ruhrgebiet — ob Logistikbetrieb in Dortmund, Maschinenbauer in Bochum oder Handwerksbetrieb in Hagen — entscheidet die Ladezeit über Sichtbarkeit und Kundengewinnung.

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. Viele mittelständische Unternehmen im Ruhrgebiet setzen auf günstiges Shared Hosting — das rächt sich beim TTFB.

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. Ein häufiger Fehler, den wir bei Industrieunternehmen und Handwerksbetrieben im Ruhrgebiet immer wieder sehen: überdimensionierte Produktfotos oder Teambilder, die den LCP massiv verschlechtern.

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 den Mittelstand im Ruhrgebiet — ob Logistik, Industrie oder Dienstleistung — ist ein schneller LCP ein klarer Wettbewerbsvorteil in den lokalen Suchergebnissen.

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 regionalen Websites für Unternehmen im Ruhrgebiet 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 Halle (Saale). Mit über 18 Jahren Erfahrung in der Suchmaschinenoptimierung hilft er Unternehmen, ihre Online-Sichtbarkeit nachhaltig zu verbessern.

Profil anzeigen