Optimierung der Google Core Web Vitals für WordPress (ultimative Anleitung)

Sie interessieren sich für das neue Projekt Google Core Web Vitals, wissen aber nicht, wie Sie es mit Ihrer WordPress-Website verbinden können?

Oder sind Sie vielleicht nicht mit dem Core Web Vitals-Projekt vertraut und wissen nicht, warum es so wichtig für WordPress ist?

Unabhängig davon erhalten Sie in diesem Leitfaden einen umfassenden Überblick über Core Web Vitals und WordPress.

Wir erklären Ihnen, was diese sind, wie Sie sie testen können und wie Sie die Bewertung Ihrer Website verbessern können, um ein besseres Nutzererlebnis zu schaffen. Darüber hinaus können Sie sogar Ihr Suchranking verbessern.

Ohne weitere Umschweife, fangen wir an!

Was sind Google Core Web Vitals?

Google betrachtet Core Web Vitals als eine Reihe spezifischer Faktoren, die zur allgemeinen Nutzererfahrung einer Webseite beitragen.

Core Web Vitals besteht derzeit aus drei Metriken: Largest Contentful Paint (Ladegeschwindigkeit), Cumulative Layout Shift (visuelle Stabilität) und First Input Delay (Interaktivität).

Google hält diese Metriken für die wichtigsten, um ein gutes Nutzererlebnis zu bieten.

Eine kurze Erklärung von LCP (Largest Contentful Paint)

Largest Contentful Paint misst, wie schnell der primäre Inhalt für den Nutzer sichtbar wird (egal ob es sich um ein Bild, einen Artikel oder eine Beschreibung handelt).

So kann Ihre Website beispielsweise schnell geladen werden, aber der größte Inhalt erscheint nicht so schnell wie der Rest der Seite.

Stellen Sie sich vor, Sie landen auf einer Seite und sehen das oberste Bild nicht richtig angezeigt. Das wäre doch frustrierend, oder? Sie könnten sogar in Erwägung ziehen, die Seite zu verlassen. Aus diesem Grund ist die Kennzahl "Größtes inhaltsreiches Bild" so eng mit der Nutzererfahrung verknüpft - mehr noch als die allgemeine Ladezeit der Website.

Auch wenn andere Geschwindigkeitstests eine hohe Punktzahl ergeben, kann die Seite den Nutzern dennoch langsam erscheinen.

Aus diesem Grund bezieht Google den LCP in die Bewertung der Webvitalität ein, damit Website-Besitzer eine bessere Vorstellung davon haben, womit sie es zu tun haben.

Mit der AnwendungWP Umbrella können Sie LCP und andere Web Core Vitals überwachen.

Was ist eine gute LCP-Zeit?

Nach Angaben von Google gelten diese Schwellenwerte:

• Schnell - weniger als oder gleich 2,5 Sekunden
• Verbesserungsbedürftig - weniger als 4,0 Sekunden
• Nicht gut - mehr als 4,0 Sekunden.

Eine kurze Erklärung von CLS (Cumulative Layout Shift)

Die kumulative Layoutverschiebung (CLS) einer Website ist ein Maß dafür, wie schnell eine Website visuell stabil wird.

Bestimmte Elemente einer Website werden langsamer geladen als andere. Während dieser Zeit kann der Inhalt Ihrer Website über den Bildschirm wandern.

So wird beispielsweise der gesamte Inhalt nach unten verschoben, wenn der Benutzer auf einem mobilen Gerät einen Absatz liest und darüber ein eingebettetes Video geladen wird. Dies kann für einen Benutzer frustrierend sein, der versucht, eine Aktion auszuführen, z. B. ein Produkt in den Warenkorb zu legen, wenn die Schaltfläche nach unten verschoben wird, weil andere Elemente auf der Seite verschoben wurden.

Was ist eine gute CLS-Zeit?

Nach Angaben von Google gelten diese Schwellenwerte:

