Verbessere deine Core Web Vitals

Jede Sekunde zählt: Bei der Ladegeschwindigkeit deiner Website darfst du keine Abstriche machen. Braucht deine Seite zu lange zum Laden, sind Nutzer:innen schnell wieder weg und dir gehen wertvolle Conversions durch die Lappen. Wir erklären dir heute die Core Web Vitals. Als Grundlage nutzen wir einen Artikel von KonversionsKRAFT.

Was sind Core Web Vitals?
Der Name sagt es schon: Core Web Vitals (CWV) würde zu deutsch “lebenswichtige Kernfunktionen einer Webseite“ bedeuten. Diesen Ausdruck vergessen wir schnell wieder und bleiben bei der englischen Version. Gute CWV sind essentiell für die Performance deiner Seite und wichtig für die User Experience.
Die Core Web Vitals stehen für die Geschwindigkeit deiner Seite. Dazu zählen Faktoren wie Reaktionszeit, Ladezeit und visuelle Stabilität. Sie bestehen aus drei Haupt-Metriken:

1. Largest Contentful Paint (LCP)
   Dieser Messwert gibt an, wie lange es dauert, bis der größte visuelle Teil des Inhalts (beispielsweise eine Grafik) geladen hat.
2. First Input Delay (FID)
   Der FID misst, wie schnell eine Seite auf Klicks und Eingaben von Nutzerinnen und Nutzern reagiert. Der FID hängt übrigens mit dem LCP zusammen: Interaktionen funktionieren erst, wenn der größte Teil des Inhalts bereits geladen wurde.
3. Cumulative Layout Shift (CLS)
   Der CLS misst die visuelle Stabilität der Website. Hier kommt es darauf an, wie sehr sich Elemente verschieben, wenn andere Elemente nachladen.

Warum brauche ich gute Core Web Vitals?
Die Ladezeit deiner Website beeinflusst die Absprungrate. Userinnen und User wollen schnell zur gewünschten Information gelangen. Wenn die Seite zu lange zum Laden braucht, sind sie schnell wieder weg. Das wirkt sich negativ auf dein Ranking, die Absprungrate, deine Conversion Rate und deinen Umsatz aus. In einer Studie von Unbounce geben 70 % aller Befragten an, dass die Ladegeschwindigkeit einer Seite die Wahrscheinlichkeit, einen Kauf zu tätigen, maßgeblich beeinflusst. Von Google gemessene Werte zeigen, dass Nutzer:innen höchstens drei Sekunden warten, bevor sie eine Seite wieder verlassen.
🌱 Wusstest du, dass das Internet CO2 produziert? Der Besuch einer Website wie otto.de oder zalando.de verbraucht etwa 0,4 – 0,5g CO2. Je schneller eine Website ist, desto weniger CO2 verbraucht sie.

3 Tipps, um die Core Web Vitals zu verbessern

Tipp 1: CSS und JavaScript reduzieren
Der Browser stellt eine Website erst sichtbar dar, wenn der HTML Code und das CSS vollständig verarbeitet wurden. Entferne unnötigen Code, um diesen Prozess zu beschleunigen. Auch das JavaScript braucht Zeit zum Laden. Du kannst die Datei allerdings mit async oder defer kennzeichnen und dem Browser so mitteilen, dass er mit der Darstellung der Seite nicht warten muss, bis das komplette JavaScript geladen hat.
👉🏼 Pro-Tipp für alle Online-Marketer:innen: Holt euch hier eine Entwicklerin oder einen Entwickler zur Hilfe. Das macht den Prozess schneller und weniger nervenaufreibend.

Tipp 2: Inhalte verschlanken
Eine Website wächst mit der Zeit, immer wieder kommen neue Elemente hinzu. Übrige, alte Elemente machen die Seite langsam. Hier empfehlen wir dir eine Bestandsaufnahme: Brauchst du wirklich verschiedene Bilder im Slider auf der Startseite? Verwendest du alle geladenen Schriftarten? Nutzt du das komplette Framework?
Bevor du Elemente endgültig entfernst, testest du, wie sich die Seite ohne das Element verhält und ob sie immer noch ansprechend aussieht.
👉🏼 Pro-Tipp: An dieser Stelle kannst du über Lazy Load nachdenken. Statt Elemente zu entfernen, werden sie erst geladen, wenn der Nutzer oder die Nutzerin zur entsprechenden Stelle auf der Seite scrollt.

Tipp 3: Visuelle Inhalte optimieren
Grafische Inhalte nehmen den größten Teil der Bandbreite deiner Website in Anspruch. Nicht-optimiert können sie enorm viel Ladezeit kosten. Prinzipiell entscheidest du für jede Grafik, jedes Bild und jedes Video einzeln, ob du durch Verringern der Pixelanzahl oder mit einem anderen Format (etwa JPEG statt PNG) Ladezeit einsparen kannst.

Tools, um die Core Web Vitals zu checken:

• PageSpeed Insights: Mit Googles Messinstrument checkst du die Ladezeiten. Zusätzlich liefert dir die Seite Optimierungsmöglichkeiten. Die Nutzung ist kostenlos.
• Google Search Console: In deiner Google Search Console findest du unter Core Web Vitals einen Bericht über die Performance deiner URLs.
• Webpagetest: Hier erhältst du einen visuellen Überblick über die Ladezeiten der einzelnen Elemente auf deiner Seite. Mit dem Webpagetest sind besonders detaillierte Analysen der Ladegeschwindigkeit möglich.
• Layout Shift Generator: Der Layout Shift Generator konzentriert sich auf den CLS deiner Seite. Damit erstellst du ein GIF, welches den visuellen Aufbau deiner Seite für Nutzer:innen darstellt.

Du hast noch nicht genug?
Vorletzte Woche haben wir in unserem 121STUNDENtalk Videopodcast mit dem Webperformance-Experten Alin Radulescu gesprochen. Von ihm bekommst du wertvolle Tipps zur PageSpeed. Klick dich rein:

🔍 Weitere Informationen zu den Core Web Vitals findest du bei KonversionsKRAFT.