Bessere Rankings erhält man neben gut rankenden Keywords auch für eine schnelle Website mit guter Benutzererfahrung. Das honoriert Google ganz besonders um Seiten zu bewerten (Rankings).


Auf seinem Weg, ein „besseres Web“ und immer reichhaltigere, nutzerzentrierte Erfahrungen anzubieten, hat Google die Tür mit neuen On-Page-Elementen geöffnet, die mittelfristig SEO stark beeinflussen werden. Diese Elemente beziehen sich auf die Ladegeschwindigkeit der Seite, die Reaktionsfähigkeit und die visuelle Stabilität. Sie tragen den Namen Core Web Vitals und werden voraussichtlich ab 2021 im Algorithmus der Google-Suche berücksichtigt werden.

Es ist an der Zeit, dass du verstehst, was das Seitenerlebnis für Google bedeutet, wie du es analysieren und letztendlich die Leistung und das Ranking deiner Website verbessern kannst.

Google und die Nutzererfahrung

Die Mission von Google besteht darin, den Nutzern seiner Suchmaschine die beste Erfahrung zu bieten. Ob du es magst oder nicht, aber Google gestaltet das Web und lädt (oder zwingt) Website-Besitzer dazu ein, die „besten“ Praktiken zu befolgen. Wenn Google beispielsweise morgen vorschlägt, dass Websites einen blauen Hintergrund haben sollten, werden alle Websites einen blauen Hintergrund haben. Aber natürlich wird uns Google nicht auffordern, etwas zu tun, was keinen Sinn macht. Die ursprüngliche Mission von Google (1998) bestand darin, die Informationen der Welt zu organisieren und sie allgemein zugänglich und nützlich zu machen.

Zu seinem 20. Jahrestag erinnerte Google an die grundlegenden Prinzipien der „Suche“. Die wichtigsten davon sind:

  • In erster Linie konzentrieren wir uns auf den Nutzer. Ob du nach Rezepten suchst, für eine Prüfung lernst oder Informationen darüber suchst, wo du wählen gehen kannst – wir konzentrieren uns darauf, deinen Informationsbedarf zu decken.
  • Wir bemühen uns, dir so schnell wie möglich die relevantesten und qualitativ hochwertigsten Informationen zu liefern.

Um den Content für SEO (oder für Google) zu optimieren, ist es notwendig, den Benutzer in den Mittelpunkt zu stellen, vollständigen Content mit strukturierten Informationen und auch ein hervorragendes Seitenerlebnis zu bieten. Google möchte also qualitativ hochwertige Seiten, die schnell geladen werden.

Wie ist das Seitenerlebnis in den Augen von Google?

Das Seitenerlebnis besteht aus einer Reihe von Elementen, die von Google gemessen werden, um festzustellen, ob deine Seiten ein gutes Erlebnis bieten, wenn ein Nutzer sie besucht. Beispielsweise versucht Google zu verstehen, ob deine Seite schnell geladen wird und ob sie für mobile Geräte optimiert ist. Alle folgenden Eigenschaften werden berücksichtigt, um eine „gute Seitenerfahrung“ in der Google-Suche zu messen:

  • Mobile-Friendly: Deine Seite ist für das Surfen mit Mobiltelefonen optimiert.
  • Sicheres Browsen: Deine Seite enthält keinen böswilligen (Malware) oder irreführenden Content (Phishing).
  • HTTPS: Die Seite wird in HTTPS bereitgestellt.
  • Keine aufdringlichen Popups: Deine Seite sollte keine Elemente enthalten, die den Hauptinhalt behindern (z. B. ein Popup, das den größten Teil des Inhalts unmittelbar nach dem Seitenaufruf des Benutzers auf deiner Seite verdeckt … sowas von nervig 🙂 ).
  • Core Web Vitals: Die Seite bietet ein großartiges Benutzererlebnis und konzentriert sich auf die Aspekte Laden, Interaktivität und visuelle Stabilität.

Die meisten hochrangigen Websites implementieren bereits Elemente wie Mobilfreundlichkeit, HTTPS, sicheres Browsen und keine aufdringlichen Popups. Diese Studie zeigt, dass bereits 75% der Websites mobilfreundlich sind und nun sind es sogar noch ein paar mehr geworden. Aber bieten all diese Seiten ein außergewöhnliches Erlebnis?

Ab 2021 werden die Core Web Vitals auch von Google gemessen, um das Seitenerlebnis zu definieren und die „Geschwindigkeit“ einer Website zu berücksichtigen.

Core Web Vitals und die weiteren Kriterien für Googles Seitenerlebnis

