So machst du deine Seite rasend schnell

Früher reichte es aus, wenn eine Webseite „irgendwie“ schnell lud. Heute ist Google strenger: Die Core Web Vitals sind ein offizieller Ranking Faktor, der die tatsächliche Nutzererfahrung (User Experience) misst. Wer hier schlecht abschneidet, verliert Plätze in den Suchergebnissen, egal wie gut der Content ist.

In diesem Dreamcodes Ratgeber erfährst du, was hinter den drei wichtigsten Kennzahlen steckt und wie du dein Projekt für den „Green Score“ optimierst.

1. Was sind die Core Web Vitals?

Die Core Web Vitals bestehen aus drei spezifischen Messwerten, die Google nutzt, um die Geschwindigkeit, Interaktivität und visuelle Stabilität einer Seite zu bewerten:

1. LCP (Largest Contentful Paint): Misst die Ladeleistung. Wie lange dauert es, bis das größte Element (meist ein Hero Bild oder eine Überschrift) im Sichtfeld geladen ist?
2. INP (Interaction to Next Paint): Misst die Interaktivität. Wie schnell reagiert die Seite, nachdem ein Nutzer irgendwo geklickt oder getippt hat? (Hat den alten Wert FID abgelöst).
3. CLS (Cumulative Layout Shift): Misst die visuelle Stabilität. Springen Elemente auf der Seite während des Ladens hin und her?

2. LCP optimieren (Ladezeit des Hauptinhalts)

Ein guter LCP Wert liegt unter 2,5 Sekunden.

• Server Antwortzeit: Nutze schnelles Hosting (wie in unserem Hosting Guide beschrieben) und Caching.
• Render Blocking verhindern: Schiebe nicht kritisches JavaScript und CSS nach unten oder lade es asynchron (async oder defer).
• Bilder priorisieren: Das wichtigste Bild (LCP-Element) sollte nicht per Lazy-Loading geladen werden. Nutze stattdessen fetchpriority="high".

3. INP optimieren (Reaktionsgeschwindigkeit)

Ein guter INP-Wert liegt unter 200 Millisekunden.

• JavaScript Main Thread entlasten: Zu viel komplexer Code blockiert den Browser. Entferne ungenutzte Skripte und Plugins.
• Code Splitting: Lade nur das JavaScript, das für die aktuelle Seite wirklich benötigt wird.
• Web Worker nutzen: Lagere schwere Berechnungen in Hintergrund Prozesse aus, damit die Benutzeroberfläche flüssig bleibt.

4. CLS optimieren (Visuelle Stabilität)

Ein guter CLS Wert liegt unter 0,1.

• Größenangaben für Medien: Gib für jedes Bild und jedes Video explizite width und height Attribute im HTML an. So reserviert der Browser den Platz, bevor das Medium geladen ist.
• Keine Inhalte oben einfügen: Vermeide es, dynamische Inhalte (wie Werbebanner oder Newsletter Popups) nachträglich oberhalb von bereits geladenem Text einzufügen.
• Font Display: Nutze font-display: swap; in deinem CSS, damit Text sofort in einer Systemschrift angezeigt wird, während die Webfont noch lädt.

5. So misst du deine Werte

Du musst nicht raten, nutze diese kostenlosen Tools von Google:

• PageSpeed Insights: Gibt dir eine detaillierte Analyse für Mobile und Desktop inklusive konkreter Verbesserungsvorschläge.
• Google Search Console: Unter dem Menüpunkt „Core Web Vitals“ siehst du, welche deiner Unterseiten Probleme bereiten.
• Chrome DevTools: Nutze den Tab „Lighthouse“ direkt in deinem Browser für Echtzeit Tests während der Entwicklung.

6. Fazit

Die Core Web Vitals zu optimieren ist kein Sprint, sondern ein Marathon. Es geht darum, sauberen Code zu schreiben, Ressourcen effizient zu verwalten und den Nutzer in den Mittelpunkt zu stellen. Eine schnelle Seite sorgt für eine niedrigere Absprungrate, höhere Conversion Rates und letztlich für ein besseres Google Ranking.