Core Web Vitals erklärt — Warum Ladezeit dein Ranking beeinflusst

Was sind Core Web Vitals?

Core Web Vitals sind drei Messwerte, mit denen Google die Nutzererfahrung einer Webseite bewertet. Sie messen, wie schnell eine Seite lädt, wie schnell sie auf Eingaben reagiert und wie stabil das Layout während des Ladens bleibt. Seit 2021 fließen diese Metriken direkt in das Google-Ranking ein — und seit den Updates 2024/2025 sind sie wichtiger denn je.

Für lokale Geschäfte in Gießen und Mittelhessen bedeutet das: Eine langsame Webseite kostet dich nicht nur Besucher, die abspringen, sondern auch Sichtbarkeit bei Google. Wenn dein Konkurrent bei „Friseur Gießen" oder „Restaurant Gießen" bessere Core Web Vitals hat, rankt er bei sonst gleicher Qualität vor dir.

Die drei Metriken im Überblick:

LCP — Largest Contentful Paint

Was es misst: Wie lange dauert es, bis das größte sichtbare Element (Bild, Überschrift, Textblock) im Viewport vollständig geladen ist? LCP ist der wahrgenommene Ladezeitpunkt — der Moment, in dem der Nutzer denkt: „Die Seite ist da."

Zielwert: Unter 2,5 Sekunden. Alles über 4 Sekunden gilt als schlecht. Bei einer handgebauten Webseite wie den Projekten von OJ-Webdesign liegen typische LCP-Werte unter 1,2 Sekunden — weit im grünen Bereich.

INP — Interaction to Next Paint

Was es misst: Wie schnell reagiert die Seite auf Nutzerinteraktionen? Wenn jemand auf einen Button klickt oder ein Menü öffnet — wie lange dauert es, bis die Seite visuell darauf reagiert? INP hat im März 2024 die ältere FID-Metrik (First Input Delay) ersetzt und ist deutlich strenger.

Zielwert: Unter 200 Millisekunden. Seiten mit vielen JavaScript-Frameworks, Trackern und Drittanbieter-Widgets scheitern hier regelmäßig. Statische, handgebaute Seiten bestehen diesen Test fast immer problemlos.

CLS — Cumulative Layout Shift

Was es misst: Wie stark verschiebt sich das Layout, während die Seite lädt? Kennst du das: Du willst auf einen Link klicken, und plötzlich springt alles nach unten, weil ein Werbebanner nachgeladen wird? Genau das misst CLS.

Zielwert: Unter 0,1. Häufige Ursachen für schlechte CLS-Werte sind Bilder ohne definierte Breite und Höhe, nachladende Schriften und dynamisch eingefügte Werbung.

Core Web Vitals sind kein technisches Detail für Entwickler — sie sind ein Ranking-Faktor, der über Sichtbarkeit oder Unsichtbarkeit bei Google entscheidet.

Warum Google Core Web Vitals als Ranking-Faktor nutzt

Google will seinen Nutzern die bestmögliche Erfahrung bieten. Wenn jemand auf ein Suchergebnis klickt und die Seite fünf Sekunden zum Laden braucht, springt er zurück zu Google und klickt auf das nächste Ergebnis. Das ist ein schlechtes Signal — für dich und für Google.

Deshalb hat Google die Page Experience als offizielles Ranking-Signal eingeführt. Core Web Vitals sind der messbare Kern davon. Zusammen mit HTTPS, Mobile-Friendliness und dem Fehlen aufdringlicher Interstitials bilden sie die Grundlage der technischen Bewertung jeder Webseite.

In der Praxis bedeutet das: Bei zwei Seiten mit gleichwertigem Inhalt bevorzugt Google die schnellere, stabilere, reaktionsschnellere Seite. Für lokale Suchanfragen mit begrenztem Wettbewerb — wie „Webdesigner Gießen" oder „Café Gießen" — kann der Unterschied bei den Core Web Vitals den Unterschied zwischen Seite 1 und Seite 2 ausmachen.

Wie du deine Core Web Vitals misst

Du brauchst keine teuren Tools. Google stellt alles kostenlos zur Verfügung:

• Google PageSpeed Insights: Gib deine URL ein und bekomme innerhalb von Sekunden eine Bewertung aller drei Core Web Vitals — mit konkreten Verbesserungsvorschlägen. Das Tool zeigt sowohl Felddaten (echte Nutzer) als auch Labordaten (simulierter Test).
• Google Search Console: Im Bericht „Core Web Vitals" siehst du, wie deine gesamte Website abschneidet — aufgeteilt nach Mobile und Desktop. Hier werden Probleme nach Schweregrad gruppiert, sodass du die größten Baustellen zuerst angehen kannst.
• Chrome DevTools (Lighthouse): Direkt im Browser: Rechtsklick → „Untersuchen" → Tab „Lighthouse". Ideal für Entwickler, die während der Arbeit schnell testen wollen.
• Web Vitals Extension: Eine Chrome-Erweiterung, die dir LCP, INP und CLS in Echtzeit anzeigt, während du eine Seite benutzt.

Wichtig: Achte auf die Felddaten in PageSpeed Insights — sie basieren auf echten Nutzerdaten aus dem Chrome UX Report (CrUX) und sind das, was Google tatsächlich für das Ranking verwendet. Labordaten sind nützlich zum Debuggen, aber die Felddaten zählen.

