Optimieren von Core Web Vitals für WordPress (ultimative Anleitung)

Möchten Sie die wichtigsten Webvitalien für WordPress optimieren?

Core Web Vitals ist eine Initiative von Google, die Website-Besitzern hilft, die Benutzerfreundlichkeit und Qualität ihrer Websites zu verbessern. Diese Signale sind entscheidend für den Erfolg jeder Website.

In diesem Leitfaden zeigen wir Ihnen, wie Sie Google Core Web Vitals für WordPress ganz einfach und ohne besondere technische Kenntnisse optimieren können.

Hier ist ein kurzer Überblick darüber, was wir in diesem Leitfaden behandeln werden.

Was sind Google Core Web Vitals?

Bei den Google Core Web Vitals handelt es sich um eine Reihe von Website-Leistungskennzahlen, die Google als wichtig für das Gesamterlebnis der Nutzer einer Website erachtet. Diese Web-Vital-Bewertungen sind Teil der Google-Gesamtbewertung für das Seitenerlebnis, die sich auf Ihre SEO-Rankings auswirkt.

Die Wahrheit ist, dass niemand eine langsam ladende Website mag, auch nicht Google.

Selbst wenn Ihre Website schnell lädt, kann es sein, dass sie für die Nutzer nicht voll funktionsfähig ist, um das zu tun, was sie tun wollen, oder um auf die Informationen zuzugreifen, die sie benötigen.

Das ist es, was Web Vitals Ihnen hilft zu messen. Wie schnell lädt Ihre Website, wird sichtbar und ist für Ihre Nutzer bereit?

Dazu verwendet Google drei Qualitätstests (Web Vitals).

• Größtes inhaltsreiches Bild (LCP)
• Erste Eingabeverzögerung (FID)
• Kumulative Layout-Verschiebung (CLS)

Die Namen dieser Tests klingen vielleicht zu technisch, aber was sie bewirken, ist recht einfach zu verstehen.

Sehen wir uns an, wie die einzelnen Web Vitals-Tests funktionieren, was sie messen und wie Sie Ihr Ergebnis verbessern können.

Größtes inhaltsreiches Bild – LCP

Largest Contentful Paint oder LCP prüft, wie schnell der Hauptinhalt (ob es sich um ein Bild, einen Artikel oder eine Beschreibung handelt) für die Nutzer sichtbar wird.

Ihre Website kann zum Beispiel schnell laden, aber der größte Inhalt erscheint vielleicht nicht so schnell auf dem Bildschirm wie der Rest der Seite.

Andere Geschwindigkeitstests geben Ihnen eine hohe Punktzahl, aber aus der Sicht der Nutzer ist die Seite immer noch langsam.

Aus diesem Grund misst Google die LCP als Teil der Web-Vitalitätsbewertung, damit Website-Besitzer ein klareres Bild davon haben.

Verzögerung der ersten Eingabe (FID)

Die erste Eingabeverzögerung (First Input Delay, FID) misst die Zeit, die der Browser eines Nutzers benötigt, um mit der Verarbeitung von Event-Handlern als Reaktion auf die Interaktion eines Nutzers zu beginnen.

In einfachen Worten: Nehmen wir an, ein Benutzer befindet sich auf Ihrer Kontaktformularseite. Er füllt das Formular aus und klickt auf die Schaltfläche Senden. Mit FID wird gemessen, wie schnell Ihre Website diese Interaktion verarbeitet.

Ein noch einfacheres Beispiel wäre die Zeit, die vergeht, wenn ein Nutzer auf einen Link klickt, bis sein Browser die nächste Abfolge von Ereignissen verarbeitet.

Kumulative Layout-Verschiebung (CLS)

Die kumulative Layoutverschiebung (Cumulative Layout Shift, CLS) misst die Zeit, die eine Website benötigt, um visuell stabil zu werden.

Wenn eine Website geladen wird, benötigen einige Elemente mehr Zeit als andere. Während dieser Zeit kann sich der Inhalt Ihrer Website auf dem Bildschirm weiter bewegen.

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

Video-Anleitung

[eingebetteter Inhalt]

Wenn Sie eine schriftliche Anleitung bevorzugen, lesen Sie einfach weiter.

So testen Sie Ihren Google Core Web Vitals Score

Der einfachste Weg, Ihren Google Core Web Vitals Score zu testen, ist die Verwendung des Page Speed Insights-Tools. Geben Sie einfach die URL ein, die Sie testen möchten, und klicken Sie auf die Schaltfläche „Analysieren“.

Die wichtigsten Ergebnisse werden unter dem Abschnitt „Felddaten“ angezeigt.

