Core Web Vitals steigern

Im Juni 2021 hat Google endlich damit begonnen, das lang erwartete Core Web Vitals Update auszurollen. Das bedeutet, dass die Seitengeschwindigkeit und die Ladezeit der Website das Rankings beeinflussen werden. Wie kannst du deine SEO-Strategie an diese Änderung anpassen? Primär ist es wichtig, diese 5 Dinge zu verbessern, um den Score zu verbessern!

„Wenn ich doch nur einfach meinen Zauberstab schwingen könnte und eine superschnelle Website hätte!“

Das ist dir wahrscheinlich auch schon in den Sinn gekommen, oder? Die Optimierung der Website-Geschwindigkeit und der Nutzererfahrung ist eine Menge Arbeit und wird sehr schnell technisch – und kompliziert. Die neuen Core Web Vitals Metriken geben Ihnen jetzt mehr Einblicke und Hinweise darauf, was zu beheben ist. Diese fünf Dinge werden den Core Web Vitals Score verbessern.

Auch kleine Verbesserungen zählen dabei

Inhalt

Inalt

• Website-Geschwindigkeit und Nutzererfahrung
• Optimiere die Bilder
• Lazy Loading
• Ein CDN verwenden
• Achte auf CLS
• Beschleunige den Server
• Above-the-Fold-Inhalte schneller laden
• Verbessere das Laden von Drittanbieter-Skripten

Mit dem Page-Experience-Update im Mai 2021 rückt Google die Website-Geschwindigkeit und das Nutzererlebnis wieder in den Mittelpunkt. Du solltest SEO immer ganzheitlich betrachten – es gibt viele Faktoren, und du solltest an allen arbeiten, um die bestmögliche Website zu erstellen. Obwohl die oben genannten Tipps dabei helfen können, diese Core Web Vitals Scores zu verbessern, solltest du dies vor allem tun, um deinen Besuchern ein besseres Nutzererlebnis zu bieten.

Mit diesen Tipps kannst du deine Core Web Vitals steigern und so höhere Rankings erzielen

In den letzten Monaten hat Google wieder einmal die Geschwindigkeit in den Vordergrund gestellt, da im nächsten Jahr das Page Experience Update ansteht.

Im Laufe der Jahre wurde immer wieder über die Bedeutung von Website-Geschwindigkeit und Nutzererfahrung gesprochen. Aber während es eine Menge Material darüber gibt, wie man die Website optimieren kann, ist es schwierig, dieses Wissen auch in die Praxis umzusetzen.

Für viele Themen haben sich die Ratschläge nicht wirklich geändert.

Es läuft alles darauf hinaus, die wichtigsten Inhalte so schnell wie möglich zu den Benutzern zu bringen.

Im Folgenden findest du eine Mischung aus alten und neuen Möglichkeiten, die Website zu optimieren, um den Core Web Vitals zu verbessern.

Große Bilder sind oft der größte Contentful Paint (LCP) für eine Website. Stelle sicher, dass du deinen Besuchern einen angemessenen Empfang bereitet, indem du dafür sorgst, dass die Seite schnell geladen wird!

Ich beginne diese Liste mit einem goldenen Oldie: dem Optimieren von Bildern. Eines der wichtigsten Dinge, die du für deine Website tun kannst, ist die Optimierung der Bilder.

Das eine große, nicht optimierte Bild auf der Homepage oder Landing Page könnte schon schaden.

Es gibt eine Menge Tools, die dabei helfen. Es ist meist nicht notwendig, eine hohe Auflösung beibehalten zu müssen, damit das Bild auf den gängigsten Bildschirmen scharf ist.

Stelle sicher, dass du das Bild in der benötigten Größe bereitstellst und es gut komprimierst.

Versuche auch, moderne Formate wie WebP zu übernehmen. Diese Formate können Bilder in hoher Qualität bei geringerer Größe liefern. WebP wird gut unterstützt und sogar Apple ist auf den Zug aufgesprungen! Die kommende Version von Safari 14 – sowohl unter MacOS als auch unter iOS – wird WebP unterstützen. Ja, der neue Chromium-betriebene Microsoft Edge-Browser unterstützt ebenfalls WebP.

Es werden nur Bilder geladen, die auf dem Bildschirm erscheinen. Der Rest wird erst geladen, wenn gescrollt wird.

Dein CMS ist auch ein Werkzeug, das helfen wird, das Laden von Bildern zu verbessern.

Aktuelle Versionen von WordPress unterstützen das automatische „Lazy Loading“ von Bildern (und Iframes).

