5 Möglichkeiten, mit der Optimierung Ihrer Unternehmenswebsite für Core Web Vitals zu beginnen

Google hat die Einführung von Core Web Vitals von Mai auf Mitte Juni verschoben und das vollständige Live-Update bis Ende August verschoben. Der mit Spannung erwartete neue Satz von Ranking-Signalen wird mit aktuellen Suchsignalen kombiniert, wodurch das neue Seitenerlebnis entsteht. Was bedeutet diese neue Entwicklung für Ihr Unternehmen?

Wenn Sie sorgfältig mit Ihrem Webdesign-Team und Ihren SEO-Spezialisten daran gearbeitet haben, Änderungen an Ihrer Website vorzunehmen, brauchen Sie sich keine Sorgen zu machen. Die Verzögerung beim Rollout bedeutet nur, dass Sie der Kurve voraus sein könnten. Wenn Sie dagegen noch nicht mit der Änderung Ihrer Website begonnen haben, bedeutet die Verzögerung nur, dass Sie jetzt Zeit haben, die neuen Metriken zu erfüllen.

Was sind die Core Web Vitals?

Die Core Web Vitals sollen das Ranking von Websites durch Google verändern. Es deckt drei Hauptmetriken ab, nämlich:

1. Größte zufriedene Farbe (LCP). Es misst, wie schnell die Seite geladen wird
2. Erste Eingangsverzögerung (FID). Beim FID geht es um Interaktivität oder darum, wie ansprechend Ihre Seiten sind
3. Kumulative Layoutverschiebung (CLS). Diese Metrik misst, wie stabil die Elemente auf Ihrer Seite sind, während die Benutzer damit interagieren.

Die neuen Metriken konzentrieren sich also auf Ladezeit, Interaktivität und Seitenstabilität und geben Ihnen eine Blaupause dafür, woran Sie und Ihre Webentwickler arbeiten müssen.

Und hier sind fünf effektive Möglichkeiten, dies zu tun:

1. Optimieren Sie Ihre Bilder und Videos

Langsam ladende Seiten können Sie, potenzielle Kunden, kosten. Für viele Websites sind Bilder das größte sichtbare Element, daher ist es am besten, sie zu optimieren.

Eine effektive Möglichkeit, dies zu tun, besteht darin, alle Bilder auf Ihrer Website zu skalieren und zu komprimieren. Einige zu verwendende Bildoptimierungstools sind tinypng oder ShortPixel . Sie können Ihre Bilder auch in effizientere moderne Formate wie .png konvertieren und sicherstellen, dass es sich um responsive Bilder handelt, die sowohl auf mobilen als auch auf Desktop-Geräten perfekt aussehen.

Unterscheiden Sie zwischen „Optimierung“ und „Verkleinerung“. Sie können versuchen, die Größe Ihrer Bilder zu verringern, damit sie schneller geladen werden. Denken Sie jedoch daran, dass der springende Punkt hinter den Core Web Vitals darin besteht, den Benutzern ein besseres Erlebnis zu bieten. Ihre Bilder (oder Videos) werden möglicherweise schneller geladen, aber Ihre Website-Besucher finden sie möglicherweise nicht nützlich, wenn sie verschwommen oder von geringer Qualität sind.

2. Lazy Load Bilder und Skripte von Drittanbietern

Lazy Loading ist eine weitere Möglichkeit, die Bilder Ihrer Website reaktionsschneller und schneller zu laden. Bei dieser Methode werden Bilder geladen, wenn der Benutzer zu diesem Bereich der Seite scrollt. Wenn sie sich über der Falte befinden, werden alle Bilder, die ein Benutzer ansehen soll, zuerst angezeigt. Wenn sie nach unten scrollen, folgen Bilder in diesen Bereichen der Seite.

Lazy Loading weist nicht nur die Bandbreite richtig zu, es ist auch nützlich für Websites, die viele Bilder enthalten.

Eine Möglichkeit, wie Sie ein Bild einfach faul laden können, ist HTML. Sie müssen nur diesem Markup folgen:

<img src=“Bildname.png“ loading=“faul“ alt=“Bild1“/>

<iframe src="content1.html" loading='lazy"></iframe>

Obwohl der Prozess mühsam sein kann, wenn Sie viele Bilder auf bestimmten Seiten haben, kann Lazy Loading einfach genug sein.

3. Stellen Sie sicher, dass alle Elemente auf Ihrer Seite nicht verschoben werden

Google misst CLS durch einen Leistungsbeobachter, um Layoutverschiebungen zu erkennen. Wenn sich ein Element verschiebt oder sich das Layout verschiebt, ruft der Leistungsbeobachter eine Callback-Funktion auf, die zu der bestehenden Bewertung der Layoutverschiebung hinzufügt.

