Page Experience

Page Experience: Nutzerfreundlichkeit bei Google

Page Experience ist eine Reihe an Signalen, die messen, wie Nutzer die Interaktion mit einer Webseite über den reinen Informationswert hinaus wahrnehmen, sowohl auf mobilen als auch auf Desktop-Geräten. Dazu gehören Core Web Vitals, eine Reihe von Metriken, die die reale Nutzererfahrung in Bezug auf Ladeleistung, Interaktivität und visuelle Stabilität der Seite messen. Es umfasst auch bestehende Such-Signale: Mobilfreundlichkeit, HTTPS und Richtlinien für aufdringliche Einblendungen.

NUTZERFREUNDLICHKEIT VON SEITEN IN DEN GOOGLE-SUCHERGEBNISSEN

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Die Nutzerfreundlichkeit von Seiten wird anhand einer Reihe von Signalen bestimmt, mit denen gemessen wird, wie Nutzer sowohl auf Mobilgeräten als auch auf Computern eine Webseite über den reinen Informationswert hinaus wahrnehmen. Dazu gehören die Core Web Vitals, die mithilfe verschiedener Messwerte abbilden, wie nutzerfreundlich die Webseite im praktischen Einsatz in Bezug auf Ladezeiten, Interaktivität und visuelle Stabilität ist. Zusätzlich werden vorhandene Suchsignale einbezogen: Optimierung für MobilgeräteHTTPS und Richtlinien zur Vermeidung aufdringlicher Interstitials in der mobilen Erfahrung.

WIE SICH DIE NUTZERFREUNDLICHKEIT VON SEITEN AUF DAS RANKING AUSWIRKT 

Sie ist dabei zwar wichtig, dennoch berücksichtigt Google beim Ranking weiterhin vor allem die angebotenen Informationen – auch wenn die Nutzerfreundlichkeit in mancher Hinsicht unterdurchschnittlich ausfällt. Eine gute Nutzerfreundlichkeit bedeutet nicht, dass relevante Inhalte unwichtiger werden. Wenn allerdings viele Seiten ähnlich relevante Inhalte haben, bekommt die Nutzerfreundlichkeit einen wesentlich höheren Stellenwert für die Sichtbarkeit in der Google Suche.

Page Experience OPTIMIEREN

Hier findest du einige Ressourcen, mit denen du die Page Experience einer Seite messen, beobachten und optimieren kannst.

Die Seite bietet im Hinblick auf Ladezeiten, Interaktivität und visuelle Stabilität eine gute Nutzerfreundlichkeit

Page Experience Signale

CORE WEB VITALS

Largest Contentful Paint (LCP)

Hiermit wird die Ladeleistung gemessen. Für eine gute Nutzerfreundlichkeit solltest du anstreben, dass auf einer Website der LCP innerhalb der ersten 2,5 Sekunden des Ladevorgangs stattfindet.

First Input Delay (FID)

Hiermit wird die Interaktivität gemessen. Für eine gute Nutzerfreundlichkeit solltest du anstreben, dass eine Website einen FID von weniger als 100 Millisekunden erreich.

Cumulative Layout Shift (CLS)

Hiermit wird die visuelle Stabilität gemessen. Für eine gute Nutzerfreundlichkeit solltest du anstreben, dass eine Website einen CLS-Wert von weniger als 0,1 erreicht.Im Folgenden findest du einige Tools, mit denen du die Core Web Vitals erfassen und beobachten kannst.

Optimierung für Mobilgeräte

Die Seite ist für Mobilgeräte optimiert. Mit dem Test auf Optimierung für Mobilgeräte kannst du herausfinden, ob deine Seite auch auf Mobilgeräten optimal funktioniert.Dieses Signal gilt nicht für Computer. Wenn eine Website separate Desktop- und mobile URLs mit einer entsprechenden Konfiguration hat, basiert das Desktopsignal auf den URLs, die Computernutzern angezeigt werden.

Um die Leistung zu verbessern, muss man viel ausprobieren, und nicht jeder Versuch klappt wie erwartet. Hier sind jedoch einige Verbesserungen, die uns geholfen haben, unsere Ziele zu erreichen.

Die Reservierung von Fläche für das Laden von Bildern hat unsere CLS-Punktzahl erheblich verbessert, da sie verhindert, dass sich der Inhalt unter den Bildern verschiebt. Wir haben die CSS-Eigenschaft aspect-ratio verwendet, um dies in Browsern zu erreichen, die diese Eigenschaft unterstützen. Bei Browsern, die dies nicht unterstützen, haben wir ein transparentes Platzhalterbild geladen, das im Cache gespeichert wurde und nur wenige Bytes groß ist, so dass es fast sofort geladen wird.

Dieses generische Bildverhalten ermöglichte es uns, die endgültige Bildhöhe während des serverseitigen Renderings auf der Grundlage der Breite des Ansichtsfensters und des Bildseitenverhältnisses im Voraus zu berechnen. Dies führte zu einem HTML-Markup, bei dem der vertikale Raum für das endgültige Bild reserviert war. Die Verbesserung war besonders auf mobilen Geräten zu beobachten, da die Bilder in der vollen Breite des mobilen Viewports gerendert werden.

