So optimieren Sie Core Web Vitals für WordPress (Ultimativer Leitfaden)

Niemand mag eine langsame Website. Wenn Ihre Seiten zu lange zum Laden brauchen, werden Besucher abspringen und Google wird Ihr Ranking verschlechtern.

Core Web Vitals sind das Maß, das Google zur Messung dieses Erlebnisses verwendet, aber die technische Fachsprache kann für Nicht-Entwickler überwältigend sein. Sie könnten befürchten, dass die Behebung dieser Probleme komplexe Programmierkenntnisse erfordert.

Die gute Nachricht ist, dass Sie kein Technik-Guru sein müssen, um eine gute Note zu erhalten. Wir haben Jahre damit verbracht, WPBeginner für Geschwindigkeit zu optimieren und den Prozess auf einige praktische Schritte reduziert.

In diesem Leitfaden führen wir Sie durch die Optimierung von Core Web Vitals in WordPress, um Ihr SEO und Ihre Benutzererfahrung zu verbessern.

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

Was sind Google Core Web Vitals?

Googles Core Web Vitals sind spezifische Leistungsmetriken, die die Suchmaschine verwendet, um die allgemeine Nutzererfahrung einer Website zu messen. Diese Bewertungen sind Teil der Page-Experience-Signale von Google, die Ihre SEO-Rankings beeinflussen können.

Die Wahrheit ist, dass niemand eine langsame Website mag, und dazu gehört auch Google. Core Web Vitals helfen Ihnen zu messen, wie schnell Ihre Website für Ihre Besucher sichtbar, interaktiv und stabil wird.

Dazu verwendet Google drei wichtige Tests:

• Largest Contentful Paint (LCP)
• Interaktion bis zum nächsten Anstrich (INP)
• Cumulative Layout Shift (CLS)

Die Namen dieser Tests mögen technisch klingen, aber was sie messen, ist recht einfach zu verstehen. Schauen wir uns an, wie jeder einzelne funktioniert.

Largest Contentful Paint (LCP)

Largest Contentful Paint misst, wie schnell der Hauptinhalt Ihrer Seite für Benutzer sichtbar wird. Dies kann ein hervorgehobenes Bild, ein großer Textblock oder ein anderes auffälliges Element sein.

Eine Seite kann insgesamt schnell laden, aber wenn die wichtigsten Inhalte zuletzt erscheinen, fühlt sich die Seite für den Benutzer immer noch langsam an. LCP hilft Ihnen, dieses Problem zu erkennen und zu beheben.

Interaktion bis zum nächsten Anstrich (INP)

Interaction to Next Paint misst, wie lange es dauert, bis Ihre Website nach einer Benutzerinteraktion visuelles Feedback gibt. Diese Interaktion kann ein Klick, ein Tippen oder ein Tastendruck sein.

Zum Beispiel, wenn jemand auf die Schaltfläche „Senden“ in Ihrem Kontaktformular klickt, misst INP die Zeit, bis sich etwas visuell auf dem Bildschirm ändert, um diese Aktion zu bestätigen.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift misst die visuelle Stabilität Ihrer Seite während des Ladens. Eine schlechte CLS-Punktzahl bedeutet, dass Elemente auf dem Bildschirm springen, während die Seite gerendert wird.

Das ist frustrierend, wenn ein Benutzer versucht, auf eine Schaltfläche zu klicken, und diese sich im letzten Moment verschiebt, weil eine Anzeige oder ein Bild darüber geladen wurde. Ein guter CLS-Wert bedeutet, dass Ihr Layout stabil und vorhersehbar ist.

So testen Sie Ihren Google Core Web Vitals-Score

Der einfachste Weg, Ihre Core Web Vitals-Punktzahl zu testen, ist mit Googles PageSpeed Insights-Tool. Geben Sie einfach die zu prüfende URL ein und klicken Sie auf die Schaltfläche „Analysieren“.

Die Ergebnisse werden im Abschnitt „Core Web Vitals Assessment“ angezeigt. Eine bestandene Note wird in Grün neben der Überschrift vermerkt.

Darunter sehen Sie die spezifischen Werte für jede der drei Kennzahlen. Um die Bewertung zu bestehen, müssen Sie diese Ziele erreichen:

