Inhaltsverzeichnis
Der Largest Contentful Paint (LCP) misst, wie schnell das größte sichtbare Element Ihrer Seite vollständig gerendert ist. Bei einem Bauhaus-Designshop in Dessau ist das oft das Hero-Bild eines Wassily-Sessels, bei einer Wittenberger Hotellerie das Foto der Zimmer-Galerie, bei einem Pharma-Distributor in Bitterfeld-Wolfen ein technisches Diagramm. Genau dieses Element entscheidet darüber, wie schnell sich Ihre Website “fertig geladen” anfühlt — und Google misst mit. Für Anhalter Mittelständler, die im überregionalen Wettbewerb bestehen müssen, ist ein LCP unter 2,5 Sekunden Pflicht, kein Luxus.
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. Das betrifft typisch Anhalter Mittelstandsseiten — der Bauhaus-Designshop auf einem 4-Euro-Shared-Hoster, der Köthener Maschinenbauer mit selbst gehostetem WordPress in einem Heimnetz — wo Performance-Headroom fehlt.
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. Ein Bauhaus-Designshop in Dessau, der hochauflösende Studiofotos seiner Möbel-Klassiker auf der Startseite zeigt, oder eine Wittenberger Hotellerie mit großformatigen Zimmer-Galerien sollten diese in srcset-Varianten ausliefern.
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
- 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
Der LCP ist der Core Web Vital mit dem direktesten Effekt auf gefühlte Performance — und einer der einfachsten zu optimieren. Mit fetchpriority, Preloading, Bildoptimierung und CDN holen Sie für einen Bauhaus-Designshop oder eine Wittenberger Hotellerie oft 1–2 Sekunden Ladezeit heraus, ohne CMS-Migration oder Redesign.
Lesen Sie ergänzend unsere Tutorials zu CLS-Vermeidung und Bildoptimierung, und buchen Sie bei Bedarf direkt unsere Pagespeed-Optimierung oder SEO-Beratung Dessau-Roßlau.
Sister-Sites: seo-halle.com, seo-leipzig.com, seo-stuttgart.com, seo-baden-wuerttemberg.de, seo-ruhrgebiet.com. Reine Frontend-Performance auf webdesigner-halle.de.
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 rein regionalen Anhalter Websites ist der Effekt geringer, aber die Caching-Vorteile bleiben bestehen.
Schlagworte
Arnold Wender
SEO-Experte & Geschäftsinhaber
Arnold Wender ist Gründer und Geschäftsinhaber von Wender Media. Mit über 19 Jahren Erfahrung in der Suchmaschinenoptimierung hilft er Unternehmen in Dessau-Roßlau und Anhalt-Bitterfeld, ihre Online-Sichtbarkeit nachhaltig zu verbessern.
Profil anzeigen