Konkrete Tipps zur Optimierung

Hier sind die wirksamsten Maßnahmen, die ich bei jedem Webprojekt bei OJ-Webdesign umsetze:

Bilder als WebP mit festen Maßen

Bilder sind fast immer der größte Ladezeitfresser. WebP komprimiert bis zu 30 % besser als JPEG bei gleicher Qualität. Zusätzlich sollte jedes Bild im HTML feste width- und height-Attribute haben — das verhindert Layout-Shifts (CLS), weil der Browser den Platz schon reserviert, bevor das Bild geladen ist.

Font-Preloading und font-display: swap

Benutzerdefinierte Schriften wie Fraunces oder Inter können das Rendering blockieren, wenn sie nicht richtig eingebunden sind. Die Lösung: Schriften als WOFF2 vorhalten, per <link rel="preload"> frühzeitig laden und font-display: swap setzen. So sieht der Nutzer sofort Text — die Schrift wird nahtlos nachgeladen.

Lazy Loading für Bilder unterhalb des Viewports

Bilder, die erst beim Scrollen sichtbar werden, müssen nicht sofort geladen werden. Mit dem nativen HTML-Attribut loading="lazy" lädt der Browser sie erst, wenn sie in den sichtbaren Bereich kommen. Das verbessert LCP erheblich, weil der Browser sich auf das Wichtigste konzentriert.

Effektives Browser-Caching

Mit richtigen Cache-Headern lädt der Browser CSS, JavaScript und Bilder beim zweiten Besuch aus dem lokalen Speicher statt vom Server. Das beschleunigt wiederkehrende Besuche dramatisch — besonders wichtig für Stammkunden, die deine Seite regelmäßig aufrufen.

Minimaler JavaScript-Einsatz

Jede Zeile JavaScript, die der Browser parsen und ausführen muss, verzögert INP. Baukasten-Systeme wie Wix laden oft 800 KB bis 2 MB JavaScript — für Funktionen, die du nicht brauchst. Eine handgebaute Seite kommt mit unter 10 KB JavaScript aus. Der Unterschied ist bei der Interaktionsgeschwindigkeit sofort spürbar.

Kritisches CSS inline, Rest asynchron

Das CSS für den sichtbaren Bereich (Above the Fold) wird direkt in den HTML-Code eingebettet. Der Rest wird asynchron nachgeladen. So sieht der Nutzer sofort eine gestylte Seite — ohne Render-Blocking.

Warum handgebaute Seiten besser abschneiden als Baukästen

Die Ergebnisse sprechen eine klare Sprache: Handgebaute Webseiten erreichen bei Google PageSpeed regelmäßig Werte von 95–100 Punkten. Baukasten-Seiten (Wix, Jimdo, Squarespace) landen typischerweise bei 30–60 Punkten. WordPress-Seiten mit Theme und Plugins liegen irgendwo dazwischen.

Der Grund ist einfach: Ein Baukasten muss alles können — Blog, Shop, Galerie, Buchung, Newsletter. Also lädt er den Code für alles, auch wenn du nur drei Seiten mit einem Kontaktformular brauchst. Eine handgebaute Seite enthält exakt den Code, den sie braucht — und nichts sonst.

• Kein Framework-Overhead: Keine React-Runtime, kein jQuery, kein Theme-Engine-JavaScript. Nur reines, semantisches HTML und minimales CSS.
• Keine Plugin-Kette: WordPress braucht oft 10–20 Plugins, die jeweils eigene CSS- und JS-Dateien laden. Bei einer handgebauten Seite gibt es eine CSS-Datei und ein schlankes Script.
• Volle Kontrolle über Bilder: Jedes Bild wird manuell auf die richtige Größe skaliert, in WebP konvertiert und mit Lazy Loading ausgeliefert. Baukästen komprimieren automatisch — aber selten optimal.
• Sauberes HTML: Baukästen erzeugen verschachtelte div-Suppen mit hunderten CSS-Klassen. Sauberes, semantisches HTML wird schneller geparst und besser von Google verstanden.

Du willst den Beweis? Teste unsere Referenz-Projekte bei Google PageSpeed Insights. Die Ergebnisse sprechen für sich.

Performance ist kein Luxus — es ist die Grundlage für gute Rankings, niedrige Absprungraten und mehr Kundenanfragen.

Fazit: Core Web Vitals sind kein Nice-to-have

Core Web Vitals sind ein fester Bestandteil des Google-Rankings. Wer sie ignoriert, verliert Sichtbarkeit — besonders bei lokalen Suchanfragen, wo der Wettbewerb oft an wenigen technischen Details entschieden wird.

Die gute Nachricht: Die Optimierung ist kein Hexenwerk. Mit den richtigen Maßnahmen — WebP-Bilder, Font-Preloading, Lazy Loading, schlankes JavaScript und effektives Caching — erreichst du Top-Werte. Und mit einer handgebauten Webseite sind diese Optimierungen von Anfang an eingebaut, nicht nachgerüstet.

Wenn du wissen willst, wie deine aktuelle Webseite bei den Core Web Vitals abschneidet und was sich konkret verbessern lässt, melde dich für ein kostenloses Erstgespräch. Ich analysiere deine Seite und zeige dir die größten Hebel — unverbindlich und transparent.