7 Tipps zur Verbesserung Ihrer wichtigsten Web-Vitale-Scores und Page Experience-Signale

Im Jahr 2021 wird Google seinen Algorithmus aktualisieren, um das Seitenerlebnis als Ranking-Signal zu berücksichtigen.

Ziel dieser Änderung ist es, die Benutzererfahrung von Seiten zu berücksichtigen, die in den SERPs zurückgegeben werden, und nicht die herkömmlichen und objektiveren Signale wie PageRank und On-Page-Targeting, die in der Vergangenheit verwendet wurden.

Angesichts des bevorstehenden Updates ist es wichtig, die verschiedenen Facetten der Seitenerfahrung zu verstehen und zu erfahren, wie Sie Ihre Website für jede einzelne davon optimieren können.

Glücklicherweise hat Google die verschiedenen Elemente angekündigt, die zur Bestimmung des Gesamterlebnisses einer Seite beitragen. Diese sind:

• Kern-Web-Vitale: Eine Kombination aus drei wichtigen Leistungsmetriken – Größte inhaltliche Farbe, Verzögerung der ersten Eingabe und kumulative Layoutverschiebung -, die das visuelle Laden, die Interaktivität und die visuelle Stabilität einer Seite beim Laden für Benutzer messen.
• Handyfreundlichkeit: Untersucht, wie einfach Websites auf Mobilgeräten zu verwenden und zu navigieren sind, einschließlich der Lesbarkeit von Inhalten und ob Links und On-Page-Elemente anklickbar und zugänglich sind.
• Sicheres Surfen: Beurteilt, ob auf einer Website Probleme wie Malware, Phishing und gehackte Inhalte auftreten, um sicherzustellen, dass Benutzer sicher surfen können.
• HTTPS: Konzentriert sich darauf, ob die Verbindung einer Website sicher ist und ob die Website wie empfohlen über HTTPS bereitgestellt wird oder nicht.
• Nicht aufdringliche Interstitials: Stellt sicher, dass wichtige On-Page-Inhalte für Benutzer beim Surfen nicht behindert werden.

Um sicherzustellen, dass Ihre Website für diese Änderung bereit ist, habe ich einige Tipps zur Optimierung Ihrer Website für die wichtigsten Bereiche der Seitenerfahrung zusammengestellt.

Diese decken Bereiche wie schnelleres und reibungsloseres visuelles Laden, verbesserte Benutzerfreundlichkeit für Mobilgeräte und verbesserte Website-Sicherheit ab.

1. Laden Sie wichtige Ressourcen vor, um die visuellen Ladezeiten zu verkürzen

Einer der ersten Indikatoren für einen Benutzer, dass eine Seite geladen wird, ist das Erscheinungsbild von Inhalten, die über dem Falz liegen.

Hier kommen LCP (Largest Contentful Paint) und die erste Core Web Vitals-Metrik ins Spiel, um zu messen, wie schnell das Hauptelement auf der Seite geladen wird.

Um das LCP-Element einer Seite zu ermitteln, überprüfen Sie einfach die Seite in Chrome DevTools. Sie wird in der Wasserfalltabelle im angezeigt Performance Tab.

Sobald Sie wissen, was das LCP-Element ist, können Sie den visuellen Fortschritt der Ladezeit auf einfache Weise mithilfe des verwenden Performance Registerkarte in Chrome DevTools.

Versicher dich Screenshots ausgewählt ist und starten Sie die Profilerstellung der Seite, während sie geladen wird.

Sobald Ihr Profil vollständig ist, wird durch Bewegen des Mauszeigers über das Lastdiagramm oben ein Screenshot der Seite angezeigt, die im Laufe der Zeit geladen wurde.

Auf diese Weise können Sie visualisieren, wie schnell die verschiedenen Seitenelemente geladen werden.

Um das Laden des LCP-Elements und des Inhalts über dem Falz zu beschleunigen, sollten Sie Methoden wie das Vorladen verwenden, um den Browser anzuweisen, diese Ressourcen vorrangig abzurufen.

Beispiel aus MDN-Webdokumenten

2. Optimieren Sie die Haupt-Thread-Aktivität, indem Sie lange Aufgaben minimieren

Hinter den Kulissen gibt es viele verschiedene Probleme, die dazu führen können, dass ein Benutzer warten muss, bis der Browser auf das Tippen oder Klicken auf eine Seite reagiert.

