WordPress-Optimierung 101 für die Core Web Vitals

Wer heute bei Google weit oben ranken will, kommt kaum noch daran vorbei: Eine technisch optimierte Website ist für eine erfolgreiche digitale Marketingstrategie unverzichtbar. Von Zeit zu Zeit werden die technischen Anforderungen an eine gute Website von Google und anderen Suchmaschinen wieder geändert.

Daher ist es wichtig, dass Ihre Website mit diesen neuen Anforderungen mitwächst. In diesem Artikel nehme ich Sie mit auf eine praktische Reise zur Optimierung Ihrer professionellen WordPress-Website und/oder Ihres Webshops.

Mit der Einführung der Core Web Vitals will Google eine einheitliche Art des Testens der Nutzererfahrung simulieren, damit Website-Betreiber eine gute Richtlinie für die Verbesserung ihrer Website haben. Schließlich wollen wir alle, dass die Besucher ihre Ziele nicht nur effizient erreichen, sondern auch ein angenehmes Erlebnis haben.

Neben Inhalt und Backlinks wird es also immer wichtiger, dem Besucher ein hochwertiges Nutzererlebnis beim Besuch Ihrer Website zu bieten. Es ist also nicht nur wichtig, eine gut aussehende Website zu haben, sondern sie auch in Bezug auf die Technologie richtig aufzubauen.

Was genau sind also die Core Web Vitals?

Kurz gesagt sind die Core Web Vitals eine Reihe von Faktoren, die Google als wichtig für das allgemeine Nutzererlebnis eines Website-Besuchers erachtet. Die Core Web Vitals bestehen aus den drei Faktoren Largest Contentful Pain (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS), die zusammen die Seitengeschwindigkeit und Nutzerinteraktion einer Webseite bewerten.

Zum besseren Verständnis der Core Web Vitals empfehle ich Ihnen, bevor Sie mit der Optimierung Ihrer WordPress-Website beginnen, die ausführliche Erläuterung der Core Web Vitals von unserem Kollegen Stef Dijkstra zu lesen. Wenn Sie verstehen, was Sie tun, können Sie noch mehr aus diesen Optimierungen herausholen.

Bevor wir loslegen…

Es gibt einige einfache Schritte, die Sie unternehmen können, um Ihre WordPress-Website/ Ihren Webshop zu optimieren, allerdings können die Optimierungen zu Problemen führen. Daher ist es immer ratsam, die Dateien Ihrer Website und Ihre Datenbank zu sichern, bevor Sie die Optimierungen vornehmen.

Nicht alle Optimierungen sind ohne Folgen, und wenn Sie eine Sicherungskopie erstellen, haben Sie Ihre Daten immer zur Hand, falls Sie einen Schritt zurückgehen wollen oder müssen. Sobald Sie die Sicherungskopie erstellt haben, können Sie mit den Optimierungen der Website/des Webshops beginnen. Wir beginnen mit der Durchführung einer Basismessung.

Die Basismessung

Der erste Schritt auf dem Weg zu einer technisch optimierten Website ist eine Basismessung. Denn es ist wichtig zu wissen, wo man JETZT steht, um sich realistische Ziele zu setzen und darauf basierend Optimierungen vorzunehmen.

Nicht alle Komponenten wirken sich gleichermaßen auf den Web Core Vital Score aus, daher ist es ratsam, Prioritäten zu setzen und die Punkte auszuwählen, die für Sie den größten Unterschied ausmachen werden.

Wenn eine Geschwindigkeitsoptimierung auf Kosten der Benutzerfreundlichkeit geht, lohnt sich diese Optimierung oft nicht, denn schließlich ist das Ziel eine schnelle, aber benutzerfreundliche Website.

Einige nützliche Tools, die Ihnen beim Sammeln von Daten für Ihre Basismessung helfen können, sind:

• Google PageSpeed Insights
• Google Search Console

Google PageSpeed-Einblicke

Dieses Tool gibt Ihnen einen sofortigen Einblick in die Leistung Ihrer Website auf der Grundlage der Core Web Vitals für eine bestimmte URL. Neben den Ergebnissen erhalten Sie auch sofortige Aktionspunkte, an denen Sie arbeiten können.

Google Search Console

Wenn Sie die Google Search Console verwenden, scannt Google Ihre Website nach einer Reihe von Punkten, die wiederum mit den Core Web Vitals in Zusammenhang stehen. Auf der Grundlage dieser Informationen können Sie bestimmte Seiten optimieren, die Sie mit dem PageSpeed Insights-Tool nicht so einfach selbst überprüfen könnten.

Umsetzung der Optimierungen

Nach dem Google PageSpeed Insights-Test sollten Sie eine gute Vorstellung von möglichen Optimierungen für Ihre WordPress-Website haben. Die Schritte, die Sie unternehmen müssen, sind bei jeder Website anders. Als Orientierungshilfe werden wir die Optimierungen anhand des folgenden Beispiels durchführen.