Das bedeutet, dass nur die Bilder geladen werden, die auf dem Bildschirm erscheinen, und der Rest wird erst geladen, wenn der Benutzer mit dem Bildschirm interagiert. Dadurch wird der Browser angewiesen, große Bilder nur dann zu laden, wenn sie benötigt werden.

Ein CDN ermöglicht die schnelle Übertragung von Ressourcen wie etwa HTML-Seiten, Javascript-Dateien, Stylesheets, Bilder und Videos.

Core Web Vitals steigern- Ein weiterer wichtiger Ratschlag zur Erhöhung der Website- Geschwindigkeit ist die Verwendung eines CDN.

Ein CDN oder Content Delivery Network ist eine geografisch verteilte Gruppe von Servern.

Es ermöglicht die schnelle Übertragung von Ressourcen, die zum Laden von Internetinhalten erforderlich sind. Das sind etwa HTML-Seiten, Javascript-Dateien, Stylesheets, Bilder und Videos.

Hast du gewusst, dass du auch ein CDN speziell für Bilder verwenden kannst?

Ein Bild-CDN gibt dir mehr Kontrolle darüber, wie du die Bilder ausliefern willst und wie sie erscheinen sollen. Ein Bild, das von einem Bild-CDN ausgeliefert wird, hat in seiner URL eine Reihe von Eigenschaften, die dem Browser mitteilen, wie sich das Bild verhalten soll.

CLS kann durch Bilder, Anzeigen und Einbettungen ohne Abmessungen oder dynamisch eingefügte Inhalte verursacht werden.

Eine der neuen Metriken ist Cumulative Layout Shift, kurz CLS. Ein Beispiel dafür ist, wenn eine mobile Seite fertig aussieht aber gerade, wenn man einen Button drücken will, verschiebt sich der Inhalt und eine langsam ladende Anzeige erscheint an dieser Stelle.

Dies kommt häufig vor und ist eine der Hauptursachen für die Frustration von Nutzern.

Die Optimierung des CLS führt zwar nicht unbedingt dazu, dass die Seite schneller wird, aber sie fühlt sich auf jeden Fall schneller an. CLS wird durch Bilder ohne Abmessungen im CSS verursacht. Es kann auch durch Anzeigen und Einbettungen ohne Abmessungen oder dynamisch eingefügte Inhalte verursacht werden.

Wenn diese Elemente nicht richtig dimensioniert sind, neigen sie dazu, während des Ladevorgangs ein wenig zu springen, wodurch die Seite ruckelig und instabil wirkt. Dies kann auch daran liegen, dass neue Inhalte über bestehende Inhalte eingefügt werden.

Eine der Möglichkeiten, Core Web Vitals zu verbessern und CLS zu verhindern, ist, die Breite und Höhe für Bilder im CSS anzugeben.

Auf diese Weise wird der Browser Platz für das Bild reservieren, das wahrscheinlich später als der Text erscheint. Dadurch wird das Ruckeln verschwinden, weil der Browser weiß, dass zu gegebener Zeit etwas hinzugefügt wird. Du kannst auch darüber nachdenken, eine Art Platzhalter mit niedriger Auflösung hinzuzufügen, wenn du willst, dass irgendwann etwas schnell erscheint.

Stelle also einfach sicher, dass bei den Bilder die richtigen Breiten- und Höhenattribute gesetzt wurden. Natürlich kann man dies auch mit normalen responsiven Bildern tun. Achten nur darauf, dass du für alle Größen ase gleiche Seitenverhältnis verwendest.

Um springende Anzeigen oder eingeblendete Inhalte zu vermeiden, solltest du auch für diese einen Platz reservieren.

Ein schneller Server verbessert direkt viele Metriken der Website-Geschwindigkeit.

Beschleunige den Server, um die Ladezeit zu verringern

Je schneller ein Server auf Anfragen antwortet, desto besser.

Wenn man den Server dazu bringt, schneller zu reagieren, verbessert das direkt viele Metriken der Website-Geschwindigkeit. Bei komplexen Websites ist der Server ständig mit der Bearbeitung von Anfragen und der Bereitstellung von Dateien und Skripten beschäftigt, daher ist es empfehlenswert, diese Prozesse zu optimieren.

Das Optimieren des Servers besteht aus mehreren Schritten.