Der Einfachheit halber sehen Sie oben eine Meldung, die besagt: „[…] die Felddaten zeigen, dass diese Seite die Core Web Vitals Bewertung besteht“.

In der nachstehenden Tabelle können Sie die tatsächliche Punktzahl für alle drei Core Vitals sehen. Hier sehen Sie, wie viel Punkte Sie erreichen müssen, um die Core Web Vitals-Tests für jedes Element zu bestehen.

• Größtes inhaltsreiches Bild (LCP) – 2,5 Sekunden
• First Input Delay (FID) – weniger als 100 Millisekunden
• Kumulative Layout-Verschiebung (CLS) – weniger als 0,1

Wie zeigt man Google Core Web Vitals für die gesamte Website an?

Mit dem Tool Page Speed Insights können Sie jetzt eine einzelne Seite überprüfen. Wenn es sich bei der zu prüfenden Seite um das Stammverzeichnis Ihres Domainnamens handelt, können Sie auch auf das Kontrollkästchen „Ursprungsübersicht anzeigen“ klicken.

Dadurch wird die Bewertung für alle Seiten angezeigt, die von diesem Ursprung aus aufgerufen werden.

Um jedoch wirklich in die Tiefe zu gehen, können Sie auch auf den Bericht „Core Web Vitals“ in Ihrem Google Search Console Dashboard zugreifen.

So können Sie sehen, wie viele URLs auf Ihrer Website die Tests bestanden haben, welche URLs verbessert werden müssen und welche Seiten eine schlechte Bewertung haben.

Um noch detailliertere Berichte für Web Vitals zu erhalten, können Sie den Lighthouse-Geschwindigkeitstest verwenden, indem Sie das Web.dev Measure-Tool aufrufen oder den integrierten Test im Google Chrome-Browser nutzen.

Öffnen Sie einfach eine Website in Chrome, klicken Sie mit der rechten Maustaste auf eine beliebige Stelle des Bildschirms und wählen Sie dann die Option Untersuchen. In den Registerkarten sehen Sie eine Option namens Lighthouse.

Klicken Sie anschließend auf die Schaltfläche Bericht generieren.

Hinweis: Sie müssen den Chrome-Test im Inkognito-Modus durchführen, um möglichst genaue Ergebnisse zu erhalten. Andernfalls können sich Ihre Browsererweiterungen negativ auf die angezeigte Core Web Vitals-Bewertung auswirken.

Warum sind Core Web Vitals wichtig?

Core Web Vitals sind wichtig, weil sie widerspiegeln, wie Ihre Website bei den Nutzern ankommt. Dabei geht es nicht nur darum, wie schnell eine Website geladen wird, sondern auch darum, wie schnell die Benutzer sie tatsächlich nutzen können.

Laut einer aktuellen Studie kann eine Verzögerung von 1 Sekunde bei der Seitenladezeit zu einem Verlust von 7 % bei den Konversionen, 11 % bei den Seitenaufrufen und 16 % bei der Kundenzufriedenheit führen.

Deshalb ist es so wichtig, Ihre Website für Geschwindigkeit und Leistung zu optimieren. Die meisten Tools zur Leistungsmessung berücksichtigen jedoch nicht wirklich die Qualität der Benutzererfahrung.

Eine schnellere Website mit schlechtem Benutzererlebnis kostet Sie immer noch Konversionen, weniger Seitenaufrufe und eine geringere Kundenzufriedenheit. Die Verbesserung von Core Web Vitals hilft Ihnen, dies zu ändern.

Die Benutzerfreundlichkeit ist auch ein wichtiger Faktor für die SEO-Rangliste. Google hat bereits angekündigt, dass ab Mai 2021 das Suchalgorithmus-Update die Seitenerfahrung als einen der Rankingfaktoren einbeziehen wird.

Sehen wir uns also an, wie Sie Ihre wichtigsten Webvitalien leicht verbessern können, um ein besseres Nutzererlebnis auf Ihrer Website zu bieten.

Wie Sie Ihre Core Web Vitals in WordPress verbessern können (7 Tipps)

Die Verbesserung Ihrer Core Web Vitals in WordPress ist gar nicht so schwierig. Mit einigen grundlegenden Tipps zur Leistungsoptimierung können Sie den Web Vitals-Score leicht übertreffen.

1. Optimieren Sie Ihr WordPress-Hosting

Ihr WordPress-Hosting-Unternehmen spielt die wichtigste Rolle für die Leistung Ihrer Website.

Sie sind in der Lage, ihre Server für WordPress zu optimieren, was Ihrer Website eine felsenfeste Plattform bietet, auf der sie aufbauen kann.

