Google misst drei Werte, die das Nutzererlebnis quantifizieren. LCP (Largest Contentful Paint) — wann ist das größte sichtbare Element geladen, idealerweise unter 2,5 Sekunden. INP (Interaction to Next Paint) — wie schnell reagiert die Seite auf Interaktionen, unter 200 Millisekunden. CLS (Cumulative Layout Shift) — wie stabil ist das Layout beim Laden, unter 0,1. Alle drei müssen „grün" sein, damit Google Sie belohnt. Als Webdesign-Agentur Hamburg erreichen wir diese Werte bei jedem Projekt standardmäßig.
Die 12 wichtigsten Hebel
1. Bilder in WebP konvertieren
WebP spart 25–45 % Dateigröße gegenüber JPG/PNG. Tool: squoosh.app. Erledigt in wenigen Stunden für die ganze Website.
2. Lazy Loading für Bilder
Alle Bilder unterhalb des sichtbaren Bereichs mit loading="lazy" versehen. Browser lädt sie erst beim Scrollen.
3. Richtige Bildgrößen
Ein 3000-Pixel-Bild auf einem 500-Pixel-Slot verschwendet Bandbreite. Responsive mit srcset arbeiten.
4. Fonts preloaden
Die wichtigsten Fonts mit <link rel="preload" as="font"> im Head laden. Verhindert Font-Flash (FOIT/FOUT).
5. Kritisches CSS inline
Das CSS für den Hero-Bereich (Above-the-fold) direkt im <style>-Tag im Head einbetten. Rest asynchron laden. Verkürzt LCP massiv.
6. JavaScript defer oder async
Jeder nicht-kritische Script-Tag mit defer oder async. Blockiert das Rendering nicht.
7. Third-Party-Scripts reduzieren
Facebook-Pixel, Google Analytics, Chat-Widgets — jedes belastet die Ladezeit. Prüfen, was wirklich gebraucht wird, und Alternativen erwägen (Plausible statt GA, Crisp statt Intercom).
8. Brotli-Kompression aktivieren
15–20 % besser als gzip. Beim Hoster aktivierbar — meist ein Config-Schalter.
9. CDN nutzen
Cloudflare (kostenlos) oder BunnyCDN. Beschleunigt Ladezeiten weltweit, entlastet den eigenen Server.
10. HTTP/2 oder HTTP/3
Beim Hoster anfragen. Moderne Protokolle laden multiple Ressourcen parallel — ohne Overhead.
11. Bildgrößen im HTML festlegen
width und height auf jedem <img>-Tag angeben. Browser reserviert den Platz und verhindert Layout-Shift (CLS).
12. Nicht benutzte Fonts, CSS, JS entfernen
Viele Websites laden Fonts in 6 Varianten, obwohl nur 2 genutzt werden. CSS-Framework-Bibliotheken enthalten tausende ungenutzte Klassen. Ein monatlicher „Audit" spart schnell 30–50 % Ladezeit.
So testen Sie
Öffnen Sie pagespeed.web.dev und geben Sie Ihre URL ein. Der Bericht zeigt für Mobile und Desktop getrennt Werte und konkrete Verbesserungsvorschläge. Alles mit „rot" oder „orange" markiert ist Handlungsbedarf. Ziel: grüner Bereich in allen drei Metriken, auf Mobile mindestens 85/100. Weitere häufige Fehler in der Performance erklärt unser Artikel zu den SEO-Fehlern Hamburger Unternehmen. Warum WordPress vs. Custom-Code diese Werte so unterschiedlich beeinflusst, erklärt unser Vergleichsartikel. Unser Responsive Webdesign wird grundsätzlich mit grünen Core Web Vitals ausgeliefert.
Häufig gestellte Fragen
Was sind Core Web Vitals?
Drei Google-Metriken, die das Nutzererlebnis messen: LCP (Ladegeschwindigkeit des Hauptinhalts, Ziel: unter 2,5 s), INP (Reaktionszeit auf Interaktionen, Ziel: unter 200 ms) und CLS (Stabilität des Layouts, Ziel: unter 0,1).
Beeinflusst LCP wirklich das Google-Ranking?
Ja — seit dem Core Web Vitals Update 2021 fließen alle drei Metriken direkt in das Google-Ranking ein. Seiten mit schlechten Core Web Vitals werden gegenüber schnelleren Seiten benachteiligt, selbst bei vergleichbarem Content.
Was ist der schnellste Weg zur LCP-Verbesserung?
Bilder in WebP konvertieren und die Größen im HTML-Tag angeben. Das allein verbessert LCP bei bildlastigen Seiten um 30–50 %. Zusätzlich: das Hauptbild mit loading="eager" statt lazy laden.
Was verursacht einen hohen CLS-Wert?
Bilder ohne width/height-Attribute (Browser weiß nicht, wie viel Platz zu reservieren ist), nachladende Werbeanzeigen, Fonts die beim Laden springen (FOUT) und dynamisch eingefügte Banner. Alles lösbar mit ein paar Zeilen Code.
Wie überprüfe ich meine Core Web Vitals kostenlos?
pagespeed.web.dev gibt sofort Werte für Mobile und Desktop. Für Felddaten (echte Nutzererfahrungen) nutzen Sie die Google Search Console unter „Nutzererfahrung“. Chrome DevTools zeigt Lighthouse-Werte direkt im Browser.