Es handelt sich dabei um Punkte, die uns in der Praxis häufig begegnen und die am Ende oft “Probleme” verursachen können.

Schritt 1. Caching

Wenn man sich die obige Liste ansieht, fallen einige Dinge auf: Die erste Antwortzeit des Servers (Time Till First Byte oder TTFB) ist sehr hoch. Es werden viele verschiedene (ungenutzte) Javascript-Dateien geladen und es gibt Anfragen an andere Server, die das Rendering blockieren.

Diese Probleme treten häufig auf, wenn das Caching noch nicht genutzt wird. Mit WordPress haben Sie eine Reihe von Möglichkeiten, diesen Problemen entgegenzuwirken. Sie können zum Beispiel die Skripte, die Sie später auf die Seite laden, manuell laden, damit sie den HTML- und CSS-Code nicht beeinträchtigen. Sie können auch ein Caching-Plugin verwenden. Dieses kann Dateien zusammenfassen und verkleinern, so dass sie in einer einzigen Anfrage geladen werden.

Um zu erklären, was Caching ist, verwende ich die Analogie von Peter Chester. Er fragte in einem Saal: “Was ist 3.485.250 geteilt durch 23.235? Der Saal wurde still und einige begannen, es auf einem Taschenrechner auszurechnen, und nach einem Moment kam jemand mit der richtigen Antwort. Dann wiederholte er die gleiche Frage, und jeder wusste sofort die richtige Antwort. Der anfängliche Rechenprozess war bereits abgeschlossen, so dass die Leute die Antwort nur noch auflisten mussten, anstatt sie zu berechnen. Dies ist das Konzept des Caching.

Der erste Besucher lädt die Website, so dass nachfolgende Besucher die fertigen Antworten besuchen können. Auf diese Weise muss der Server den anfänglichen Prozess nicht jedes Mal durchführen, und Sie bekommen eine zwischengespeicherte Version einer Seite zu sehen.

In WordPress gibt es viele Optionen in Bezug auf Caching-Plugins, jedes Plugin hat seine Vor- und Nachteile. Bei Dtch. Digitals sind wir ein großer Fan von WP Rocket, einem der umfassendsten kostenpflichtigen Caching-Plugins, die es für WordPress gibt. Es bietet alle Funktionen, die Sie benötigen, um Ihre Website oder Ihren Webshop für Core Web Vitals zu optimieren.

Dazu gehören das Caching selbst, die Reduzierung der Größe von HTML-, CSS- und JavaScript-Dateien und die Optimierung ihrer Auslieferung. Eine gute Alternative zu WP Rocket ist W3 Total Cache, das in der kostenlosen Version ebenfalls bereits eine breite Palette an Funktionalitäten bietet.

Bei der Installation eines Caching-Plugins ist es sinnvoll zu testen, wie sich bestimmte Einstellungen auswirken. Es könnte sein, dass das Caching Probleme verursacht, weil zum Beispiel ein Skript nicht rechtzeitig geladen wird und dadurch die Funktionalität Ihrer Website beeinträchtigt wird.

Mit der Einrichtung von WP Rocket haben wir bereits einige der beschriebenen Probleme in den Griff bekommen.

Schritt 2. Optimieren Sie Bilder

Nachdem Sie das Caching angewendet haben, sollte Ihre Website beim ersten Besuch viel schneller sein. Der zweite Schritt besteht darin, die Bilder auf Ihrer Website zu optimieren. Eine Website mit guten Bildern sagt mehr als 1.000 Worte. Deshalb ist es wichtig, hochwertige Bilder auf Ihrer Website zu verwenden.

Die besten Ergebnisse erzielen Sie, wenn Sie ein hochauflösendes Foto verwenden und es von WordPress auf die in Ihrem WordPress-Theme vorgesehenen Maße skalieren lassen. Schließlich wollen Sie nicht, dass ein 1920px mal 1080px großes Bild an einer Stelle erscheint, an der ein kleineres Bild benötigt wird, da dies zusätzliche Bandbreite kostet.

Komprimieren und in .WEBP konvertieren

Der erste Schritt im Prozess der Bildoptimierung ist die Komprimierung(Größenänderung) der Bilder. Hierfür stehen mehrere Optionen zur Verfügung. Sie können Ihr Bild manuell mit Tools wie Compression Jpeg oder Kraken komprimieren. Oder Sie können ein Plugin verwenden (der Vorteil von WordPress).

Einige bieten Ihnen auch die Möglichkeit, Ihre Bilder direkt in .WEBP zu konvertieren und auf Ihrer Website anzuzeigen. Der Dateityp .WEBP ist ein zunehmend unterstützter Dateityp, der Bilder auf noch effizientere Weise kodiert als die üblichen Dateitypen .jpg und .png.