• Largest Contentful Paint (LCP): 2,5 Sekunden oder weniger
• Interaction to Next Paint (INP): 200 Millisekunden oder weniger
• Cumulative Layout Shift (CLS): 0,1 oder weniger

So zeigen Sie Core Web Vitals für Ihre gesamte Website an

Um eine durchschnittliche Punktzahl für Ihre gesamte Website zu sehen, können Sie den Core Web Vitals-Bericht in Ihrem Google Search Console-Konto verwenden.

Dieser Bericht zeigt Ihnen, welche URLs auf Ihrer Website gute, verbesserungswürdige oder schlechte Bewertungen haben, sodass Sie Ihre Optimierungsbemühungen priorisieren können.

Für noch detailliertere Berichte können Sie den Lighthouse-Test verwenden, der direkt in den Chrome-Browser integriert ist. Öffnen Sie einfach eine Website, klicken Sie mit der rechten Maustaste irgendwo und wählen Sie die Option „Untersuchen“.

Warum sind Core Web Vitals wichtig?

Core Web Vitals sind wichtig, da sie direkt widerspiegeln, wie Nutzer Ihre Website erleben. Sie konzentrieren sich nicht nur auf die reine Geschwindigkeit, sondern darauf, wie schnell Besucher Ihre Inhalte tatsächlich sehen und mit ihnen interagieren können.

Studien zeigen durchweg, dass selbst eine Verzögerung von einer Sekunde bei der Seitenladezeit die Konversionen und Seitenaufrufe erheblich reduzieren kann. Eine schnellere Website mit einer schlechten Benutzererfahrung schadet immer noch Ihrem Endergebnis.

Die Verbesserung von Core Web Vitals hilft Ihnen dabei. Da die Benutzererfahrung ein bestätigter Google SEO-Rankingfaktor ist, kann eine gute Punktzahl Ihnen einen Vorteil gegenüber Ihren Mitbewerbern verschaffen.

So verbessern Sie Ihre Core Web Vitals in WordPress (7 Tipps)

Die Verbesserung Ihres Core Web Vitals-Scores in WordPress ist nicht so schwierig. Wenn Sie einige wesentliche Tipps zur Leistungsoptimierung befolgen, können Sie die Bewertung problemlos bestehen.

1. Optimierung Ihres WordPress-Hostings

Ihr WordPress-Hosting-Anbieter spielt die wichtigste Rolle für die Leistung Ihrer Website. Ein qualitativ hochwertiger Hoster optimiert seine Server speziell für WordPress, was Ihrer Website eine solide Grundlage für den Aufbau bietet.

Bei WPBeginner nutzen wir SiteGround aus genau diesem Grund. Sie sind einer der wenigen Hoster, die offiziell von WordPress.org empfohlen werden, und ihre Leistung ist ausgezeichnet.

Ihre Plattform läuft auf Google Cloud und beinhaltet ihr leistungsstarkes SG Optimizer-Plugin. Es kümmert sich automatisch um alle erweiterten Caching- und Performance-Optimierungen, was ein Hauptgrund dafür ist, dass unsere Website so schnell ist.

Wenn Sie einen anderen Hoster verwenden, ist WP Rocket die beste Alternative. Es ist das Caching-Plugin, das wir für unsere anderen Projekte empfehlen, und es erleichtert das Erreichen einer besseren Core Web Vitals-Punktzahl erheblich.

2. Verbesserung der Largest Contentful Paint (LCP) Punktzahl

Wie wir bereits erwähnt haben, ist LCP die Zeit, die benötigt wird, bis das größte Inhaltselement auf dem Bildschirm erscheint. In einem typischen Blogbeitrag ist dies oft das Beitragsbild oder der Artikeltext.

Um herauszufinden, welches Element gemessen wird, scrollen Sie nach unten durch die PageSpeed Insights-Ergebnisse und erweitern Sie den Tab „Largest Contentful Paint element“.

Wenn es sich um ein großes Bild handelt, versuchen Sie, es durch eine kleinere Datei zu ersetzen. Weitere Informationen finden Sie in unserem Leitfaden zur Optimierung von Bildern für das Web.

3. Verbesserung des Interaction to Next Paint (INP) Scores

