Ab Juni 2021 verändert Google einmal mehr seinen Suchalgorithmus. Dann werden die neuen Core Web Vitals Bestandteil des Ranking-Faktors. Die neuen Webvitals sind laut Google als Qualitätssignal zur Nutzerfreundlichkeit einer Webseite zu verstehen. Google will so die Nutzererfahrung (User Experience) in seinem Suchmaschinenergebnis stärker berücksichtigen. Positive Nutzererfahrung auf einer Webseite sollen diese Webseite weiter nach vorne im Ranking spülen.
Die neuen Kennzahlen sollen weiterhin dafür sorgen, dass Webseitenbetreiber und Unternehmen leichter ein Suchergebnis verstehen können. Sie als Unternehmer oder Webseitenbetreiber können mit den Webvitals von Google besser die Performance der eigenen Seite im Kontext der Nutzererfahrung verstehen und verbessern lernen.
Dennoch schließen sich mit den neu eingeführten Kennzahlen eine Reihe von Fragen für die Webseitenbetreiber und Unternehmen an. Das ist vor allem dann der Fall, wenn Sie einen Webshop mit Shopware 5 oder 6 nutzen. Denn die Core Web Vitals werden eine Anpassung der Webseiteninhalte nach sich ziehen und somit Einfluss auf das Ranking in Google.
Warum ist die Nutzererfahrung für eine Webseite so wichtig?
Im Zuge der Einführung der neuen Webvitals von Google ist es in einem ersten Schritt wichtig zu verstehen, was die genaue Motivation hinter den neuen Kennzahlen ist. Bevor Sie sich also mit den Kennzahlen an sich auseinandersetzen müssen, machen Sie sich einmal Gedanken über die Nutzererfahrung auf Ihrer Webseite.
Aus Sicht der Nutzer will der Inhalt einer Webseite auf möglichst einfache Weise genossen werden. Gleichzeitig soll der enthaltene Content möglichst hochwertig sein. Hochwertig kann in diesem Zusammenhang mehrere Dinge bedeuten und hängt vom konkreten Anlass der Suche eines Nutzers ab. Will ein Nutzer beispielsweise ein bestimmtes Produkt im Internet bestellen, sollte er dieses Produkt möglichst einfach finden und bestellen können. Die dafür notwendigen Schritten sind möglichst einfach und kurzzuhalten. Gleichzeitig muss das Produkt klar umschrieben sein und der Nutzer alle notwendigen Informationen für den Bestellvorgang eindeutig identifizieren können.
Wer im Internet etwas sucht, der hat häufig eine sehr geringe Toleranzschwelle. Lädt beispielsweise eine Seite nicht schnell genug, wird diese direkt wieder geschlossen und eine neue aus dem Suchergebnis aufgerufen. Auch Webseiten, bei denen erst einmal Werbebanner weggeklickt oder überscrollt werden müssen, strapazieren die Geduld der Nutzer. Ein uneindeutiges Layout der Seite, schwierig zu findende Buttons oder andere Interaktionsmöglichkeiten - besonders relevant bei Online-Shops - oder sich beim Scrollen verschiebende Grafikelemente schrecken den Nutzer ab.
Die Motivation von Google ist somit, Seiten mit dem Potenzial einer besseren Nutzererfahrung - Seiten, die genau nicht die oben genannten Probleme haben - höher in den Suchergebnissen zu ranken. Aus Sicht von Google werden somit von den Nutzern schneller die Webseiten gefunden, die Ihnen auch ein positives Erlebnis geben, und damit wird auch das angezeigte Google-Suchergebnis als hilfreich und positiv vom Nutzer wahrgenommen. Google hat mit den neuen Kennzahlen somit auch ein besseres Verhandlungsargument für die eigenen Dienstleistungen, die sie verkaufen möchten.
Welche Probleme haben aktuelle Webseiten mit der Nutzererfahrung?
Das Thema Nutzererfahrung auf Webseiten ist sicher nicht neu. Trotzdem haben viele Webseiten Probleme, eine positive Nutzererfahrung sicherzustellen. Daher sollten Sie Ihre Webseite genau unter die Lupe nehmen, wie der Status quo in Sachen Nutzererfahrung aussieht. Nicht immer sind die Probleme auf den ersten Blick ersichtlich.
Hauptursache für schlechte Nutzererfahrung liegt im technischen Umfeld einer Webseite. Das ist vor allem dann ersichtlich, wenn Baukasten-Systeme, Content Management Systeme (CMS) und andere Tools genutzt werden. Für die Erstellung und das Betreiben einer Webseite sind Baukästen und vorgegebene Tools sicherlich deutlich einfacher für den Betreiber. Problem daran ist, dass hier eine Performance-Optimierung oft nur schwer durchführbar ist. So werden viele im Code implementierte, aber nicht genutzte Bestandteile beim Aufrufen der Seite mitgeladen. Das geht zulasten der Ladezeiten und somit der Nutzererfahrung.
Die Nutzung der richtigen Plugins kann Abhilfe schaffen, um beispielsweise die Darstellung einer Webseite zu optimieren oder bestimmte Bestandteile erst später zu laden. Gleichzeitig erhöhen Plugins die Ladezeit durch ihre Implementierung. Die Frage ist auch, ob jeder Baukasten oder jedes CMS die richtigen Plugins anbietet. Zudem stellen Plugins nur eine Übergangslösung dar. Möglicherweise ziehen hier aber die Baukästen- und CMS-Anbieter zukünftig nach und arbeiten besser mit den Webseitenbetreibern für eine Optimierung der Seite zusammen. Das bleibt abzuwarten.
Ein weiteres Problem sind dynamische Inhalte auf einer Webseite. Das können Werbebanner, Opt-In-Boxen oder andere Steuerelemente der Webseite sein. Nicht selten wird dadurch das Layout der Seite verschoben, wenn dynamische Inhalte nicht richtig mit der übrigen Webseite verknüpft sind.
Was sind die Core Web Vitals?
Google will mit den Core Web Vitals Webseitenbetreiber dazu anregen, Ihre Inhalte auch unter technischen Gesichtspunkten zu verbessern und eine positivere Nutzererfahrung zu ermöglichen. Die Webvitals ergänzen Googles bisherige Kennzahlen zum Rating von Webseiten. Insbesondere sind sie als Ergänzung der Page-Experience-Signale zu verstehen. Diese decken bereits einen Teil der Nutzererfahrung auf einer Webseite ab. Zu den Page-Experience-Signalen zählen unter anderem, wie gut eine Webseite auf mobilen Endgeräten dargestellt wird, sicherheitsrelevante Merkmale einer Webseite sowie das Nichtvorhandensein unterbrechender Werbeanzeigen.
Google will mit den Core Web Vitals eine einheitliche qualitative Bewertung der Nutzererfahrung einer Webseite beschreiben. Dafür hat Google neue Kennzahlen entwickelt, die aus dem Ladevorgang einer Webseite, der visuellen Stabilität sowie der Interaktivität eine Bewertung für die Nutzererfahrung berechnen. Es wird somit aus objektiv messbaren Größen eine Bewertung und Einstufung zur Nutzererfahrung ermittelt.
Die Webvitals von Google umfassen:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
Largest Contentful Paint (LCP) misst die Ladezeit der Hauptinhalte einer Webseite. Als Anhaltspunkt hierfür dient die Ladedauer des größten Textblocks oder des größten Bilds/Videos im Sichtbereich des Bildschirms. Idealerweise sollte die Ladezeit höchstens 2,5 Sekunden betragen. Ein LCP über vier Sekunden gilt als schwache Performance.
First Input Delay (FID) misst die Dauer der ersten Benutzerinteraktion mit der Seite. Gemeint ist hier die Zeit, wie lange der Browser braucht, auf den ersten Click des Benutzers zu reagieren und beispielsweise ein Link aufzurufen oder den Befehl hinter einem geklickten Button oder Steuerelement auszuführen. Die Dauer sollte höchstens 100 Millisekunden betragen. Ein Wert über 300 Millisekunden deutet auf schlechte Performance.
Cumulative Layout Shift (CLS) misst die Stabilität des Layouts einer Webseite. Betrachtet wird hier zum Beispiel, wie einzelne Layout-Elemente sich bei der Nutzung der Seite verschieben beziehungsweise springen (beispielsweise beim Einblenden interaktiver Steuerelemente der Seite oder einfach beim Scrollen). Gemessen wird die Verschiebung in vertikaler und horizontaler Richtung in Pixeln. Hier liegt der Idealwert bei höchstens 0,1. Ein Wert über 0,25 deutet ein inakzeptables Maß an Instabilität an.
Erweiterung der Webvitals durch Google geplant
Die drei genannten Kennzahlen bilden die ersten neuen Core Web Vitals für das neu angepasste Google Ranking. Google plant, die drei bisherigen Kennzahlen jährlich zu bewerten, gegebenenfalls anzupassen und um weitere Größen zu ergänzen. In Zukunft werden somit weitere Webvitals hinzukommen, die für ein hohes Ranking in den Suchergebnissen wichtig sind. Wie genau diese aussehen werden, ist noch nicht bekannt.
Um eine Einschätzung der Performance Ihrer Webseite treffen zu können, sind somit bestimmte Kennzahlen zu berücksichtigen. Eine Auswahl dieser ergänzenden Kennzahlen sind:
- First Contentful Paint (FCP): Die Zeitdauer für das Laden des ersten Elements oder Textblocks einer Seite.
- Total Blocking Time (TBT): Dauer aller Vorgänge einer Seite, die die Interaktion des Nutzers mit einer Webseite verhindern.
- Time to Interactive (TTI): Die Dauer, bis die Webseite vollständig interaktiv nutzbar ist.
- Speed Index (SI): Ladezeit einer Webseite, bezogen auf die visuelle Darstellung.
- Unused CSS Rules und Unused Javascript geben die Zeitersparnis durch Eliminierung ungenutzter CSS beziehungsweise Javascipt Code-Elemente an.
- Optimized Images, Responsive Images sowie Next-gen Images zeigen ebenfalls Einsparpotenziale der Webseite durch eine optimierte Bildnutzung und -darstellung an.
- Total Byte Weight gibt die Dateigröße aller zum Laden der Webseite erforderlichen Bestandteile an. Number of tasks over 50 ms stellt dabei die Anzahl der Ladevorgänge dar, die beim Laden der Seite mehr als 50 Millisekunden benötigen.
- Render Blocking Resources (RBR): Zeitersparnis durch die Beseitigung unnötiger Ressourcen, die das Laden einer Webseite verzögern.
Wichtig ist, dass viele der genannten Kennzahlen zusammenhängen. Gibt es somit ein Performanceproblem, deuten nicht selten mehrere Kennzahlen auf ein solches Problem. Eine Optimierung verbessert entsprechend in aller Regel auch mehrere der genannten Kennzahlen.
Kann ich die Core Web Vitals selber messen?
Sie können die Webvitals Ihrer Seite ausgeben lassen. Tatsächlich stehen Ihnen dafür mehrere Möglichkeiten bereit. Google hat die Core Web Vitals in den eigenen Analyse-Tools bereits eingebunden. So finden Sie die Kennzahlen zu Ihrer Webseite beispielsweise bei Google Lighthouse oder PageSpeed Insights. Beide Tools geben auch umfassende weitere Kennzahlen und Angaben zur Performance Ihrer Webpräsenz.
Beide Tools geben die Webvitals von Google als Felddaten an. Hierfür werden somit anonymisierte Nutzerdaten ausgewertet unter Berücksichtigung der Verbindungsgeschwindigkeit und der verwendeten Endgeräte der Nutzer. Weiterhin stellen beide Tools auch simulierte Web-Daten zur Verfügung. Zudem findet eine Auswertung getrennt nach Desktop und mobilen Endgeräten statt.
Mit einer genauen URL- und Domain-Auflistung finden Sie die Daten zu den Core Web Vitals auch in der Google Search Console. Die Auswertung wird jeweils mit einem Farbschema (grün, gelb, rot) dargestellt. So gewinnen Sie mit einem Blick eine Übersicht über die Performance Ihrer einzelnen Webseiten. Die ausgewerteten Daten in der Search Console beziehen sich auf anonymisierte Nutzerdaten mit dem Google Browser Chrome.
Wie kann ich den Largest Contentful Paint (LCP) verbessern?
Wenn Sie zu den Schluss gekommen sind, dass die Performance Ihrer Webseite verbesserungsbedürftig ist, können Sie einige Schritte zur Optimierung einleiten. Bei der Largest Contentful Paint (LCP) ist das größte Element einer Seite relevant. Dieses sollten Sie zunächst einmal identifizieren. Bei vielen Seiten ist das größte Seitenelement und damit das größte Objekt zum Laden ein Bild oder ein Video-Asset.
Ein Tool wie Responsive Design erlaubt Ihnen eine Optimierung solcher Elemente. Handelt es sich um eine oder mehrere Bilddateien, kann der Wechsel auf ein sogenanntes Next-Gen-Bildformat Abhilfe schaffen. Ein Next-Gen-Bildformat ist ein Format, das bei gleicher Qualität besser komprimiert und somit von der Dateigröße her kleiner ist. Damit laden solche Bilder schneller. Beispiele für Next-Gen-Bildformate sind WebP, JPEG 2000 oder JPEG XR. Insbesondere WebP ist für Webseitendarstellungen gedacht.
Insbesondere, wenn Sie ein Baukastensystem, ein CMS oder andere Tools nutzen, die entsprechenden Webseitenvorlagen (Templates) zur Verfügung stellen, sollten Sie hier möglichst entschlacken. Ein einfacheres Template mit wenigen Plugins steigert die Performance Ihrer Seite. Hier ist natürlich genau abzuwägen, was Sie auf Ihrer Seite benötigen und darstellen wollen und wie dieses letztlich mit möglichst wenig Code realisiert werden kann.
Versuchen Sie generell, den zu ladenden Code so klein wie möglich zu halten. Dazu zählt auch, dass Sie Dinge wie JavaScript und CSS möglichst sparsam für Ihre Webseite nutzen. Gerade CSS und JavaScript treiben die Ladezeiten einer Webseite spürbar nach oben. Weiterhin hilft es, die Programmierung und alle genutzten Tools aktuell zu halten. Meist bieten aktuellere Versionen mehr Funktionalität - nicht verwendete Elemente können einfacher ausgeschaltet werden - und eine schlankere Codierung.
Zusammengefasst lassen sich die Problemlösungen wie folgt kategorisieren:
- Langsame Serverantwortzeiten: Verzichten Sie auf ein komplettes HTML-Gerüst und nutzen Sie lieber ein Framework wie React, das ein dynamisches Senden an den Server erlaubt. Daten von Drittanbietern sollten früh verarbeitet werden. Frameworks wie React erlauben zudem, dass JavaScript-Bestandteile direkt im Browser gerendert, also verarbeitet und dargestellt werden.
- Langsame Seitendarstellung durch CSS und JavaScript: Nur kritische, das heißt, für die Darstellung zwingend notwendige Elemente sollten integriert geladen werden. Nicht-kritische CSS- und JavaScript-Bestandteile sollten eliminiert werden.
- Bilder, Videos und Contentblöcke laden langsam: Nutzen Sie neue Bild- und Videoformate mit hoher Komprimierung. Wichtige Ressourcen sollten vorgeladen werden. Adapting Serving kann genutzt werden, um abhängig von der Verbindungsgeschwindigkeit der Nutzer beispielsweise nur ein kleineres Vorschaubild zu laden.
Wie kann ich den First Input Delay (FID) verbessern?
Auch bei der Optimierung des First Input Delay (FID) steht die Codierung der Webseite im Fokus. CSS und JacaScript sind auch hier Elemente, die Ladezeiten nach oben treiben. Vor allem die CSS Stylesheets sollten so gering wie möglich gehalten werden. Plugins und Drittanbieter-Code, beispielsweise durch die Nutzung von bestimmten Tools wie Webshop-Module, sollten ebenfalls zahlenmäßig möglichst klein bleiben.
Auch in der internen Abstimmung der Webseiten und des Servers lassen sich Verbesserungen treffen, die die Reaktionszeiten reduzieren. Grundsätzlich sollte die Zahl der Serveranfragen bei einer typischen Interaktion des Nutzers mit der Webpräsenz eines Seitenbetreibers oder Unternehmens möglichst klein und die Übertragungsgrößen möglichst gering bleiben.
Zusammengefasst lassen sich die Problemlösungen wie folgt kategorisieren:
- Lange Prozesse aufspalten: Sogenannten Long Tasks sind Code-Bestandteile, die mehr als 50 Millisekunden zum Laden benötigen. In dieser Zeit ist eine Interaktion unmöglich. Wer seinen Code um solche Bestandteile bereinigt, erzeugt schnellere Interaktivität.
- Interaktive Elemente priorisieren: Solche Elemente der Webseite, die zur Interaktion gedacht sind, sollten zuerst geladen werden.
- Nutzung separater Threads: Tools wie Web Worker erlauben, aufwendigere Bestandteile wie komplexere JavaScripte in einem eigenen Thread auszulagern und nicht mit dem Main Thread mitzuladen. So werden die Hauptelemente einer Webseite schneller geladen.
- Die bereits oben ausgeführten Tipps zur Geschwindigkeitssteigerung für den Largest Contentful Paint (LCP) greifen auch für die Optimierung des FID.
Wie kann ich den Cumulative Layout Shift (CLS) verbessern?
Bei der Optimierung des Cululative Layout Shift (CLS) steht das Layout Ihrer Webseite im Zentrum der Betrachtung. Sie müssen zunächst ermitteln, welche Elemente auf Ihrer Webseite überhaupt potenziell verschoben werden können. Passen Sie das Layout der Seite so an, dass genügend Platz für diese Elemente verbleibt.
Dabei ist wichtig, dass Sie für Bilder und Videos Größenattribute auf der Webseite vergeben. Alternativ reservieren Sie den benötigten Platz dieser Elemente. Arbeiten Sie zum Beispiel mit CSS Aspect Ratio Boxes.
Vermeiden Sie es zudem, Inhalte über bestehende Inhalte einzufügen. Das ist nur dann sinnvoll, wenn ein Element auf eine Nutzerinteraktion reagieren soll (zum Beispiel verändert sich ein Button nach dem Klicken). So bleibt es bei gewollten beziehungsweise erwartbaren Layout-Verschiebungen.
Zusammengefasst lassen sich die Problemlösungen wie folgt kategorisieren:
- Bild- und Videoelemente mit einer Breiten- und Höhenangabe versehen oder mit einer Aspect Ratio definieren.
- Werbeeinblendungen mit einer Breiten- und Höhenangabe versehen. Google Ads beispielsweise sind mit einer dynamischen Größenangabe versehen. Um das Layout der eigenen Seite stabil zu halten, sollte für Werbeanzeigen ein fester Platz definiert und für die Werbung zugewiesen werden. Das Gleiche gilt auch für andere dynamische Einblendungen wie Newsletter-Boxen, Hinweisbanner und so weiter.
- Web-Schriftarten sollten nicht aus dem Web eingebunden werden, sondern die entsprechenden Fonts sollten vorgeladen oder auf dem eigenen Server gespeichert liegen.
Die weiteren Kennzahlen werden mit optimiert
Die genannten Optimierungshinweise verbessern auch die weiteren Performance-Kennzahlen, wie sie von Google für das Suchmaschinen-Ranking herangezogen werden. Vor allem schnellere Ladezeiten sind eine wichtige Performance-Verbesserung über nahezu alle Kennzahlen hinweg. Neben den bereits genannten Hinweisen hilft es allgemein, die jeweiligen Seitengröße Ihrer Webpräsenz klein zuhalten. Hier kann es manchmal sinnvoll sein, zugunsten einer verbesserten Ladezeit Seiteninhalte auf mehrere Webseiten zu verteilen.
Core Web Vitals und Shopware 5 und 6
Die neuen Kennzahlen zum Google Ranking sowie die Optimierung der eigenen Webseiten haben unmittelbare Konsequenzen für SEO. Insbesondere Webshop-Betreiber sollten sich ausführlich mit den neuen Webvitals von Google befassen. Der Online-Shop selbst sowie die zu ladenden Elemente sind oft relativ groß im Vergleich zur sonstigen Webpräsenz. Eine Optimierung bringt hier somit einen starken Vorteil.
Professionelle Unterstützung durch Loy
Die notwendigen Anpassungen an den Webshops mit Shopware 5 und 6 erfordern doch eine genaue Beschäftigung mit den neuen Core Web Vitals und dem Seitencode. Wenn Sie professionelle Unterstützung für diese Anpassungen benötigen, können Sie vertrauensvoll auf unsere Erfahrung bauen. Die Loy Digitalagentur optimiert für Sie Ihr Webshop-System und steht mit Rat und Tat an Ihrer Seite.
So haben Sie weiterhin die Möglichkeit, auf mehrere Vertriebskanäle zu setzen und Ihr Webshop wird in den Google Suchergebnissen hoch gerankt. Nutzen Sie die neuen Anpassungen im Google Algorithmus, um sich von der Konkurrenz abzuheben.
Fazit
Die Core Web Vitals von Google sind drei neue Kennzahlen, die wesentlich das Ranking in den Ergebnissen der Suchmaschine beeinflussen. Sie stellen objektive Maßgrößen für die Benutzererfahrung einer Webseite dar. Viele Webseiten haben aktuell Schwierigkeiten, gute Werte in den neuen Webvitals von Google zu erreichen. Doch wenn Sie einige Tipps zur Verschlankung des zu ladenden Seitencodes, der Reihenfolge der zu ladenden Elemente sowie zur Optimierung des Layouts für Ihre Webseite und vor allem für Ihren Webshop beherzigen, können Sie weiterhin ein hohes Ranking in den Google-Suchergebnissen erreichen und sich so einen Vorteil gegenüber Mitbewerbern verschaffen.
Gerne unterstützen wir Sie dabei. Nutzen Sie ein CMS wie Shopware 5 oder 6, machen wir Ihren Webshop fit für den neuen erweiterten Google Suchalgoritmus. Nehmen Sie unverbindlich Kontakt zu uns auf.