Für die Optimierung von Bildern verwenden wir Imagify. Der Vorteil von Imagify ist, dass es nicht nur komprimieren, sondern auch Bilder in den Dateityp .WEBP konvertieren und auf der Website anzeigen kann. Nach der Komprimierung und Konvertierung haben wir folgendes Ergebnis.

Fließendes Laden

Der letzte Schritt ist das Lazyloading von Bildern, was bedeutet, dass Bilder, die noch nicht angezeigt werden, noch nicht geladen werden. Erst wenn der Benutzer nach unten scrollt, werden die Bilder geladen.

In unserem Thema verwenden wir ein benutzerdefiniertes Lazy-Loading-Skript, damit wir die Kontrolle darüber behalten und es so gut wie möglich auf jede Situation anwenden können. Der Grund dafür ist, dass Google Minuspunkte vergibt, wenn Sie Bilder oberhalb und in der Nähe des Falzes laden.

Wenn Ihre Website nicht über dieses Skript verfügt, ist es ratsam, es trotzdem auf Ihrer Website einzusetzen. WP Rocket zum Beispiel bietet dies in seinem Caching-Plugin an. Es gibt auch andere Anbieter wie Smush, die neben der Komprimierung von Bildern auch die WEBP-Konvertierung und das Lazy Loading übernehmen können.

Nachdem wir Lazy Loading über unser Skript angewendet und unsere Bilder optimiert haben, bleiben folgende Punkte übrig.

Schritt 3. Entfernen Sie unnötige Stylesheets und Javascript

Nachdem Sie die ersten beiden Schritte durchgeführt haben, sollte Ihre Website bereits viel schneller sein. Um Ihre Website weiter zu optimieren, müssen Sie einige fortgeschrittenere Schritte durchführen.

Das Problem bei der Verwendung vieler Plug-ins, Bibliotheken und externer Skripte ist, dass dadurch viel unnötiger CSS- und JavaScript-Code entsteht. Jedes Mal, wenn Ihre Website geladen wird, muss eine Menge unnötiger Code geladen werden. Es fängt also schon bei den Grundlagen an. Wenn die Website für Sie maßgeschneidert ist, wird dies bereits viel weniger vorkommen, als wenn Sie einen Template-Builder wie Elementor oder Divi verwenden.

Oft ist es aber auch so, dass Sie nicht auf jeder Seite den gesamten Code benötigen. In diesem Fall ist es besser, den Code nur auf den Seiten zu laden, auf denen Sie ihn benötigen. Du kannst dies tun, indem du dir ansiehst, welche Javascript-Module/Bibliotheken du auf einigen Seiten verwendest. So können Sie diese so einstellen, dass sie nur auf den Seiten geladen werden, die Sie benötigen.

Schritt für Schritt optimieren Sie so Ihre Website jedes Mal ein wenig mehr. Um dies weiter zu optimieren, verwenden wir WP Rocket. Sie bieten mehrere Optionen. Sie können zum Beispiel kritisches CSS laden, so dass nur das für eine Seite verwendete CSS geladen wird. Oder man kann das Laden von Javascript-Dateien verzögern, so dass es den Rest des Inhalts nicht beeinträchtigt.

Die Ergebnisse…

Nachdem wir die drei Optimierungen durchgeführt hatten, konnten wir die Website richtig optimieren. Diese Website wurde von uns in einem benutzerdefinierten Thema erstellt, was bedeutet, dass die Website bereits in der Basis für Geschwindigkeit und Benutzerfreundlichkeit optimiert wurde.

Die einzige Empfehlung, die noch offen ist, ist die jQuery-Bibliothek, da sie sich auf die Funktionalität der Website auswirkt und es sich daher nicht lohnt, sie nachträglich zu laden, da sie das Benutzererlebnis beeinträchtigen könnte.

Und…? Hat es geklappt?

Eine Website kann bis zu einem gewissen Grad optimiert werden, aber wenn die Grundlagen bereits falsch sind, kann es sehr schwierig sein, sie zu perfektionieren. Haben Sie auf der Grundlage dieses Leitfadens gute Schritte unternommen und/oder haben Sie noch Fragen zu diesem Artikel? Hinterlassen Sie einen Kommentar, ich bin gespannt auf Ihre Erkenntnisse.

Auch wenn Sie mit den Ergebnissen nicht zufrieden sind, würden wir uns freuen, von Ihnen zu hören, damit wir gemeinsam eine Lösung finden können, die für Sie am besten geeignet ist. Möchten Sie sehen, was wir für Sie tun können? Fordern Sie einen kostenlosen Quickscan an. Zusammen mit meinen Kollegen schaue ich mir gerne Ihre Website und die Ergebnisse an, die Sie erzielen oder nicht erzielen.