• Schnell - weniger als oder gleich 0,1 Sekunden
• Verbesserungsbedürftig - Weniger als oder gleich 0,25 Sekunden
• Nicht gut - Mehr als 0,25 Sekunden.

Eine kurze Erklärung von FID (First Input Delay)

Die erste Eingabeverzögerung (First Input Delay, FID) misst, wie lange es dauert, bis ein Browser als Reaktion auf eine Benutzerinteraktion mit der Ausführung von Event-Handlern beginnt.

Stellen Sie sich einfach vor, ein Benutzer befindet sich auf Ihrer Kontaktformularseite. Er oder sie füllt das Formular aus und klickt auf die Schaltfläche "Senden". FID misst die Geschwindigkeit, mit der die Website die Interaktion verarbeitet.

So definiert Google die FID-Bewertungen:

• Gut - Weniger als oder gleich 100 ms
• Verbesserungsbedürftig - Weniger als oder gleich 300 ms
• Schlecht - Mehr als 300 ms.

So testen Sie Ihren Google Core Web Vitals Score

1. Mit PageSpeed Insights

Sie können Ihren Google Core Web Vitals Score mit Page Speed Insights überprüfen. Geben Sie die URL ein, die Sie testen möchten, und klicken Sie auf die Schaltfläche Analysieren.

2. Mit Google Search Console

Sie können auch den Bericht "Core Web Vitals" in Ihrem Google Search Console Dashboard abrufen. Damit können Sie alle Ihre langsamen URLs verfolgen.

3. Mit WP Umbrella

Zu guter Letzt können Sie mit WP Umbrella auch die wichtigsten Webvitalien überwachen. Klicken Sie auf dem Haupt-Dashboard auf das Tag "Uptime/Leistungsüberwachung".

Von hier aus können Sie alle Ihre Leistungsdaten abrufen und überwachen. Die Daten können auch automatisch in den Wartungsbericht aufgenommen werden, wenn Sie einen solchen senden möchten.

Wie wirkt sich Core Web Vitals auf die SEO-Rankings aus?

Google hat im Juni 2021 begonnen, Core Web Vitals als Rankingfaktor zu verwenden. Es besteht kein Zweifel: Core Web Vitals Metriken beeinflussen Ihre Rankings stark.

Core Web Vitals sind Teil des Seitenerlebnissignals, zusammen mit den Richtlinien für HTTPS-Sicherheit, sicheres Browsing, Mobilfreundlichkeit und aufdringliche Interstitials.

Die Core Web Vitals Ihrer Website beeinflussen sowohl die organischen Rankings für Mobilgeräte und Desktops als auch die Anzeige in den Top Stories. In der Vergangenheit musste Ihre Website AMP verwenden, um in den Top Stories zu erscheinen. Das ist jetzt nicht mehr der Fall. Um in den Top Stories zu erscheinen, muss Ihre Website jetzt Mindestwerte bei den Core Web Vitals erfüllen.

Zusammenfassend lässt sich sagen: Wenn Sie Ihre SEO-Leistung verbessern wollen, müssen Sie die Core Web Vital Scores verbessern.

Verbesserung von Core Web Vitals auf WordPress

Kommen wir nun zur Hauptfrage: Wie können Sie Ihre WordPress-Website optimieren, um bessere Core Web Vitals-Bewertungen zu erzielen?

Es gibt ein paar Dinge, die Sie tun können, um Ihren Web Vitals Score in WordPress zu verbessern. Die folgenden Tipps können Ihnen helfen, den Web Vitals-Score zu erreichen.

Wie Sie Ihr LCP (Largest Contentful Paint) Ergebnis verbessern können (6 Tipps)

Sie sollten einen LCP-Wert von weniger als 2,5 Sekunden anstreben. Die Nutzer haben mehr Freude daran, wenn Ihr Hauptinhalt im ersten Abschnitt des Fensters, in dem sie Ihre Website sehen, schneller geladen wird. 