Wir empfehlen SiteGround für eine leistungsstarke Website. SiteGround ist einer der offiziell empfohlenen WordPress-Hosting-Anbieter, und wir verwenden SiteGround für die WPBeginner-Website.

Um Ihrer Website den nötigen Leistungsschub zu geben, verwendet SiteGround die Google Cloud Platform für seine Server zusammen mit ultraschnellem PHP.

Ihr SG Optimizer-Plugin wird von über einer Million Websites genutzt. Es führt automatisch weitere Leistungsverbesserungen durch und schaltet das integrierte Caching ein, das alles tut, was WP Rocket tut, und mehr.

Es ist wichtig anzumerken, dass das SG Optimizer Plugin nur auf SiteGround Hosting-Accounts funktioniert, und diese Leistungsoptimierungen sind für alle Tarife verfügbar, einschließlich der niedrigsten Option.

Wenn Sie einen anderen WordPress-Hosting-Anbieter verwenden, empfehlen wir die Verwendung von WP Rocket zusammen mit ein paar anderen Tools, um eine bessere Core-Web-Vitalscore zu erreichen.

WP Rocket ist das beste WordPress-Caching-Plugin auf dem Markt. Es ermöglicht Ihnen die einfache Einrichtung von Caching auf Ihrer WordPress-Website, ohne dass Sie sich mit den technischen Details der Serververwaltung befassen müssen.

2. Verbesserung des Largest Content Paintful (LCP) Score

Wie bereits erwähnt, ist der Largest Content Paintful (LCP) buchstäblich der größte Inhaltsteil innerhalb des Viewports einer Seite. Bei einem Blogbeitrag könnte dies beispielsweise das Bild oder der Text des Artikels sein.

Je schneller dieser Inhalt geladen wird, desto höher ist Ihr LCP-Wert.

Woher wissen Sie, welcher Inhalt bei dem Test als der größte gilt? Nun, Sie müssen zu den Testergebnissen nach unten scrollen und die Registerkarte „Größtes inhaltsreiches Bildelement“ erweitern.

Dort sehen Sie die Elemente, die für die LCP-Bewertung berücksichtigt werden. Wenn es sich um ein größeres Bild handelt, können Sie versuchen, es durch ein kleineres Bild oder ein Bild mit geringerer Dateigröße und Qualität zu ersetzen. Siehe unseren Leitfaden zur Optimierung von Bildern für die Webleistung.

Wenn es sich um Text handelt, können Sie versuchen, ihn in Absätze und Überschriften aufzuteilen.

3. Verbesserung der FID-Werte (First Input Delay)

Der Wert für die erste Eingabeverzögerung misst die Zeit, die vergeht, bis ein Nutzer auf etwas auf Ihrer Website klickt und sein Browser mit der Verarbeitung der Elemente beginnt.

Der wichtigste Tipp, um dies zu verbessern, ist die Verwendung eines besseren Webhostings oder sogar einer verwalteten WordPress-Hosting-Plattform.

Eine weitere einfache Möglichkeit, den FID-Wert zu verbessern, ist die Verwendung eines Caching-Plugins wie WP Rocket. Es verfügt über eine integrierte Funktion, mit der Sie die Dateizustellung optimieren können.

Zunächst müssen Sie das WP Rocket-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Gehen Sie danach auf die Seite Einstellungen “ WP Rocket und wechseln Sie zur Registerkarte Datei-Optimierung.

Scrollen Sie bis zum Ende der Seite und aktivieren Sie das Kästchen neben der Option „JavaScript zeitversetzt laden“.

Vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, um Ihre Änderungen zu speichern.

Durch das Zurückstellen von JavaScript kann Ihre Website geladen werden, ohne auf das Laden von JavaScript zu warten. Dies verbessert den First Input Delay (FID) Score für Seiten, bei denen JavaScript die Ursache sein kann.

4. Verbesserung des Cumulative Layout Shift (CLS) Scores

Der Cumulative Layout Shift (CLS) Score wird beeinflusst, wenn verschiedene Elemente auf einer Webseite langsam laden und andere Elemente auf dem Bildschirm verschieben.

Sie können sehen, welche Elemente den CLS-Wert beeinflussen, indem Sie die Registerkarte „Große Layoutverschiebungen vermeiden“ in den Page Speed Insights-Ergebnissen erweitern.

Dies zeigt Ihnen die Elemente an, die beim Laden der Seite die meisten Layoutverschiebungen verursachen.

Um sicherzustellen, dass sich das visuelle Layout Ihrer Seite nicht verschiebt, wenn andere Elemente geladen werden, müssen Sie den Browsern die Abmessungen (Breite und Höhe) der Elemente wie Bilder, Videoeinbettungen, Anzeigen wie Google AdSense und andere mitteilen.