Core Web Vitals steigern – Aktualisiere dein Hosting. Knausere nicht beim Hosting. Wähle eines, das gute Leistung zu einem fairen Preis bietet. Außerdem kommt es darauf an, wie der Server eingerichtet wurde – verwenden eine aktuelle Version von PHP! – und welche Hardware du gewählt hast. Vielleicht solltest du die Hardware aufrüsten, wenn du feststellst, dass es daran mangelt.

Außerdem muss man prüfen, wie die Datenbanken funktionieren und schauen, ob man Verbesserungen vornehmen kann. Verwende Tools wie das Query Monitor WordPress-Plugin, um die Abfragen auf der Website zu analysieren.

Du kannst auch untersuchen, wie der Server Dateien an Clients überträgt. Es gibt verschiedene Möglichkeiten, diesen Prozess zu verbessern, wie z. B. die Verknüpfung rel=preload. Dies sind fortgeschrittenere Lösungen, mit denen du eine Feinabstimmung vornehmen kannst, wie der Server auf Anfragen reagiert. Auch hier kann ein CDN Wunder bewirken, um deine Core Web Vitals zu verbessern.

Wenn das CSS spät lädt, kann es eine Weile dauern, bis etwas auf dem Bildschirm erscheint. Deshalb nimm Above-the-Fold-Inhalte- aus der Haupt-CSS-Datei heraus und bette sie in den Code ein.

Schauen dir kritische das CSS an, um Above-the-Fold-Inhalte schneller zu laden

Above the Fold ist der Bereich der Webseite, der die unmittelbare Aufmerksamkeit der Besucher erregt, was der Nutzer beim Besuch einer Webseite auf den ersten Blick sieht, bevor er weiter nach unten scrollt.

Wenn der Browser eine Seite lädt, muss er das HTML abrufen, rendern, das CSS abrufen, rendern, das JavaScript abrufen, rendern, und so weiter, und so weiter. Je mehr Dateien zum Laden der Seite benötigt werden und je größer diese sind, desto langsamer wird die Seite geladen. Oftmals kann der Browser, während er damit beschäftigt ist, Dinge im Hintergrund zu laden, nichts tun.

Bestimmte Elemente blockieren den Prozess. Sogenanntes Render-Blocking JavaScript und CSS beeinflusst dies.

Da das CSS spät lädt, kann es oft eine Weile dauern, bis etwas auf dem Bildschirm erscheint. Deshalb solltest du die kritischen Teile des Designs – Above-the-Fold-Inhalte- aus der Haupt-CSS-Datei herausnehmen und in den Code einbetten. So kann man viel schneller etwas auf den Bildschirm bringen. Dies zu beheben, macht die Seite zwar nicht schneller, aber es lässt sie schneller erscheinen. Das alles für ein besseres Benutzererlebnis.

Um das CSS zu optimieren, kann man aus einer Reihe von Tools wählen oder mal kann es von Hand machen.

Darüber hinaus kann man WordPress-Caching-Plugins wie WP Rocket verwenden.

WP Rocket hat einen einfachen Button namens „Optimize CSS delivery“. Die Aktivierung hilft, Render-Blocking-CSS zu eliminieren und das Laden der Website zu verbessern.

Natürlich macht WP Rocket auch andere coole Sachen wie das Minifizieren von CSS und JavaScript und das Aufschieben des Ladens von JavaScript.

Wenn Skripte von Drittanbietern deine Website verlangsamen, prüfe, pb du das Script wirklich benötigst!

Wenn du feststellst, dass Skripte von Drittanbietern deine Website verlangsamen, solltest du dir das ansehen.

Fragen dich: Brauche ich diese bestimmte Anzeige wirklich? Was ist der Wert dieser Skripte?

Vielleicht gibt es eine andere Option, die ein besser optimierter ist und den Server weniger belastet. Vielleicht solltest du das ausprobieren?

Wenn möglich, kannst du damit experimentieren, das Skript selbst zu hosten. Auf diese Weise hat man ein wenig mehr Kontrolle über den Ladevorgang. Wenn das nicht möglich ist, versuche , das Skript besser vorzubereiten.

Stelle zumindest sicher, dass die Skripte asynchron geladen werden oder verschiebe es auf den letzten Moment. Auf diese Weise kann der Browser zuerst die Seite aufbauen, bevor er das externe Skript abruft und ausführt.

Verwende async, wenn das Skript, das geladen wird, wichtig ist, z. B. ein Analyseskript. Dafür kann man auch weniger kritische Ressourcen verwenden. Es gibt eine Menge Dokumentation über die Optimierung von Skripten von Drittanbietern.