Core Web Vitals im Detail: So liest du deinen VitoScore richtig

Einleitung

Ein Score ist nur so nützlich wie das Verständnis dahinter. Wer weiß, was der VitoScore wirklich misst und wie die drei Core Web Vitals zusammenspielen, verwandelt eine einzelne Zahl in einen konkreten Maßnahmenplan. Dieser Artikel führt dich Wert für Wert durch deinen Report – von der Ladezeit über die Interaktivität bis zur Layout-Stabilität – und zeigt dir, welche Stellschrauben tatsächlich den größten Effekt haben.

Was misst der VitoScore?

Der VitoScore kombiniert Ladezeit, SEO und UX zu einer Bewertung von 0 bis 100 Punkten. Die Gewichtung ist bewusst ungleich verteilt, weil die Ladezeit den größten Einfluss auf das Nutzererlebnis hat:

• Performance (Ladezeit) – 40 % des Scores
• SEO – 20 % des Scores
• Accessibility – 20 % des Scores
• Best Practices – 20 % des Scores

Im Kern der Performance-Bewertung stecken die drei Core Web Vitals, mit denen auch Google die Nutzererfahrung misst:

Tipp: Analysiere deine Seite immer aus Sicht von Realgeräten. Ein perfekt eingerichtetes Test-Setup sagt wenig darüber aus, was echte Besucher auf durchschnittlichen Smartphones erleben.

So liest du die einzelnen Werte

Jede Kennzahl wird in deinem Report auf einer Skala von 0 bis 100 bewertet und farblich eingeordnet:

• 80–100 Punkte (grün) – Zielwert erreicht, keine Maßnahme nötig
• 50–79 Punkte (gelb) – Verbesserungspotenzial, zeitnah angehen
• unter 50 Punkte (rot) – klarer Handlungsbedarf

Wichtig: Der Gesamtscore ist kein einfacher Durchschnitt aller Werte. Eine einzige rote Kennzahl kann die Performance-Kategorie deutlich nach unten ziehen – selbst wenn die übrigen Werte grün sind. Genau deshalb lohnt sich der Blick ins Detail, bevor du Maßnahmen ableitest.

LCP – Largest Contentful Paint

Was der Wert aussagt

Der LCP misst, wann das größte sichtbare Element einer Seite vollständig gerendert ist. Das sind meist Hero-Bilder, große Überschriften oder Videos – also genau die Elemente, auf die Besucher zuerst schauen. Je später dieses Element erscheint, desto länger wirkt die Seite leer und langsam.

Ein LCP unter 2,5 Sekunden gilt als gut. Liegt der Wert deutlich darüber, warten Besucher im Durchschnitt spürbar länger auf die erste verwertbare Darstellung – und Google stuft die Seite als langsam ein.

Typische Ursachen für einen schwachen LCP

• langsame Serverantwortzeit (TTFB) durch teure Backend-Abfragen oder fehlende Caches
• render-blockierende CSS- oder JavaScript-Dateien im Kopfbereich
• unkomprimierte, zu große Bilder, die erst spät geladen werden
• fehlende Priorisierung des wichtigsten Bildes

So senkst du den LCP

1. Serverantwortzeit prüfen: Caches aktivieren, Datenbank-Abfragen optimieren und einen CDN-Service nutzen.
2. Wichtigstes Bild priorisieren: Das Hero-Bild lädt am schnellsten, wenn du es früh anforderst:

<img src="/img/hero.webp" width="1200" height="675" alt="Hero" fetchpriority="high">

1. Bilder modern ausliefern: WEBP-Dateien mit passenden Maßen schlagen JPGs derselben Qualität oft um ein Drittel. Der VitoScore misst deine Seite unabhängig davon, wie viel Traffic sie hat – die Dateigröße zählt.
2. Render-blockierende Dateien verschieben: Nicht-kritische Skripte später laden lassen und CSS kritischen Pfads inline ausliefern.

INP – Interaction to Next Paint

Was der Wert aussagt

Der INP ersetzt seit 2024 den früheren FID und misst, wie schnell die Seite auf alle Nutzer-Interaktionen reagiert – Klicks, Tippen und Tastatureingaben. Gemessen wird die Zeit vom Moment der Eingabe bis zum nächsten sichtbaren Bildschirm-Update. Der Zielwert liegt bei unter 200 Millisekunden.

Eine Seite kann schnell laden und trotzdem träge wirken, wenn JavaScript einzelne Eingaben blockiert. Gerade bei Single-Page-Elementen, Suchfeldern oder Formularen macht sich das sofort bemerkbar.

Typische Ursachen für einen hohen INP