WordPress fügt den Bildern, die Sie hinzufügen, automatisch Attribute für Höhe und Breite hinzu. Sie können jedoch auch alle anderen Medien, insbesondere Einbettungen, überprüfen, um sicherzustellen, dass sie alle über Höhen- und Breitenattribute verfügen.

Eine Möglichkeit, dies zu tun, ist die Verwendung des Inspektionstools. Klicken Sie einfach mit der rechten Maustaste in Ihren Browser und wählen Sie Inspizieren, um die Entwicklerkonsole zu öffnen.

Sie können dann auf verschiedene Seitenelemente zeigen und klicken, um deren Quellcode zu markieren. Dort können Sie sehen, ob das Element Attribute für Breite und Höhe definiert hat.

5. Renderblockierende Elemente beseitigen

Renderblockierende Elemente sind Elemente, die langsamer laden, aber andere Elemente daran hindern, zuerst zu laden. Dies wirkt sich auf die Gesamtbewertung von Web Vitals und die Benutzerfreundlichkeit Ihrer Website aus.

Die Ergebnisse von Page Speed Insights zeigen Ihnen die Render-Blocking-Elemente an. Dabei handelt es sich in der Regel um JavaScript- oder CSS-Dateien, die von Ihren WordPress-Plugins, Drittanbieter-Tools wie Google Analytics, Facebook Pixel, Google Ads und anderen hinzugefügt wurden.

Die meisten dieser Elemente werden jedoch programmatisch von verschiedenen Plugins oder Themes zu Ihrer Website hinzugefügt. Das macht es für einen Anfänger schwieriger, sie zu entfernen oder richtig zu laden.

Wir haben eine Schritt-für-Schritt-Anleitung, wie Sie Rendering-Blocking-Elemente in WordPress ganz einfach entfernen können, ohne in den Code Ihrer Website einzugreifen.

6. Die richtige Größe von Bildern in WordPress

Eine weitere häufige Ursache für einen niedrigen Core Web Vitals Score sind sehr große Bilder. Viele WordPress-Nutzer laden hochauflösende Bilder auf ihre Websites hoch, die länger zum Laden brauchen und in den meisten Fällen nicht notwendig sind.

Noch problematischer wird dies für Nutzer auf mobilen Geräten. Ihr responsives WordPress-Theme und WordPress passen das Bild automatisch an den Handy-Bildschirm des Nutzers an, aber sie würden trotzdem eine größere Datei laden.

Wir haben eine detaillierte Anleitung, wie Sie Bilder für Ihre WordPress-Website richtig optimieren können, ohne dass die Qualität leidet oder die Leistung beeinträchtigt wird.

7. Verwenden Sie ein CDN zum Server, um den Web Vitals Score zu verbessern

CDN oder Content Delivery Network sind Dienste von Drittanbietern, die es Ihnen ermöglichen, statische Inhalte Ihrer Website von mehreren Servern rund um den Globus bereitzustellen.

Dadurch können Nutzer diese statischen Dateien wie Bilder und CSS von Servern herunterladen, die ihnen am nächsten sind. Außerdem wird Ihre Website dadurch entlastet, so dass andere Elemente weiter geladen werden können.

Sie können eine Cloud-Firewall-App wie Sucuri verwenden, die über einen integrierten CDN-Dienst verfügt. Sucuri hilft Ihnen auch dabei, bösartige und Spam-Anfragen zu blockieren, wodurch die Ressourcen Ihrer Website weiter entlastet werden.

Als Alternative können Sie auch das kostenlose CDN von Cloudflare verwenden. Es verfügt über einen grundlegenden Firewall-Schutz und einen CDN-Dienst, der die Webvitalität Ihrer Website verbessern würde.

Wir hoffen, dass dieser Leitfaden Ihnen geholfen hat, zu lernen, wie Sie die wichtigsten Webvitalwerte für WordPress optimieren können. Ein weiterer wichtiger Aspekt einer guten Benutzererfahrung ist die Sicherheit. Wir empfehlen Ihnen, unsere WordPress-Sicherheitscheckliste zu befolgen, um sicherzustellen, dass die Leistung Ihrer Website nicht durch Spam oder DDoS-Angriffe beeinträchtigt wird.

Vielleicht interessiert Sie auch unser Vergleich der besten Videobearbeitungssoftware und der besten Webinar-Plattformen, um leistungsoptimierte Medieninhalte zu erstellen, die die Geschwindigkeit Ihrer Website nicht verlangsamen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.