Bestimmte Komponenten auf den Websites haben dynamische Inhalte (z. B. eine Liste mit externen Kundenbewertungen) und konnten nicht in reines CSS konvertiert werden, um die Leistungsvorteile des serverseitigen Renderings zu nutzen. In diesen Bereichen ist es schwierig, Layoutverschiebungen zu verbessern, da der Inhalt (und damit die Höhe) variiert. In diesen Fällen haben wir die Komponente in einen Container mit einer Mindesthöhe verpackt, die auf der Grundlage der Beobachtung der durchschnittlichen Höhe für jede der spezifischen Komponenten festgelegt wurde. Die Mindesthöhe wird entfernt, sobald die innere dynamische Komponente fertig gerendert ist. Diese Lösung ist zwar nicht perfekt, aber wir konnten die Layoutverschiebung erheblich reduzieren.

HTTPS

Die Seite wird über HTTPS zur Verfügung gestellt. Prüfe, ob die Verbindung deiner Website sicher ist. Wenn die Seite nicht über HTTPS geladen wird, erfährst du hier, wie du deine Website mit HTTPS sicherer gestalten kannst.

YouTube

HOW TO IMPROVE CUMULATIVE LAYOUT SHIFT FOR A BETTER PAGE EXPERIENCE

Updated 19. Oktober 2021

Learn how to reduce your website’s Cumulative Layout Shift. This video covers what a Cumulative Layout Shift is, its common issues and solutions, how to measure it, and what’s a good score. Chapters 0:00 Introduction 0:31 What is Cumulative Layout

YouTube

HOW TO IMPROVE LARGEST CONTENTFUL PAINT FOR A BETTER PAGE EXPERIENCE

Updated 5. Oktober 2021

Largest Contentful Paint is a metric that measures how quickly a page’s main content loads and renders (or paints) most of its visual elements to the screen. Learn more about what a good Largest Contentful Paint score is, how to measure your website

YouTube

HOW TO IMPROVE FIRST INPUT DELAY FOR A BETTER PAGE EXPERIENCE

Updated 21. September 2021

First Input Delay is an API that measures how long it takes for your site to react after someone interacts with it. Learn how to measure your website’s First Input Delay and how to solve common First Input Delay issues in this video.

ZEITRAHMEN FÜR DIE ANZEIGE DES RANKINGS DER NUTZERFREUNDLICHKEIT VON SEITEN AUF DEM COMPUTER

Donnerstag, 04. November 2021 Bei der I/O 2021 haben wir unsere Pläne vorgestellt, für das Ranking der Nutzerfreundlichkeit von Seiten auch die Darstellung auf Computern zu berücksichtigen. Heute geben wir weitere Details bekannt, insbesondere den

4. November 2021

ZEITEN, TOOLS UND WEITERE DETAILS DES UPDATES ZUR NUTZERFREUNDLICHKEIT VON SEITEN

Montag, 19. April 2021 Im November haben wir angekündigt, dass dieses Jahr die Änderung am Ranking der Nutzerfreundlichkeit in der Google Suche unter der Bezeichnung „Update zur Nutzerfreundlichkeit von Seiten“ eingeführt wird.

ZEITPLAN FÜR DIE BERÜCKSICHTIGUNG DER NUTZERFREUNDLICHKEIT VON SEITEN IN DER GOOGLE SUCHE

Dienstag, 10. November 2020 Im vergangenen Mai haben wir angekündigt, dass Signale für die Nutzerfreundlichkeit von Seiten in das Ranking der Google Suche aufgenommen werden. Mithilfe dieser Signale wird gemessen, wie Nutzer die Interaktion mit einer

Verständnis der Page Experience in den Google-Suchergebnissen

https://developers.google.com/search/docs/appearance/page-experience

https://web.dev/lcp/

https://www.seroundtable.com/google-page-experience-update-desktop-in-february-2022-32370.html

#

Chrome UX Report

The Chrome User Experience Report (CrUX) provides user experience metrics for how real-world Chrome users experience popular destinations on the web. https://developer.chrome.com/docs/crux/


Google Core Web Vitals

Eine wichtige Aktualisierung des Google-Suchalgorithmus im Juni dieses Jahres beinhaltet neue Leistungskennzahlen: Core Web Vitals. Die Core Web Vitals sind eine neue Reihe an Signalen, die auf Page Experience basieren und mit bestehenden Signalen wie Mobilfreundlichkeit, sicheres Surfen, HTTPS-Sicherheit und Richtlinien für aufdringliche Einblendungen kombiniert werden, um ein ganzheitliches Bild von der Qualität der Nutzererfahrung auf einer Webseite zu erhalten.

Google Core Web Vitals

Google ist eher zurückhaltend, wenn es um große Algorithmus-Updates geht und darum, wie sich diese Änderungen auf die Suchmaschinenergebnisse und die Rangfolge der Seiten auswirken. Diesmal hat der Suchmaschinengigant einen expliziten Einblick in die bevorstehenden Änderungen gegeben und erklärt, wie sich Websitebesitzer und Digitalagenturen darauf vorbereiten können.