• lange JavaScript-Tasks im Haupt-Thread, die Eingaben blockieren
• aufwendige Event-Handler, die direkt auf Klick oder Tastendruck laufen
• schwergewichtige Third-Party-Skripte (Analytics, Chats, Widgets), die nach dem Laden weiterarbeiten

So verbesserst du den INP

• Lange Tasks aufteilen: Große Arbeitspakete in setTimeout-Chunks oder requestIdleCallback aufteilen, damit der Browser zwischen den Aufgaben Eingaben verarbeiten kann.
• Event-Handler schlank halten: Aufwendige Arbeit aus dem Handler auslagern und erst nach dem nächsten Frame ausführen.
• Nicht-kritisches JavaScript verzögern: Scripts, die erst nach der ersten Interaktion gebraucht werden, mit defer oder erst nach Nutzerinteraktion nachladen.

Ausführliche Hinweise und Codebeispiele findest du im Beitrag INP verbessern: Interaction to Next Paint im Detail.

CLS – Cumulative Layout Shift

Was der Wert aussagt

Der CLS misst, wie stark sich die Seite nach dem ersten Rendern unerwartet verschiebt. Wenn ein Bild nachlädt und den Text nach unten drückt oder ein Banner auftaucht und den Inhalt verdeckt, entsteht ein Layout-Shift. Der Zielwert liegt bei unter 0,1 – alles darüber fühlt sich für Besucher instabil an und wird von Google negativ bewertet.

Typische Ursachen für Layout-Shifts

• Bilder ohne Breiten- und Höhenangaben
• Web-Fonts, die den Text nach dem Laden umbrechen
• Werbung, Embeds und Banner ohne reservierten Platz
• Inhalte, die erst nach dem ersten Rendern oberhalb des sichtbaren Bereichs eingefügt werden

So senkst du den CLS

1. Bilder brauchen feste Maße – entweder als Attribute oder über CSS:

.card img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

1. Platz für dynamische Elemente reservieren: Werbebanner, Videos und Embeds bekommen eine Mindesthöhe, damit nichts nachrutscht.
2. Fonts verlustfrei laden: font-display: swap verhindert, dass Text verschwindet und später umbricht – und lade die wichtigste Schriftart per preload.

Das komplette Handwerkszeug für stabile Layouts findest du im Beitrag CLS senken: Layout-Sprünge sicher vermeiden.

Den Gesamtscore richtig einordnen

Ein VitoScore von 82 Punkten klingt gut – die Frage ist, wo die 18 verlorenen Punkte liegen. Drei Szenarien verdeutlichen das:

Szenario B und C erreichen ähnliche Gesamtwerte, führen aber zu völlig unterschiedlichen Maßnahmen. Der Score zeigt dir also nicht nur wie gut, sondern bei genauer Betrachtung auch wo deine Seite steht.

Dein Workflow: vom Score zur Maßnahme

1. Domain in den VitoScore eintragen und den ersten Report erstellen lassen.
2. Report unter /results aufschlagen und die Kennzahlen einzeln durchgehen.
3. Die schwächste Kennzahl zuerst bearbeiten – rot vor gelb, gelb vor grün.
4. Messung wiederholen und vergleichen: Erst nach jeder Einzelmaßnahme neu messen, sonst lässt sich der Effekt nicht zuordnen.

Faustregel: Eine gezielte Maßnahme an der schwächsten Kennzahl bringt mehr als drei parallele Maßnahmen an grünen Werten.

Die häufigsten Fehler beim Lesen des Scores

• Nur den Gesamtscore beachten: Die Verteilung dahinter ist wichtiger als die einzelne Zahl.
• Den schwächsten Wert ignorieren: Ein grüner Schnitt reicht nicht, wenn eine Kennzahl rot ist.
• Unvergleichbare Messungen: Wochenweise wechselnde Cache-Zustände, Geräte oder Netze verfälschen den Vergleich.
• Einmalige Messungen überbewerten: Der Report zeigt die Situation im Moment der Messung – regelmäßige Läufe erkennen Trends.
• Über das Ziel hinaus optimieren: Werte deutlich unter dem Grenzwert zu jagen kostet Zeit, die bei anderen Maßnahmen besser investiert ist.

Fazit

Der VitoScore ist eine Karte, kein Selbstzweck. Die drei Core Web Vitals erzählen dir, wo deine Seite aus Nutzersicht hakt: zu langsame erste Darstellung, träge Interaktion oder instabiles Layout. Wer die Kennzahlen richtig liest, findet in wenigen Minuten die Maßnahmen mit dem größten Hebel – und kann jeden Fortschritt in der nächsten Messung überprüfen.

Wenn du tiefer in einzelne Themen einsteigen willst:

• CLS senken: Layout-Sprünge sicher vermeiden
• INP verbessern: Interaction to Next Paint im Detail
• 10 SEO-Tipps, die wirklich etwas bewirken