Dieser erste Bereich wirkt sich direkt auf Ihr Bild "Größter Inhalt" aus, daher müssen Sie Ihre Bilder und Artikeltexte sorgfältig auswählen.

Auch wenn bestimmte Bilder und Textblöcke ideal erscheinen mögen: Wenn Ihre Website zu lange zum Laden braucht, werden Ihre Nutzer nicht zufrieden sein.

Das sollten Sie nie vergessen: Ihre Website muss schnell laden, nicht schick sein.

Ein kleineres Bild mit geringerer Dateigröße und höherer Qualität kann Ihr LCP-Ergebnis verbessern und unter 2,5 Sekunden halten. Wenn Ihr Ergebnis durch Text negativ beeinflusst wird, sollten Sie ihn in kürzere Absätze mit Überschriften aufteilen. Berücksichtigen Sie außerdem:

1. Komprimieren Sie Ihre Bilder so weit wie möglich;
2. Entfernen Sie unnötiges JavaScript und CSS; 
3. Stellen Sie sicher, dass Ihr LCP-Image vorgeladen ist;
4. Entfernen Sie alle unnötigen Bilder;
5. Beseitigen Sie Rendering-blockierende Ressourcen;
6. Optimieren Sie das Laden und Rendern von WebFont;

Wie Sie Ihren FID-Wert (First Input Delay) verbessern können (11 Tipps)

Um Ihren Wert für die erste Eingabeverzögerung zu berechnen, müssen Sie herausfinden, welche Faktoren eine lange Reaktionszeit benötigen, wenn ein Nutzer auf etwas auf Ihrer Website klickt. Wenn Sie die Ladegeschwindigkeit Ihrer Seite überwachen, erhalten Sie eine genaue Vorstellung davon, wie Nutzer auf Mobilgeräten und Desktop-PCs Ihre Inhalte wahrnehmen.

Die Wahl eines besseren Webhosts oder WordPress-Hosts wird Ihren First Input Delay-Wert verbessern. Wenn Sie die Bereitstellung von Dateien optimieren möchten, können Sie auch ein Cache-Plugin wie WP Rocket verwenden. Hier sind einige Tipps, um Ihre Punktzahl zu verbessern:

1. Überwachen Sie Ihre Seitenladezeiten und Betriebszeiten mit WP Umbrella;
2. Wechseln Sie Ihren Hosting-Anbieter, wenn der Engpass besteht;
3. Besorgen Sie sich ein Cache-Plugin (wie WP Rocket);
4. Behebung von Problemen mit dem Cache-Plugin;
5. Komprimieren Sie Bilder und löschen Sie nicht benötigte Animationen;
6. Verzögert, verzögert oder minimiert JavaScript;
7. Entfernen Sie unbenutztes Javascript;
8. Verzichten Sie auf schwerfällige Seitenerstellungsprogramme oder WordPress-Themes, die unnötiges CSS und JavaScript hinzufügen;
9. Begrenzen Sie die Anzahl der von Ihnen verwendeten Codes von Drittanbietern;
10. Große Dateien aufteilen;
11. Komprimieren Sie Bilder und löschen Sie nicht benötigte Animationen;

Wie Sie Ihre CLS-Punktzahl (Cumulative Layout Shift) verbessern können (4 Tipps)

Die Bewertung der kumulativen Layout-Verschiebung einer Website wird beeinträchtigt, wenn verschiedene Elemente langsam geladen werden und dadurch andere Elemente auf dem Bildschirm verschoben werden.

Erweitern Sie in den Page Speed Insights-Ergebnissen die Registerkarte "Große Layoutverschiebungen vermeiden", um zu sehen, welche Elemente den CLS-Wert beeinflussen.

Sie können sehen, welche Elemente beim Laden der Seite die meisten Layout-Verschiebungen verursachen.