Dies wird anhand der zweiten Core Web Vitals-Metrik, First Input Delay (FID), gemessen.

Während diese Erfahrung für Benutzer frustrierend sein kann, können wir dieses Problem beheben und die Wartezeiten zwischen menschlichen Interaktionen und Browserantworten verkürzen.

Lange Aufgaben tragen häufig zu diesem Problem bei.

Im Wesentlichen handelt es sich dabei um Teile des JavaScript-Codes, die den Hauptthread für einen langen Zeitraum blockieren und dazu führen, dass die Seite einfriert und nicht mehr reagiert.

Lange Aufgaben in Chrome DevTools finden Sie oben in der Wasserfalltabelle unter Main Registerkarte und werden mit einem roten Dreieck hervorgehoben.

Wenn Sie auf eine lange Aufgabe klicken und in die gehen Prost Auf der Registerkarte werden die verschiedenen Aktivitäten aufgelistet, die innerhalb der Aufgabe aufgetreten sind, z. B. das Kompilieren und Parsen von Skripten.

Der erforderliche Fix hängt von den Aktivitäten ab, die zu Blockierungen des Hauptthreads beitragen. Ein häufiger Fix zum Lösen langer Aufgaben ist jedoch das Aufteilen von Code und das Bereitstellen von Skripten in kleineren Blöcken.

3. Reservieren Sie Speicherplatz für Bilder und Einbettungen zum Laden

Die dritte Core Web Vitals-Metrik, Cumulative Layout Shift (CLS), untersucht den Betrag, um den sich das visuelle Layout einer Seite beim Laden einer Seite bewegt.

Dies dient dazu, einen frustrierenden Bereich von UX zu messen, den wir wahrscheinlich alle erlebt haben:

Ein Benutzer klickt auf einen bestimmten Link, aber die Seite verschiebt sich und er klickt versehentlich in einen anderen Bereich der Seite.

Eine der häufigsten Ursachen für einen hohen CLS-Score und damit eine schlechte UX ist, dass keine Speicherplätze für Bilder und eingebettete Ressourcen zum Laden reserviert werden.

Verwenden Sie beispielsweise die Funktion “Chrome DevTools-Screenshots” in der Performance Auf der Registerkarte können wir sehen, dass das BBC Weather-Cookie-Zustimmungsbanner keinen zugewiesenen Speicherplatz zum Laden hat.

Sobald es geladen ist, wird der sichtbare Inhalt im Ansichtsfenster um die 3-Sekunden-Marke nach unten verschoben.

In diesem Beispiel von CNN können wir jedoch sehen, dass das auf ihrer Homepage vorgestellte Video einen reservierten Platz in der Seitenstruktur hat, sodass der Rest des Seitenlayouts nach dem Laden des Videos unverändert bleibt.

4. Stellen Sie sicher, dass wichtige Seitenvorlagen für Handys geeignet sind

Nachdem der mobile Datenverkehr 2016 den Desktop-Datenverkehr überholte, war es entscheidend sicherzustellen, dass Websites für die mobilen Geräte optimiert wurden, mit denen immer mehr Benutzer surfen.

Das Layout und die Benutzerfreundlichkeit einer Website auf einem mobilen Gerät können die Benutzererfahrung beeinträchtigen oder beeinträchtigen.

Beispielsweise sollten Benutzer in der Lage sein, wichtige Inhalte klar und zugänglich anzuzeigen, ohne sie vergrößern zu müssen.

Links ein Beispiel für ein schlechtes mobiles Layout, rechts ein gutes Beispiel.

Es gibt zwei Möglichkeiten, um die Benutzerfreundlichkeit Ihrer Website auf Mobilgeräten zu bewerten. Der erste besteht darin, den Mobile Usability-Bericht in der Google Search Console zu überwachen.

In diesem Bericht werden Probleme wie nicht auf den Bildschirm passender Inhalt und zu kleiner Text angezeigt sowie eine Liste der betroffenen URLs für jedes Problem angezeigt.

Die zweite Methode besteht darin, wichtige Seitenvorlagen über den mobilen Test von Google auszuführen.

Dies ist eine gute Möglichkeit, einzelne Seiten vor Ort zu überprüfen.

5. Überprüfen Sie Ihre Site auf Sicherheitsprobleme

Neben der Ladeleistung und der Benutzerfreundlichkeit für Mobilgeräte spielt die Website-Sicherheit auch eine Rolle bei der Bestimmung des Seitenerlebnisses.