Der Interaction to Next Paint-Score misst die Zeit zwischen dem Klicken eines Nutzers auf etwas auf Ihrer Website und dem Erhalt einer visuellen Reaktion. Eine lange Verzögerung hier kann dazu führen, dass sich Ihre Website träge und nicht reaktionsfähig anfühlt.

Stellen Sie sich zum Beispiel vor, ein Besucher füllt ein Kontaktformular aus und klickt auf die Schaltfläche „Senden“. Auf unseren Websites verwenden wir WPForms, da es auf Geschwindigkeit ausgelegt ist und Einreichungen ohne Verzögerung verarbeitet, was eine reibungslose Erfahrung schafft.

Eine Hauptursache für schlechte INP ist JavaScript, das geladen wird, bevor der Rest der Seite geladen wird. Der einfachste Weg, dies zu beheben, ist ein Plugin wie WP Rocket, dessen Einrichtung wir Ihnen zeigen werden.

Zuerst müssen Sie das Plugin installieren und aktivieren. Gehen Sie danach zu Einstellungen » WP Rocket und wechseln Sie zum Tab „Dateienoptimierung“.

Scrollen Sie nach unten und aktivieren Sie das Kontrollkästchen neben 'JavaScript verzögert laden'. Sie sollten auch das Kontrollkästchen für 'JavaScript-Ausführung verzögern' aktivieren, falls verfügbar. Dies verzögert Skripte, bis der Benutzer mit der Seite interagiert, was die INP-Werte erheblich verbessert.

Diese einfache Einstellung weist Ihre Website an, zuerst sichtbare Inhalte zu laden und auf JavaScript zu warten. Diese eine Änderung kann Ihre INP-Bewertung dramatisch verbessern.

4. Verbesserung des Cumulative Layout Shift (CLS) Scores

Ein schlechter CLS-Wert wird verursacht, wenn sich Elemente auf einer Seite während des Ladens verschieben. Um zu sehen, welche Elemente Probleme verursachen, erweitern Sie den Tab „Große Layoutverschiebungen vermeiden“ in Ihrem PageSpeed-Bericht.

Um dies zu verhindern, müssen Sie Browsern die Abmessungen (Breite und Höhe) Ihrer Bilder, Video-Einbettungen und Anzeigen mitteilen. Dadurch kann der Browser den richtigen Speicherplatz für das Element reservieren, bevor es geladen wird.

Sie können dies tun, indem Sie das Inspektionstool in Ihrem Browser verwenden, um den Einbettungscode zu überprüfen. Sie müssen sicherstellen, dass der Code bestimmte Zahlen für die Attribute width und height enthält.

5. Eliminierung von Render-Blocking-Elementen

Render-blocking-Elemente sind Dateien, normalerweise JavaScript oder CSS, die geladen werden müssen, bevor der Rest Ihrer Seite angezeigt werden kann. Dies verlangsamt die wahrgenommene Seitengeschwindigkeit und beeinträchtigt Ihre Core Web Vitals-Werte.

PageSpeed Insights listet diese problematischen Dateien für Sie auf. Sie stammen oft von Plugins und Drittanbieter-Tools wie Google Analytics oder Facebook Pixel.

Wenn Sie WP Rocket wie in Schritt 3 erwähnt verwenden, können Sie dies einfach beheben. Gehen Sie zum Tab „Dateien optimieren“ und aktivieren Sie die Option „CSS-Bereitstellung optimieren“. Dies erledigt die technische Arbeit automatisch für Sie.

Weitere Informationen finden Sie in unserem Schritt-für-Schritt-Leitfaden, wie Sie render-blocking Ressourcen einfach eliminieren können, ohne Code anfassen zu müssen.

6. Bilder in WordPress richtig dimensionieren

Das Hochladen unnötig großer Bilder ist ein häufiger Fehler, der Websites verlangsamt. Hochauflösende Fotos dauern viel länger zum Laden und werden oft nicht für die Webansicht benötigt.

Dies ist besonders problematisch für mobile Benutzer.

Obwohl WordPress sein Bestes tut, um responsive Bilder zu verarbeiten, verlangsamen das Hochladen von riesigen Originalfotos (wie 5-MB-Dateien von Ihrem Handy) Ihre Website immer noch. Der Browser muss härter arbeiten, um diese großen Dateien zu verarbeiten, auch wenn sie auf dem Bildschirm klein erscheinen.