Core Web Vitals, bald entscheidend für dein SEO?

Das Ziel von Core Web Vitals ist es, die tatsächliche Benutzererfahrung zu messen. Zu diesen Eigenschaften gehören Ladeleistung, Interaktivität und visuelle Stabilität der Seite. Core Web Vitals bestehen aus drei Hauptsignalen (jetzt wird es leider etwas technisch – don’t worry!):

  • Largest Contentful Paint (LCP)
  • First Input Delay (FID)
  • Cumulative Layout-Shift (CLS)

Was sind Core Web Vitals und was messen sie?

Schauen wir uns mal näher an, was sich hinter Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS) verbirgt.

Largest Contentful Paint (LCP)

Der LCP misst die Leistung beim Laden von Seiten. Genauer gesagt misst LCP die wahrgenommene Ladegeschwindigkeit, d. h. wie lange es dauert, bis deine Seite die ersten Elemente anzeigt, die für den Benutzer wichtig sind. Es misst nicht das vollständige Laden der Seite. Das ist ein großer Unterschied.

Lagrest Contentful Paint

Um eine gute Benutzererfahrung zu bieten, sollten Websites sich bemühen, den ersten „Frame“ des Contents innerhalb von 2,5 Sekunden anzuzeigen. Dies entspricht den Standards von Google. Aber wir sind uns alle einig, dass es sinnvoll ist, Content zu haben, der direkt angezeigt wird – niemand mag es lange leere, weiße Seiten zu sehen. Eine Webseite wird in Etappen angezeigt. In der Anfangsphase wird also der Anfang deiner Seite geladen, sobald die Hauptelemente angezeigt werden, wird das LCP erreicht. Das war’s schon!

Verschiedene Stufen des Seitenaufbaus

Mit einem schnellen LCP kannst du den Benutzer vom Interesse deiner Seite „überzeugen“. Wir wissen, dass die ersten paar Sekunden entscheidend sind, um einen „Absprung“ zu vermeiden. Denke daran: Google berücksichtigt die Verweildauer als Referenzsignal, daher ist es besser, Besucher auf deiner Seite zu halten.

Abonniere unseren Newsletter (max. 3x pro Monat)

Unser Newsletter informiert Dich über neue Themen und Trends im Onlinemarketing und der Leadgenerierung.

* benötigt





First Input Delay (FID)

Der First Input Delay (FID) misst die „Reaktionsfähigkeit“ einer Seite. Er misst die Zeit zwischen der ersten Interaktion eines Benutzers mit Deiner Seite (d.h. wenn er auf einen Link oder eine Schaltfläche klickt) und dem Zeitpunkt, an dem der Browser tatsächlich in der Lage ist, auf diese Interaktion zu reagieren.Du hast einen ausgezeichneten FID, wenn die Interaktion mit deiner Seite (wie das Klicken auf eine Schaltfläche) weniger als 100 ms dauert, um die nächste Aktion auszulösen. Der FID kann als ein Maß für die Frustration der Benutzer angesehen werden. In der Tat gibt es nichts frustrierenderes als das Absenden eines Formulars oder das Klicken auf eine Schaltfläche, welches mehrere Sekunden benötigt, um den nächsten Schritt auszulösen. Null Frustration entspricht einem FID von nahezu Null. Oder andersherum.

Cumulative Layout Shift (CLS)

Der CLS misst die visuelle Stabilität und die Häufigkeit, mit der Benutzer unerwartete Layoutänderungen mitbekommen. Eine visuelle Änderung tritt jedes Mal auf, wenn ein Element auf deiner Seite seine Position unerwartet ändert. Hier ein Beispiel für eine visuelle Änderung: Du liest gerade einen Absatz, und plötzlich verschwindet er. Der Abschnitt wird durch eine Schaltfläche ersetzt (die gerade fertig geladen wurde). Du musst nach unten scrollen, um mit dem Lesen fortzufahren. Oder wenn du gerade nach unten scrollst und ein Video, was gerade fertig geladen hat ins Bild springt, das kennen wir alle.Cumulative Layout ShiftDie CLS-Berechnung basiert auf verschiedenen Untersuchungen und Bewegungen von Elementen innerhalb des Browsers während des Ladens der Seite. Du musst eine Punktzahl nahe Null haben, um als ausgezeichnet zu gelten.

Core Web Vitals – Kurz gesagt

