Sie müssen dringend LCP, CLS & INP optimieren, weil Sie
rote Balken in den PageSpeed Insights sehen? Kennen Sie das Gefühl? Sie öffnen
die Google Search Console, klicken auf "Core Web Vitals" und sehen: Rot. "URLs
erfordern eine Verbesserung". Für viele Website-Betreiber ist das ein
Schockmoment. Doch atmen Sie tief durch.
Wenn Sie LCP, CLS und INP optimieren, tun Sie das nicht nur
für einen grünen Score. Sie tun es, weil jede Verbesserung hier direkt auf die
Zufriedenheit Ihrer Nutzer einzahlt. Ein behobener CLS-Fehler bedeutet, dass
kein Kunde mehr aus Versehen auf den falschen Button klickt. Ein verbesserter
LCP bedeutet, dass Ihre Marke sofort sichtbar ist.
In diesem Praxis-Guide gehen wir die drei häufigsten "Patienten" durch. Wir
zeigen Ihnen Schritt für Schritt, wie Sie nachhaltig LCP, CLS &
INP optimieren.
1. LCP optimieren: Wenn das Hauptbild auf sich warten lässt
Das Problem: Der "Largest Contentful Paint" (LCP) ist
meistens das große Bild im Header oder die H1-Überschrift. Wenn der Wert über
2,5 Sekunden liegt, meckert Google. Die Ursache: Der Browser
entdeckt das Bild zu spät, oder das Bild ist viel zu groß.
Die Lösungen:
Der Preload-Trick: Helfen
Sie dem Browser auf die Sprünge. Fügen Sie im <head>
Ihrer Seite einen Link hinzu, der dem Browser sagt: "Hey, lade dieses Bild
sofort, es ist wichtig!" <link rel="preload" as="image"
href="mein-hero-bild.webp">
Weg mit Lazy Loading im Header: "Lazy Loading" (spätes
Laden) ist toll für Bilder weiter unten. Aber für das allererste Bild oben
ist es Gift! Deaktivieren Sie Lazy Loading für das LCP-Element.
Formatwechsel: Nutzen Sie WebP oder AVIF statt alter
JPGs. Das reduziert die Dateigröße oft um 50% ohne Qualitätsverlust.
2. CLS verhindern: Schluss mit dem Springteufel
Das Problem: Elemente verschieben sich während des Ladens.
Der Text rutscht weg, Bilder ploppen rein und drücken alles nach unten.
Die Ursache: Dem Browser wurde nicht gesagt, wie viel Platz
ein Bild oder eine Anzeige braucht bevor sie geladen ist.
Die Lösungen:
Platz reservieren (Aspect Ratio): Geben Sie jedem Bild
und jedem Video immer width und height Attribute
im HTML mit. So weiß der Browser: "Aha, hier muss ich eine Box von 800x600
Pixeln freihalten", auch wenn das Bild noch gar nicht da ist.
<img src="https://www.example.com/foto.jpg" width="800" height="600" ...>
Schriftarten zähmen: Webfonts laden oft etwas später.
Bis dahin zeigt der Browser entweder gar nichts oder eine Systemschrift.
Wenn die Webfont dann "reinspringt", verschiebt sich der Text. Nutzen Sie
CSS font-display: swap, um das zu glätten, oder gleichen Sie
die Zeilenhöhen der Ersatzschrift an.
3. INP optimieren: Reaktionszeit wie ein Sportwagen
Das Problem: Der Nutzer klickt, aber die Seite "friert" kurz
ein. Google nennt das "schlechte Responsiveness". Die
Ursache: Der Haupt-Prozessor (Main Thread) des Browsers ist
beschäftigt. Er rechnet gerade an einem riesigen JavaScript-Paket (z.B.
Tracking, Chat-Bots, Slider) und hat keine Zeit, den Klick zu verarbeiten.
Die Lösungen:
JavaScript auf Diät setzen: Prüfen Sie kritisch:
Brauchen wir wirklich 5 verschiedene Tracking-Tools und den Facebook-Pixel
und den LinkedIn-Tag? Jedes Skript kostet Rechenzeit.
Aufgaben aufteilen: Entwickler sollten "Long Tasks"
(Aufgaben, die länger als 50ms dauern) aufbrechen. Das ist wie beim Essen:
Statt den ganzen Apfel auf einmal zu schlucken (und zu ersticken),
schneiden wir ihn in Stücke. So kann der Browser zwischendurch "atmen" und
auf Klicks reagieren.
Defer & Async: Laden Sie Skripte, die nicht sofort
wichtig sind, verzögert (defer Attribut im Script-Tag).
Fazit: Grüne Balken sind machbar
Das Projekt LCP, CLS & INP optimieren wirkt oft wie ein
Kampf gegen die Hydra: Löst man ein Problem, taucht woanders ein neues auf.
Aber lassen Sie sich nicht entmutigen. Fangen Sie mit den "Low Hanging Fruits"
an: Bilder komprimieren (LCP) und Platzhalter definieren (CLS). Das löst oft
schon 80% der Probleme. Das tiefe JavaScript-Tuning (INP) ist dann der Schritt
für die Profis.
Profi-Tipp: Wenn Sie Änderungen gemacht haben, gehen Sie in
die Google Search Console und klicken Sie bei der Fehlermeldung auf
"Fehlerbehebung überprüfen". Google testet dann über die
nächsten 28 Tage, ob die echten Nutzer nun glücklicher sind.
Apropos Bilder: Sie sind oft der größte Hebel für den LCP. Aber wie
komprimiert man sie richtig, ohne dass sie pixelig aussehen? Und was ist
eigentlich dieses AVIF? Darum kümmern wir uns im nächsten Deep Dive.
Das dauert meistens 28 Tage. Die Search Console basiert auf den CrUX-Daten (echte Nutzerdaten) der letzten 4 Wochen. Wenn Sie heute etwas reparieren, fließt das erst nach und nach in den Durchschnitt ein. Haben Sie Geduld!
Das ist ein häufiger Fehler! Lazy Loading ist super für Bilder unterhalb des sichtbaren Bereichs. Aber wenn Sie das Logo oder das Hauptbild (Hero Image) "lazy" laden, bremsen Sie den LCP künstlich aus. Die goldene Regel: Above the Fold = Eager Loading (Sofort), Below the Fold = Lazy Loading.
Theoretisch ja, praktisch ist ein Wert von 0 oft schwer, aber alles unter 0,1 ist hervorragend. Achten Sie besonders auf dynamische Inhalte wie Cookie-Banner oder nachladende Werbe-Anzeigen – das sind die klassischen CLS-Sünder.
Beide sind gleich wichtig. Ein schneller LCP bringt den Nutzer auf die Seite, ein guter INP hält ihn dort. Wenn die Seite schnell da ist (LCP), aber nicht reagiert (INP), ist der Nutzer genauso frustriert, als wenn sie gar nicht geladen hätte.
Das Auge isst mit (aber es soll nicht warten)
Wir haben gelernt: Große Bilder sind oft der Hauptgrund für einen schlechten LCP. Aber einfach nur die Qualität runterzuschrauben, ist keine Lösung – Ihre Website soll ja brillant aussehen.
Im nächsten Teil der Web Performance Masterclass widmen wir uns der Kunst der Bilder-SEO. Wir vergleichen WebP mit AVIF, erklären Responsive Images und zeigen, wie Sie visuelle Pracht mit minimaler Dateigröße vereinen.
Nächster Artikel: Bilder richtig optimieren für moderne Websites
Über den Autor
Dietrich Bojko
Senior Webentwickler
Webinteger arbeitet seit vielen Jahren produktiv mit Linux-basierten Entwicklungsumgebungen unter Windows. Der Fokus liegt auf performanten Setups mit WSL 2, Docker, PHP, Node.js und modernen Build-Tools in realen Projekten – nicht auf theoretischen Beispielkonfigurationen.
Die Artikel dieser Serie entstehen direkt aus dem täglichen Einsatz in Kunden- und Eigenprojekten und dokumentieren bewusst auch typische Fehler, Engpässe und bewährte Workarounds.
Webseite besuchen
