Inhaltsverzeichnis
Wenn ein Hotelportal im Berchtesgadener Land auf seiner Hero-Bild-Schwelle vier Sekunden braucht, hat es das Buchungsgespräch verloren, bevor es begonnen hat. Genau das misst der Largest Contentful Paint (LCP): die Zeit bis zum ersten echten Inhalt. Ob Hotelseite im Allgäu, Konfigurator eines Automotive-Zulieferers im Großraum Ingolstadt, B2B-Landingpage einer Versicherung in München oder SaaS-Onboarding eines Tech-Startups im Werksviertel — der LCP entscheidet über den ersten Eindruck und über die Position in den Google-Rankings. In diesem Leitfaden zeigen wir die zentralen Hebel, mit denen Sie ihn unter die magische 2,5-Sekunden-Marke bringen.
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
| Bewertung | Zeit | Bedeutung | |-----------|------|-----------| | Gut | ≤ 2,5s | Keine Optimierung nötig | | Verbesserungswürdig | 2,5s - 4s | Sollte optimiert werden | | Schlecht | > 4s | Dringender Handlungsbedarf |
Was ist typischerweise das LCP-Element?
Das LCP-Element ist meist eines der folgenden:
- Hero-Bilder - Große Bilder im oberen Bereich
- Hintergrundbilder - CSS background-images
- Video-Poster - Vorschaubilder von Videos
- Große Textblöcke - Überschriften oder Absätze
- SVG-Grafiken - Logos oder Illustrationen
LCP-Element identifizieren
In Chrome DevTools:
- F12 drücken
- Performance Tab öffnen
- Seite neu laden
- Im Timeline "LCP" markiert
Oder mit Lighthouse:
- Lighthouse-Audit durchführen
- 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 normallow: Niedrigere Prioritätauto: 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 - besonders relevant für bayerische Unternehmen, deren Kunden oft über ganz Süddeutschland und den DACH-Raum verteilt sind.
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
- F12 → Performance Tab
- Seite mit Throttling laden
- 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: LCP ist der erste Eindruck Ihrer Marke
Der LCP ist mehr als ein technischer Score — er ist die Sekunde, in der Besucher entscheiden, ob sie bleiben. fetchpriority, Preloading, sauber komprimierte Hero-Bilder und ein CDN, das auch in München und Würzburg den Cache wirklich trifft, sind die zentralen Hebel. Im bayerischen B2B-Mittelstand profitieren besonders Industrie-Konfiguratoren, Hotelbuchungen und Versicherungs-Tarifrechner — überall, wo das größte sichtbare Element ein Bild oder ein gestaltetes Headline-Modul ist.
Wenn Sie Ihre Core Web Vitals systematisch verbessern wollen, ist unsere Pagespeed-Optimierung der direkte Einstieg. Regional vertiefen wir das Thema auf den Standortseiten SEO München, SEO Augsburg und SEO Regensburg.
Vertiefende Lektüre
- CLS vermeiden: stabile Layouts
- Bildoptimierung mit WebP, AVIF und Lazy Loading
- Mobile-First Indexing 2026
- Süddeutscher Vergleich: SEO-Beratung Stuttgart
- Webdesign-Tiefenwissen: Webagentur Halle
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 in Bayern ist der Effekt geringer, aber die Caching-Vorteile bleiben bestehen.
Schlagworte
Arnold Wender
SEO-Experte & Gründer
Arnold Wender ist Gründer und Geschäftsführer der SEO-Agentur Halle (Saale). Mit über 19 Jahren Erfahrung in der Suchmaschinenoptimierung hilft er Unternehmen, ihre Online-Sichtbarkeit nachhaltig zu verbessern.
Profil anzeigen