LCP: Die Zeit, um die ersten Elemente der Seite zu sehen. Sie vermittelt ein Gefühl von Geschwindigkeit.
FID: Die Zeit für die erste Interaktion (wie ein Klick). Sie gibt einen Hinweis auf die Frustration des Benutzers, wenn sie zu langsam ist.
CLS: Visuelle Stabilität, um jegliches „Wo ist der Absatz, den ich gelesen habe? S****** Ich muss wieder nach unten scrollen“ Gefühl deines Besuchers zu vermeiden.

Der Einfluss von Core Web Vitals auf SEO

Zunächst einmal verwendet Google Core Web Vitals noch nicht in seinem Suchalgorithmus. Diese Elemente werden von Google im Jahr 2021 berücksichtigt und das genaue Datum ist nicht bekannt.

Der relevanteste Content wird immer den ersten Platz erhalten

Google gibt an, dass die Seiten mit den besten Informationen, auch wenn die Erfahrung mit den Seiten geringer ist, ein besseres Ranking haben werden. Die Qualität des Contents (und die Anzahl der Backlinks) wird vorerst Vorrang vor dem Seitenerlebnis haben.

In Fällen, in denen die Seiten eine ähnliche Relevanz haben, werden jedoch die Seiten mit den besten Erfahrungen an die erste Stelle gesetzt. In unserer Informationswelt, in der Informationen in ständigem Wettbewerb stehen, könnte die Benutzererfahrung in Zukunft das Unterscheidungsmerkmal sein.

Zum Thema Mobile

Derzeit sind die Seiten in den Top Ergebnissen auf Mobile ausschließlich im AMP-Format. Zur Erinnerung: Das AMP-Format (Accelerated Mobile Pages) bietet Mechanismen zum schnellen Laden von Seiten auf Mobiltelefonen. Übrigens wird dieses Format auch von Google direkt präferiert.

Google Ergebnis mit AMP

Google gibt an, dass die Top Ergebnisse für Mobile alle Arten von Seiten akzeptieren, wenn die Suche aktiv die Core Web Vitals Elemente verwendet. Was du verstehen musst: Nur Seiten mit ausgezeichneter Nutzererfahrung und guter Ladezeit kommen für den Abschnitt der Top Stories in Frage, ohne unbedingt die AMP-Technologie zu verwenden.

Tools zum Testen und Messen von Seitenerfahrung und Core Web Vitals

Die Tabelle fasst die Tools oder Methoden zum Testen der verschiedenen Signale zusammen, die bereits von Google verwendet werden und mit dem Seitenerlebnis zusammenhängen.

 Eigenschaft Tool
Mobile Friendly  verschiedene wie dieses hier
Safe Browsing  Search Console Security Report
HTTPS  Öffne deine Seite in Google Chrome und schau ob neben der URL ein Schloss ist
Popups Das braucht kein Tool, nur deine Augen

Web-Vitals

Web Vitals ist eine Chrome-Erweiterung, mit der du auf einen Blick erkennen kannst, wie die LCP, FID, CLS deiner Seite sind.Chrome Web Vitals Extension

Lighthouse

Lighthouse ist ein automatisiertes Audit-Tool und erstellt einen Diagnosebericht. Um die Benutzerfreundlichkeit zu verbessern, zeigt es dir die auf deiner Seite gefundenen Probleme. Lighthouse ist direkt in die Chrome-Entwicklungswerkzeuge unter dem Panel „Lighthouse“ integriert. Es ist möglich Lighthouse über eine Chrome-Erweiterung zu installieren.

Lighthouse Audit

Seit Lighthouse 6.0 sind Einstellungen in Bezug auf Core Web Vitals wie LCP und CSL im Bericht im Abschnitt „Performance“ verfügbar.

Page Speed Insights

Page Speed Insights ist über diesen Link zugänglich und gibt dir Informationen über die Ladegeschwindigkeit einer Webseite, um deren Leistung zu optimieren. Page Speed basiert auf Lighthouse. Es gibt aber viele weitere Tools mit denen man Ergebnisse von Google gegenprüfen kann – z.B. Pingdom.

Chrom-UX-Report (CrUX)

Der Chrome UX Report (CrUX) enthält eine Menge öffentlicher Daten über die reale Benutzererfahrung auf Millionen von Websites. Diese Daten werden von Google abgerufen, wenn ein Benutzer zustimmt, Statistiken über Chrome oder andere Dienste zu senden. (Du kennst das Kontrollkästchen!? Jetzt wissen wir es…). Diese Datenbank wird mit einer API geliefert, die es jedem Entwickler ermöglicht, Leistungsdaten für beliebige Websites abzurufen: für deine Website oder die Websites deiner Konkurrenten. Dies ist der einzige zuverlässige Weg, um zu erfahren, wie deine Besucher die Leistung deiner Website beurteilen.