Wenn andere Elemente geladen werden, müssen Sie die Abmessungen (Breite und Höhe) von Elementen wie Bildern, Videos, Anzeigen wie Google AdSense und anderen kennen, um zu verhindern, dass sich das visuelle Layout Ihrer Seite verschiebt.

Wenn Sie ein Bild zu WordPress hinzufügen, werden seine Höhe und Breite automatisch hinzugefügt. Stellen Sie dennoch sicher, dass alle anderen Medien, insbesondere eingebettete Medien, über Höhen- und Breitenattribute verfügen. Hier sind die Tipps:

1. Überprüfen Sie alle Abmessungen für Bilder, Videos und Anzeigen;
2. Vergewissern Sie sich, dass die Schriftarten lokal gehostet werden und dass das Vorladen funktioniert;
3. JavaScript sollte verzögert werden, um zu verhindern, dass neue Inhalte angezeigt werden, wenn der Nutzer dies nicht veranlasst.
4. Verwenden Sie anstelle von Höhen- und Breitenattributen einen CSS-Transfer für Ihre Animationen

Tipps zur Leistungssteigerung für WordPress

Wenn Sie beginnen, die PageSpeed Insight-Empfehlungen umzusetzen, sind Ihre Core Web Vitals-Werte nicht so gut, wie Sie es erwarten würden?

Wir haben ein paar zusätzliche Vorschläge für Sie aufgelistet. Diese werden wahrscheinlich auch Ihre WordPress-Leistung verbessern:

1. Stellen Sie sicher, dass Ihr Hosting-Anbieter schnell ist. Das Hosting trägt erheblich zur LCP-Bewertung bei, da es die Reaktionsfähigkeit des Servers beeinflusst. Der Wechsel von Shared Hosting zu Dedicated Hosting kann der beste Weg sein, um die Leistung zu verbessern. Alternativ können Sie sich auch für ein hochwertiges verwaltetes WordPress-Hosting wie Kinsta entscheiden. 
2. Achten Sie darauf, Ihre Bilder zu optimieren. Die Auswirkung der Bildoptimierung auf die LCP- und FID-Bewertungen wurde oben bereits erläutert. Sie sind auch für den PageSpeed-Gesamtwert wichtig.
3. Achten Sie darauf, Ihre Bilder zu optimieren. Die Auswirkung der Bildoptimierung auf die LCP- und FID-Bewertungen wurde oben bereits erläutert. Sie sind auch für den PageSpeed-Gesamtwert wichtig.
4. Beschränken Sie die Anzahl der Plugins, die Sie installieren, auf diejenigen, die notwendig und leichtgewichtig sind. Plugins sind in WordPress-Websites weit verbreitet. In den meisten Fällen wirken sich Plugins auf das Frontend aus, weil sie JavaScript-Dateien enthalten - und Sie wissen, wie wichtig JS-Dateien für die Leistung Ihrer Website sind. 

Die einzigen zwei Plugins, die Sie benötigen, um Ihre Core Web Vitals zu erhöhen

1. WP Rakete

Es gibt kein besseres Caching-Plugin als WP Rocket. Es kann verwendet werden, um die Leistung von WordPress-Sites, SEO-Rankings und Konversionen zu verbessern. Es erfordert keine Kodierung. Mit WP Rocket optimiert WordPress seinen Code automatisch. Um es einzurichten und seine Vorteile zu nutzen, ist keine Raketenwissenschaft erforderlich.

2. Short Pixel Images Optimizer

ShortPixel ist ein einfach zu bedienendes, leichtgewichtiges Plugin zur Bildoptimierung, das alle Ihre bisherigen Bilder und PDF-Dokumente mit einem einzigen Klick komprimieren kann. 

Das ShortPixel-Plugin wird direkt in Ihr WordPress-Dashboard installiert, wo Sie den Prozess der Bildoptimierung einfach verwalten können.