Google möchte sicherstellen, dass die in den SERPs präsentierten Websites für Nutzer ohne das Risiko von Sicherheitsproblemen sicher sind.

Die wichtigsten Sicherheitsprobleme sind Malware, unerwünschte Software, Phishing und irreführende Inhalte.

Eine einfache Möglichkeit, um zu überprüfen, ob Ihre Website Probleme aufweist, die Ihre Benutzer gefährden könnten, finden Sie unter Sicherheitsprobleme Bericht in der Google Search Console.

Diesen Bericht finden Sie unter Sicherheits- und manuelle Aktionen Überschrift.

6. Stellen Sie sicher, dass Formulare und eingebettete Ressourcen über HTTPS bereitgestellt werden

Die Einbindung von HTTPS als Signal für das Seitenerlebnis ist eine weitere Möglichkeit, mit der Google versucht, die Sicherheit der Nutzer beim Surfen zu gewährleisten.

Das Bereitstellen von Inhalten, die Benutzerinteraktion und -eingabe über eine nicht sichere HTTP-Verbindung erfordern, stellt ein Risiko für Benutzer dar und macht sie und ihre Daten anfälliger.

Dies ist besonders wichtig für Formulare, in denen Benutzer persönliche Informationen eingeben, z. B. an Kassen, an denen Zahlungsinformationen weitergegeben werden.

Ein Beispiel für eine unsichere Verbindung links neben einer Checkout-Seite mit einer sicheren Verbindung rechts

Eine Möglichkeit, diese Probleme zu überprüfen, ist die Verwendung von Sicherheit Bericht in Screaming Frog.

In diesem Bericht können Sie die Anzahl der Instanzen von Formularen anzeigen, die auf HTTPS-URLs bereitgestellt werden, sowie Probleme mit gemischten Inhalten, bei denen eine Mischung von Seitenressourcen über HTTP und HTTPS bereitgestellt wird.

Damit Ihre Benutzer sicher surfen können, stellen Sie sicher, dass Ihre Site über ein aktuelles SSL-Zertifikat verfügt, und migrieren Sie alle Ihre URLs und On-Page-Ressourcen zu HTTPS.

7. Stellen Sie sicher, dass Interstitials wichtige Inhalte nicht behindern

Wenn eine Website aufdringliche Interstitials enthält, die viel Platz auf einer Seite beanspruchen und es den Benutzern erschweren, auf wichtige Inhalte auf der Seite zuzugreifen, kann dies negative und frustrierende Erfahrungen für die Benutzer verursachen.

Ein Beispiel für ein aufdringliches Interstitial auf der linken Seite neben einem nicht aufdringlichen Popup auf der rechten Seite

Durch manuelles Überprüfen Ihrer Seiten auf verschiedenen Geräten oder erneut mithilfe der Funktion “Chrome DevTools-Screenshots” können Sie visualisieren, wie sich Interstitials auf Ihre Benutzer auswirken können.

Um die Surferfahrung Ihrer Benutzer nicht zu stören.

Überlegen Sie, ob Sie Popups und Interstitials neu gestalten möchten, damit sie wichtige Inhalte auf der Seite nicht behindern und dass Benutzer sie nicht physisch schließen müssen, um ihre Reise auf Ihrer Website fortsetzen zu können.

Fazit

Wenn Sie diese Tipps befolgen und die Optimierung des Seitenerlebnisses in Ihre SEO-Strategie integrieren, können Sie dazu beitragen, die Signale für das Seitenerlebnis Ihrer Website zu verbessern.

Dies wird sich sowohl kurzfristig als auch langfristig positiv auswirken.

Die Verbesserung des Seitenerlebnisses trägt nicht nur dazu bei, die Leistung Ihrer Website zukunftssicher zu machen, indem Sie sie in die bestmögliche Position bringen, um vom bevorstehenden Algorithmus-Update zu profitieren, sondern stellt auch positive Erfahrungen für Benutzer auf Ihrer Website sicher.

Bei der Optimierung der Seitenerfahrung geht es nicht darum, bestimmte Kriterien für Suchmaschinen zu erfüllen.

Es geht darum, echten Benutzern die bestmöglichen Erfahrungen zu bieten.

Und das ist ein Endziel, auf das wir uns alle einlassen können.

Mehr Ressourcen:

Bildnachweis

Alle Screenshots vom Autor, November 2020