CrUX Dashboard

Um die API zu benutzen solltest du etwas Erfahrung mit Dashboards haben, hier erfährst du wie man schnell und einfach Dashboards mit dem Google Data Studio erstellt.

Das Chrome DevTools Leistungs-Panel

Das Chrome-DevTools-Performance-Panel enthält einen neuen Abschnitt Experience, der dir helfen kann, unerwartete Layoutänderungen zu erkennen. Man öffnet es indem man auf F12 drückt oder rechtsklick auf ein Element der Seite und dann auf untersuchen klickt. Dieser Abschnitt ist nützlich, um visuelle Instabilitätsprobleme auf deiner Seite zu finden und zu korrigieren und den CLS zu beheben.

Chrome DevTool

Core Web Vitals in der Search Console

Der Bericht „Core Web Vitals“ ist auch über die Google Search Console verfügbar. Dieser Bericht informiert dich darüber, welche Gruppen von Seiten auf deiner Website besondere Aufmerksamkeit benötigen, basierend auf den tatsächlichen Daten aus dem CrUX.

Ein Kommentar zu den Daten

Du hast vielleicht schon bemerkt, dass die Tools echte Daten und/oder simulierte Daten liefern (Field Tools vs. Lab Tools). Die echten Daten basieren auf Statistiken, die von Google gesammelt wurden. Jedes Mal, wenn jemand eine Website besucht, hat er Daten über die Leistung an Google geschickt (sofern er zugestimmt hat). Die Daten sind reale Daten und genauer als simulierte Daten. Jetzt, da du viele Werkzeuge zum Testen der Leistung kennst, wollen wir herausfinden wie man sie benutzt.

Core Web Vitals und Benutzererfahrung Schritt für Schritt optimieren

Um mit der Optimierung deiner Website zu beginnen, empfiehlt Google die folgenden Schritte:

Schritt 1 – Starte mit der Google Search Console

Gehe zur Google Search Console und öffne den Bericht „Core Web Vitals“, um Seiten zu identifizieren, die besonderer Aufmerksamkeit bedürfen.

Schritt 2 – Analysiere Seiten mit PageSpeed Insights

Von der Search Console aus kannst du direkt auf die Schaltfläche klicken, die PageSpeed Insights öffnet. Du findest einen ersten Bericht mit Verbesserungsvorschlägen.

Page Speed Insights Ergebnis

Schritt 3 – Mehr Daten mit Lighthouse

Führe jetzt den Test mit Lighthouse durch. Du solltest beobachten, dass Lighthouse und PageSpeed Insight ähnliche Verbesserungsmöglichkeiten aufweisen. In Lighthouse findest du auch zusätzliche Informationen.

Lighthouse Audit Ergebnis

Schritt 4 – Löse die Probleme deiner Website

Als Ergebnis dieser ersten Analyse hast du nun viele Probleme identifiziert, die angegangen werden müssen. Jede Website hat ihre eigenen Probleme.

Tipps und Best Practices für die Optimierung deiner Website

Website-Optimierungsprobleme sind oft auf ein technisches Problem zurückzuführen. Bei Problemen, die mit der Seite (Clientside) zusammenhängen, wie z.B. CSS und Javascript, ist ein Webentwickler nützlich, um den Code deiner Seite zu modifizieren. Bei Problemen, die mit deinem CMS oder der Infrastruktur (Serverside) zusammenhängen, wird ein Backend-Entwickler oder DevOps benötigt. Denke daran: Um die Leistung deiner Website zu verbessern, brauchst du einen technischen Hintergrund – oder du kannst dich an einen Webentwickler wenden. Falls du aber keine Erfahrung hast, gibt es aber auch sehr einfache Möglichkeiten, die Performance deiner Seite selber zu verbessern ohne irgendwelche Kenntnisse.

Website Optimierung ohne zu programmieren

Diese Änderungen kannst du ganz ohne Vorkenntnisse selber vornehmen:

  • Komprimiere deine Bilder (z.B. hiermit)
  • Ersetze animierte GIFs durch Videos
  • Verwende Bildformate der neuen Generation wie WebP oder JPEG 2000 (aber leider werden diese Formate noch nicht von allen Browsern unterstützt), grundsätzlich kannst du aber PNG Bilder, die keine Transparenz benötigen zu JPEG formatieren

Website Optimierung – für Fortgeschrittene