Ein Tool, mit dem Sie die Stabilität Ihrer Website anzeigen oder die Layoutverschiebung debuggen können, ist die Option „Layoutverschiebungsregionen“ in DevTools von Chrome. Diese Funktion hebt die beweglichen Elemente hervor, während sie verschoben werden. Es sagt dir nicht, warum es sich verschiebt, du musst es selbst herausfinden. Es zeigt Ihnen die Elemente, die die Verschiebung beeinflussen.

Ihre Bilder und Videoelemente sollten mit Größenattributen für Breite und Höhe versehen sein. Sie können auch die CSS-Felder für das Seitenverhältnis verwenden, um den Platz zu reservieren, den das Bild oder Element benötigt. Auf diese Weise kann die Seite der Datei den richtigen Platz zuweisen, ohne alle Elemente auf der Seite zu verschieben, wenn die Datei geladen wird.

Layoutverschiebungen zählen nur, wenn sie für den Benutzer sichtbar sind. Wenn also eine Verschiebung unterhalb der Seite auftritt, der Benutzer jedoch noch zu diesem Bereich herunterscrollen muss, wird dies nicht für CLS gezählt.

4. Korrigieren Sie Ihre UX-Muster für Desktop und Mobilgeräte

Viele Layoutverschiebungen sind das Ergebnis schlechter UX-Muster. Ein Beispiel dafür sind Pop-ups in Websites oder Banner, die oben auf der Seite erscheinen, um eine Ankündigung zu machen. Wenn diese Elemente das tun, neigen sie dazu, alles andere auf der Seite nach unten zu drücken.

Reservieren Sie ausreichend Platz für dynamische Inhalte . Dies sind Inhalte, die später auftauchen, wie Werbeaktionen oder Anzeigen. Ein Tipp ist, das Einfügen neuer Inhalte über einem vorhandenen Inhalt zu vermeiden, insbesondere wenn Sie nicht den Inhalt für die gesamte Seite anpassen.

5. Verbessern Sie Ihr Real User Monitoring (RUM) Setup

Real User Monitoring ist der Prozess der Erfassung und Analyse der Bewegungen jedes Benutzers einer Website oder Anwendung. Es wird oft als Real User Metrics oder End User Experience Monitoring bezeichnet. Sie können dies tun, indem Sie die Leistungsdaten auf Seitenebene überprüfen.

Die Google Search Console (GSC) ist ein hilfreiches Tool, das Ihnen die Leistung von Seiten anhand von URL-Gruppen oder Gruppierungen von URLs mit ähnlichen HTML-Strukturen mitteilt.

Durch die Überwachung des RUM wird auch sichergestellt, dass der erste Eindruck eines Benutzers von der Reaktionsfähigkeit und Interaktivität Ihrer Website positiv ist.

Bonus-Tipp:

Ein weiterer Faktor, der sich auf Ihre CWV-Leistung auswirken kann, ist die Antwortzeit des Servers. Im Allgemeinen verbessert eine schnellere Antwortzeit des Servers jede einzelne Seitenlademetrik.

Idealerweise möchten Sie, dass der Browser Inhalte schnell vom Server empfängt, damit sie auch auf dem Bildschirm erscheinen und in Rekordzeit vom Benutzer angezeigt werden können.

Wie können Sie feststellen, ob Sie eine langsame Serverantwortzeit haben? Verwenden Sie Tools wie WebPage Test und Lighthouse.

Insbesondere Lighthouse verfügt über ein Seitenprüfungselement namens Reduce Initial Server Response Time. Wenn Sie dies in Ihrem Prüfbericht sehen, bedeutet dies, dass Sie Zeit damit verbringen müssen, das Problem mit Ihren Webentwicklern zu untersuchen.

Bessere Website-Performance, bessere Benutzererfahrung – besseres Ranking

Die Core Web Vitals sollen Benutzern helfen, ihre Online-Erfahrung zu genießen. Mit seinem Update zielt Google darauf ab, die Geschwindigkeit der Website und die Benutzererfahrung zu priorisieren. Aber es gibt kein Patentrezept für die Optimierung, da sie von der aktuellen Leistung Ihrer Website, Ihren Zielen und der Branche, in der Sie tätig sind, abhängt.

Letztendlich stellen diese Upgrades sicher, dass das Web mit relevanten und qualitativ hochwertigen Websites gefüllt ist. Um die Best Practices auf Ihre Website anzuwenden, um sicherzustellen, dass Sie Ihren Kunden den besten Service und das beste Erlebnis bieten.