Wir haben einen detaillierten Leitfaden, wie Sie Bilder für Ihre WordPress-Website richtig optimieren, ohne Qualitätsverlust.

7. Verwendung eines CDN zur Verbesserung Ihres Core Web Vitals-Scores

Ein CDN oder Content Delivery Network ist ein Dienst, der Ihre Website für Besucher auf der ganzen Welt schneller macht. Dies geschieht durch die Speicherung von Kopien Ihrer statischen Dateien (wie Bilder und CSS) auf Servern an verschiedenen geografischen Standorten.

Dies ermöglicht es Benutzern, diese Dateien vom Server herunterzuladen, der ihnen am nächsten ist, was die Ladezeiten verkürzt. Es entlastet auch Ihren Haupt-Hosting-Server erheblich.

Für WPBeginner nutzen wir das Enterprise CDN von Cloudflare. Es steigert nicht nur unsere Geschwindigkeit, sondern bietet auch eine leistungsstarke Firewall, die täglich Millionen von Spam-Anfragen und bösartigen Angriffen blockiert.

Für die meisten Unternehmen bietet selbst der kostenlose Plan von Cloudflare einen ausgezeichneten CDN-Service und grundlegenden Firewall-Schutz. Es ist eine der effektivsten Möglichkeiten, Ihre Core Web Vitals-Scores zu verbessern.

Häufig gestellte Fragen zu Core Web Vitals

Nachdem wir Tausenden von Benutzern geholfen haben, ihre Websites zu beschleunigen, erhalten wir viele Fragen zu Core Web Vitals. Hier sind die Antworten auf einige der häufigsten.

F: Was sind die drei Core Web Vitals?
A: Die drei Hauptmetriken sind Largest Contentful Paint (LCP) für die Ladeleistung, Interaction to Next Paint (INP) für die Interaktivität der Website und Cumulative Layout Shift (CLS) für die visuelle Stabilität.

F: Was ist eine gute Core Web Vitals Punktzahl?
A: Sie sollten einen LCP von 2,5 Sekunden oder weniger und einen INP von 200 Millisekunden oder weniger anstreben. Für CLS gilt eine Punktzahl von 0,1 oder niedriger als gut.

F: Kann ein gutes Theme meine Core Web Vitals automatisch beheben?
A: Ein gut codiertes Theme bietet eine ausgezeichnete Grundlage, ist aber keine Wunderwaffe. Ihre Werte werden auch stark von Ihrem Hosting-Anbieter, der Bildgröße und der Qualität der von Ihnen verwendeten Plugins beeinflusst.

F: Wie oft sollte ich meine Core Web Vitals-Scores überprüfen?
A: Wir empfehlen, Ihre Scores mindestens einmal im Monat zu überprüfen. Es ist auch ratsam, sie zu testen, nachdem Sie ein neues Plugin installiert, Ihr Theme geändert oder wichtige neue Funktionen zu Ihrer Website hinzugefügt haben.

Experten-Anleitungen zur Messung und Verbesserung der WordPress-Performance

Jetzt, da Sie wissen, wie Sie Core Web Vitals optimieren können, sehen Sie sich vielleicht weitere Artikel zur Messung und Verbesserung der WordPress-Performance an:

• Der ultimative Leitfaden zur Steigerung von WordPress-Geschwindigkeit & Leistung
• So beschleunigen Sie die WooCommerce-Leistung
• So führen Sie einen Website-Geschwindigkeitstest richtig durch (die besten Tools)
• So belasten Sie eine WordPress-Website
• Was ist der INP-Score von Google und wie verbessert man ihn in WordPress
• So verwenden Sie das GTmetrix-Plugin zur Verbesserung der WordPress-Website-Leistung
• Schnellstes WordPress Hosting (Performance-Tests)

Wir hoffen, dieser Leitfaden hat Ihnen geholfen zu lernen, wie Sie Core Web Vitals für WordPress optimieren können. Ein weiterer wichtiger Teil der Benutzererfahrung ist die Sicherheit, daher empfehlen wir, unsere WordPress-Sicherheitscheckliste zu befolgen, um Ihre Website zu schützen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.