Wenn du ein Entwickler bist, der sich nicht scheut, sich die Hände schmutzig zu machen, sind hier einige Empfehlungen und bewährte Methoden:

  • Reduziere die Größe jeder Seite auf weniger als 500KB (Seite + alle Ressourcen).
  • Halte die Gesamtzahl der Ressourcen pro Seite auf weniger als 50 (ideal für Mobiltelefone).
  • Erwäge die Implementierung eines AMP-Frameworks, das viele Ladeprobleme auf Mobile lösen kann
  • Lazyloade deine Bilder
  • Nutzung ein CDN (Content Delivery Network) für alle Inhalte oder Bilder und andere Assets. Und um mit den kritischen Punkten fortzufahren, die die Unterstützung von Entwicklern erfordern, lasse uns einige häufige leistungsbezogene Probleme von Webseiten im Detail beschreiben. Wie immer solltest du vorher ein Backup erstellen.

Verwende ein Bild für den Desktop und eines für mobile Geräte

Es ist möglich, Variationen desselben Bildes zu erstellen und diese im HTML-Code anzugeben. Auf diese Weise wird, abhängig von der Bildschirmgrösse, das richtige Bild in der richtigen Größe angezeigt, was Ladezeiten verringern kann.

<img src=“banner-large.jpg“ srcset=“banner-small.jpg 480w, banner-large.jpg 1080w“ sizes=“50vw“>

Eliminieren von render-blockierenden Ressourcen

Es gibt einige Javascript und CSS Dateien, die bei der Initialisierung Deiner Seite nicht verwendet werden. Lighthouse oder Page Speed Insights helfen dabei, sie zu finden. Dort erfährst du, welche Ressourcen ausgeführt und welche „nur“ geladen werden. Die „nur“ geladenen Ressourcen können später mit dem Attribut async oder defer ausgeführt werden. Auf diese Weise wird das erste Element schneller geladen und dein LCP wird verbessert.

Unbenutztes CSS und JS entfernen

In deinen CSS- und JS-Dateien gibt es Codezeilen, die nie verwendet werden, und trotzdem werden sie beim Laden deiner Seite vollständig „gelesen“. Diese Daten werden unnötig geladen und verarbeitet. Dafür ist ist das Chrome DevTool auch hilfreich. Man muss unter Performance die Aufnahme starten (STRG + E). Nützlicherweise wird auch der Prozentanteil angezeigt, der benutzt wird. Dann wird es notwendig sein, in jeder Datei den Code zu bearbeiten und ihn gegebenenfalls zu entfernen.

Code Coverage

Server-seitige Ressourcen komprimieren

Lighthouse erkennt Dateien, die keine Content-Kodierung wie br, gzip oder deflate aufweisen. Es wird empfohlen, sie zu komprimieren. Dieser Vorgang muss serverseitig erfolgen, zum Beispiel in deinem CMS oder in deiner .htaccess Datei.

CSS und JS verkleinern

CSS und JS können verkleinert (minified) werden, d.h. auf einer Zeile dargestellt, von Kommentaren bereinigt werden und benötigen daher weniger Platz. Es ist ein relativ einfacher Vorgang und kann mit einem Online-Tool durchgeführt werden. Teste das Ergebnis vor der Aktualisierung deiner Änderungen. Der letzte Tipp: Teste deine Änderungen richtig. Ändere nicht direkt auf deiner Website und habe immer ein Backup parat.

Zusammenfassung

Die Verbesserung der Erfahrung auf einer Website ist ein ziemlich komplexes Thema und erfordert etwas technisches Wissen, um es lösen zu können. Du musst dich fragen, ob es sich lohnt, Zeit in eine Verbesserung zu investieren, die dein SEO nicht „notwendig“ beeinflusst. Content ist wichtiger als Ladegeschwindigkeiten.Denke daran, dass Google sich immer mehr auf das Nutzererlebnis konzentrieren wird. Langfristig werden diese Faktoren aber auch bei SEO mehr und mehr an Bedeutung gewinnen. Denke bei deinen nächsten Projekten von Anfang an über Optimierung nach.

Erfahre mehr über die Philosophie von Oplayo in diesem PDF

Oplayo Company PräseBei der Auswahl eines Online-Marketing Beratungs- und Serviceunternehmens oder eines Performance Marketing Teams achten Sie zumindest auf diese Auszeichnungen:PartnerBadge-HorizontalSEO 2015

Oplayo ist nun auch ein autorisiertes Beratungsunternehmen für „Digitale Markterschließung“ und „Digitalisierte Geschäftsprozesse“ GO DIGITAL
Lassen Sie sich von uns beraten wie Sie davon profitieren können!

Headerbild von Carl Heyerdahl on Unsplash