Die Core Web Vitals wurden von Google vor weniger als einem Jahr eingeführt, um reale Nutzererfahrungen auf Websites zu messen und Anhaltspunkte für die Bereitstellung einer großartigen Erfahrung zu liefern. Google sammelt zwar viele Datenpunkte im Zusammenhang mit der Leistung von Websites und berücksichtigt in seinem Algorithmus Hunderte von Ranking-Faktoren, aber die Core Web Vitals, auf die sich dieses Update konzentriert, sind:

Largest Contentful Paint (LCP): misst die wahrgenommene Ladegeschwindigkeit – die Zeit vom Anklicken eines Links bis zur Anzeige des größten Teils des Bildschirminhalts.
Verzögerung der ersten Eingabe (FID): Misst die Reaktionsfähigkeit und Interaktivität – die Zeit, in der „lange“ Aufgaben die Fähigkeit eines Besuchers zur Interaktion mit einer Seite verzögern.
Kumulative Layout-Verschiebung (CLS): Misst die visuelle Stabilität – die unerwartete Verschiebung von Seitenelementen aufgrund von langen Ladezeiten oder Anzeigen, die die Interaktion und das Erlebnis des Nutzers behindern.

Größtes inhaltsstarkes Bild
Das größte inhaltsreiche Bild von Core Web Vital.

In der Vergangenheit war es schwierig zu messen, wie schnell der Hauptinhalt einer Webseite geladen wurde und für die Besucher sichtbar war. Die Metriken spiegelten die ganzheitlichen Erfahrungen der Besucher auf dem Bildschirm nicht genau wider.

Die Metrik Largest Contentful Paint liefert eine genauere Messung des Ladezeitpunkts des Hauptinhalts einer Seite, indem sie die Renderzeit des größten in einem Viewport sichtbaren Bild- oder Textblocks im Verhältnis zum Ladebeginn der Seite angibt.

Beispiel für Largest Contentful Paint mit CNN
Mit freundlicher Genehmigung: Google, web.dev

Largest Contentful Paint wird hauptsächlich beeinflusst durch:

Langsame Server-Antwortzeiten
Rendering-blockierendes JavaScript und CSS
Ressourcen-Ladezeiten
Client-seitiges Rendering
Verzögerung der ersten Eingabe
Core Web Vitals Erste Eingabeverzögerung

Haben Sie schon einmal eine Webseite auf Ihrem Handy geladen, versucht, mit ihr zu interagieren, und waren frustriert, als Sie nichts tun konnten? Die erste Eingabeverzögerung misst die Reaktionsfähigkeit beim Laden und quantifiziert die Erfahrung, die Besucher machen, wenn sie versuchen, mit nicht reagierenden Seiten zu interagieren.

Die Messung beginnt zu dem Zeitpunkt, an dem ein Besucher zum ersten Mal mit einer Seite interagiert, und endet, wenn der Browser mit der Verarbeitung von Event-Handlern als Reaktion auf diese Interaktion beginnt. Dies ist der erste Eindruck eines Besuchers von einer Webseite, der wiederum den Gesamteindruck von der Qualität und Zuverlässigkeit einer Website prägt.

Die Verzögerung der ersten Eingabe wird hauptsächlich beeinflusst durch:

Ausführung von umfangreichen JavaScript-Aufgaben
Pop-ups und Interstitials
Skripte von Drittanbietern wie Bibliotheken zum Nutzerverhalten, Browser-Plugins, Werbung und Tracking-Bibliotheken
Kumulative Layout-Verschiebung
Core Web Vitals Kumulative Layout-Verschiebung

Haben Sie schon einmal einen Artikel gelesen und dann den Überblick verloren, weil sich der Text plötzlich ohne Vorwarnung verschiebt? Solche Erfahrungen sind ärgerlich, vor allem, wenn sich der Inhalt während einer Interaktion wie dem Anklicken eines Links abrupt verschiebt, was dazu führen kann, dass ein Besucher auf den falschen Link klickt.

Dieses Phänomen – ein sichtbares Element, das seine Position von einem gerenderten Frame zum nächsten ändert – wird als Layoutverschiebung bezeichnet. Nicht alle Layout-Verschiebungen sind schlecht. Eine Verschiebung kann als Ergebnis der Besucherinteraktion erwartet werden. Problematisch wird es, wenn die Verschiebungen unerwartet sind.

Beispiel für eine kumulative Layout-Verschiebung
Mit freundlicher Genehmigung: Google, web.dev

Die kumulative Layoutverschiebung misst die Gesamtsumme aller einzelnen Layoutverschiebungswerte für jede unerwartete Layoutverschiebung, die während der Lebensdauer der Seite auftritt. Sie gibt an, um wie viel sich der sichtbare Inhalt im Ansichtsfenster verschoben hat, ebenso wie der Abstand der Übersetzt mit www.DeepL.com/Translator (kostenlose Version)

https://wpengine.com/resources/measuring-and-improving-site-performance-core-web-vitals/#How_do_Core_Web_Vitals_affect_my_site