Maßstab für Weberfolg
Benutzerfreundlichkeit ist das A&O für eine erfolgreiche Website. Mit den Metriken von Google kannst Du diese praktisch überprüfen und Maßnahmen zur Optimierung identifizieren.
Core Web Vitals messen den Erfolg Deiner Website
Web Vitals ist eine Initiative von Google. Sie liefert eine einheitliche Anleitung für Qualitätssignale, welche für ein gutes Nutzererlebnis im Web unerlässlich sind. Website-Betreiber müssen keine Performance-Gurus sein, um zu verstehen, welche Qualität sie ihren Benutzern bieten können. Dank dieser Initiative wird die Optimierung der qualitativen Usability Deiner Website zum Kinderspiel. Sie ist der Schlüssel zum langfristigen Erfolg Deiner Website im Internet. Die von Google definierten Kennzahlen können nicht nur zur Verbesserung der Nutzererfahrung beitragen, sie ermöglichen es auch, Maßnahmen zur Verbesserung zu identifizieren. Die Experten von KUNDENWACHSTUM.de beraten Dich dazu gern umfassend und optimieren Deine Vitals.
Google liebt Dich nur, wenn alle anderen Dich zuerst lieben.
Wendy Piersall
Largest Contentful Paint (LCP)
Die Ladegeschwindigkeit einer Website ist einer der wichtigsten Ranking-Faktoren und hat auch einen großen Einfluss auf die User Experience. Wenn es Minuten dauert, bis der Hauptinhalt geladen ist, ist das eine schlechte Erfahrung für den Benutzer. Der LCP ist ein Maß dafür, wie lange eine Website braucht, um das größte Element zu laden, bis es im Viewpoint sichtbar wird.
Folgende Bestandteile könnten als größtes Element in Frage kommen:
- Bildelemente
- Bildelemente innerhalb von Scalable Vector Graphics oder SVG-Elementen
- Videoelemente
- Hintergrundbilder, die mit URL geladen werden
- Blockelemente mit Text
Früher war es für Webmaster eine Herausforderung, die Zeit zu messen, die es dauert, bis der Hauptinhalt für einen Nutzer sichtbar ist. Also hat Google es sich einfach gemacht und herausgefunden, dass man es am besten anhand des größten Elements auf der Webseite messen kann – mit entsprechenden Vitals. Mit Deinem persönlichen SEO-Experten von KUNDENWACHSTUM.de kannst Du besprechen, wie Du Deine Website so optimieren kannst, dass diese Kennzahlen stimmen.
Ladezeiten verbessern
Schluss mit negativem LCP!
Hast Du bemerkt, dass es ziemlich lange dauert, bis die größte Datei auf Deiner Seite geladen ist und befürchtest Du nun, dass Deine Bounce Rate dadurch massiv ansteigen wird? Dann wirf gemeinsam mit Deinem SEO-Experten von KUNDENWACHSTUM.de einen Blick auf die Kennzahlen zu Deiner Seite, um sie entsprechend zu optimieren. Ursachen für negative Werte könnten folgende sein:
Wenn Du immer wieder neue Plugins auf Deiner Website hinzufügst oder ein aufwendig gestaltetes Theme wählst, solltest Du dies vielleicht noch einmal überdenken. Das Hinzufügen von JavaScript und CSS, insbesondere im oberen Bereich, wirkt sich stark auf die Ladezeiten aus. Jedes Mal, wenn ein Browser auf synchrone Skripte und externe Stylesheets stößt, verzögert er das Rendering einer Webseite und die Ladezeit erhöht sich.
Ein langsamer Server wirkt sich negativ auf alle Metriken der Ladegeschwindigkeit Deiner Website aus. Selbst wenn andere Ressourcen optimiert sind, wird all das nur vergeudet, solange Du einen schlecht performenden Server nutzt.
Bilder, Videos und Textblöcke, die above-the-fold, also im oberen, direkt sichtbaren Bereich der URL, gerendert werden, haben einen direkten Einfluss auf den LCP. Große Bausteine wie z. B. Hero-Banner müssen optimiert werden, um die Ladezeiten zu reduzieren.
Es ist bei vielen Webmastern beliebt, JavaScript zu nutzen, um Webseiten direkt im Browser zu rendern. Das hat jedoch starke Auswirkungen auf den LCP, da der Browser erst alle kritischen Scripte laden müsste, bevor er das Rendering abschließen kann. Die Folge ist eine extreme Verzögerung der Ladegeschwindigkeit.
Wartezeit vermeiden
Cumulative Layout Shift (CLS)
Dieser Parameter beschreibt die plötzliche Bewegung des Inhaltslayouts einer Website. Eine Layout-Verschiebung tritt auf, wenn ein Element im Ansichtsfenster während des Ladens der Seite von seiner Ausgangsposition verschoben wird. Sie werden als instabile Elemente bezeichnet.
Wenn beispielsweise beim Versuch, einen Blogbeitrag zu lesen, plötzlich eine Anzeige zwischen den Absätzen auftaucht, ist das eine Verschiebung, die dazu führt, dass sich die Textblöcke nach unten bewegen. Dies sind unangenehme Bewegungen für den Benutzer, weil es alles unterbricht, was er gerade tut. Um ein gutes Erlebnis für Nutzer zu bieten, sollten die Seiten einen CLS-Wert von 0,1 oder weniger aufweisen, damit diese Verschiebung nur von kurzer Dauer ist.
Schlechter CLS bringt nur Stress
Es lädt und lädt, aber die Website will sich einfach nicht aufbauen? Vielleicht ist nur eine einzige Datei dafür verantwortlich! Gründe, warum Deine Website zu lange braucht, um Elemente für den Nutzer sichtbar zu machen, könnten folgende sein:
Wenn der Browser auf Bilder Deiner Website zugreifen möchte, kann er deren Maße erst beim Download einlesen. Schneller vonstatten ginge es, wenn Du die Bildgröße in den Img-Tags angibst, denn diese kann Google schneller auslesen.
Ähnlich wie Bilder und Videos tragen auch dynamische Anzeigen viel zu optischen Verschiebungen auf einer Website bei. Webmaster neigen dazu, dynamische Anzeigen zu bevorzugen, weil sie einfach zu installieren sind und automatisch auf der Website laufen. Allerdings haben sie wenig bis keine Kontrolle und die Größe der Anzeigen kann ständig variieren.
Das Gleiche gilt für Einbettungen. Wenn Du versuchst, Videos, Feeds und Karten auf Seiten einzubetten, können die Browser nicht erkennen, was genau in der Einbettung enthalten ist. Und wenn kein Platz für sie vorgesehen ist, müssten andere Elemente weichen, damit der Browser Platz für das eingebettete Element machen kann. Dieser Konflikt äußert sich dann in einem schlechten CLS-Wert. Wie Du diesen umgehen oder optimieren kannst, bespricht Dein persönlicher Ansprechpartner von KUNDENWACHSTUM.de gern mit Dir.
Dynamische Inhalte sind auf den meisten Websites zu finden. Sie können in Form von CTA-Buttons, Bannern, Formularen, verwandten Artikeln und anderen, in den Content eingefügten Elementen, auftreten. Sie haben das gleiche Problem wie die anderen genannten: Wenn kein Platz für sie vorgesehen ist, könnten sie andere Elemente verschieben, sobald sie geladen sind.
Es gibt sogenannte websichere Schriftarten. Dies sind die Standard-Schriftarten, die von jedem Browser gelesen werden können. Wenn Du jedoch benutzerdefinierte Schriftarten verwendest, muss der Browser einen Platzhalter in Form einer Fallback-Schriftart oder FOUT (Flash of unstylted Text) verwenden, während er die von Dir verwendete Schriftart herunterlädt. Der Browser kann auch unsichtbaren Text oder FOIT (Flash of invisible Text) verwenden, bei dem der Browser nichts anzeigt, bis die Schrift vollständig geladen ist. Beides wirkt sich auf Bausteine Deiner Seite aus, da die Schriftgrößen variieren können.
Wenn Du Deine Website hinsichtlich der Core Web Vitals optimieren möchtest, kannst Du Dich dabei von Deinem persönlichen SEO-Experten beraten lassen oder die Anpassungen komplett an das Team von KUNDENWACHSTUM.de übergeben.
Detaillierte Auswertung und direkte Optimierungs-
vorschläge, komplett kostenlos und unverbindlich.
Detaillierte Auswertung und direkte Optimierungsvorschläge, komplett kostenlos und unverbindlich.
First Input Delay (FID)
Wer kennt es nicht: Man klickt auf eine Schaltfläche oder einen Link und es funktioniert einfach nichts? Diese Erfahrung kann sehr negativ für einen Nutzer sein und dazu führen, dass er Deine Website künftig meiden wird. Um das zu verhindern, liefert Google den First Input Delay. Er misst die Zeit, die eine Seite benötigt, um auf die erste Interaktion eines Benutzers zu reagieren. Es ist ein Maßstab, der sich auf die Interaktivität einer Webseite konzentriert, was bedeutet, wenn ein Benutzer nicht mit der Seite interagiert hat, wird der Wert nicht gemessen.
Wenn eine Webseite geöffnet wird, stellt der Browser ein paar Netzwerkanfragen an die Website, um notwendige Dateien zu laden und diese dann im Hauptthread zu verarbeiten. Während der Hauptthread noch CSS- und JS-Dateien verarbeitet, können nur einige Teile der Webseite für den User sichtbar sein. Dabei kommt es zu einer Verzögerung, weil der Hauptthread die Ausführung aller JavaScript-Dateien beenden muss, bevor er auf die Anfrage des Benutzers reagieren kann. Die gesamte Dauer, die der Benutzer warten muss, nennt sich First Input Delay.
Nutzerzufriedenheit erhöhen
Schlechter FID? Ran an die Optimierung!
Deine Website will einfach nicht so richtig funktionieren? Du hast vielleicht schon einen Check durchgeführt und festegestellt, dass Deine Website sehr lange braucht, um auf die Interaktionen des Users zu reagieren? Wenn Du folgende Punkte optimierst, kannst Du Deinen Delay deutlich verbessern:
Alle JavaScripts auf einer Webseite sind Render-Blocker, d. h. jedes Mal, wenn ein Browser auf ein Script stößt, muss er seine Arbeit unterbrechen und versuchen, dieses zuerst zu laden. Das bedeutet, je mehr Skripte Du verwendest, desto länger wird die Ausführungszeit sein. Entferne überflüssige Scripte und nutze gegebenenfalls Lazy Loading, sodass unkritische Scripts nur bei Bedarf geladen werden.
Da Verzögerungen durch einen beschäftigten Hauptthread verursacht werden, ist es eine gute Lösung, einige der Skripte in einen anderen Thread auszulagern. Dazu benötigst Du einen Web-Worker. Er führt JS-Codes in einem anderen Thread aus, damit sie die Benutzeroberfläche nicht blockieren. Dein SEO-Experte von KUNDENWACHSTUM.de unterstützt Dich auch dabei.
Alle Skripte, die den Hauptthread für 50 Millisekunden oder länger beschäftigen, werden als Long Tasks bezeichnet. Wenn Du lange Tasks auf Deiner Seite identifizieren möchtest, kannst Du dafür verschiedene Programme wie z.B. die Chrome DevTools verwenden. Dazu berät Dich Dein persönlicher SEO-Experte aber auch gern umfassend und unterstützt Dich bei der Optimierung oder übernimmt sie komplett für Dich.
Ziele im Blick behalten
Tools zur Erfolgsmessung
Google ist der Meinung, dass die Core Web Vitals für alle Web-Erlebnisse entscheidend sind. Daher ist der Suchmaschinengigant bestrebt, diese Metriken in all seinen beliebten Programmen zu veröffentlichen. In den folgenden Abschnitten wird beschrieben, welche Programme die Core Web Vitals unterstützen:
Ein sehr beliebtes Tool zur Messung des PageSpeed ist Googles PageSpeed Insights. Es zeigt nicht nur den Score Deiner Seite an, sondern auch die Web Vitals. Sie helfen den Nutzern zu verstehen, wie gut die eigene Website performt. Es ist ein hilfreiches Programm, wenn Du den Erfolg Deiner Optimierungen messen möchtest. Für die Optimierung an sich fehlen in diesem Programm einige wichtige Details. Zum Beispiel, welche Seiten für welche Kennzahlen verbessert werden müssen. Dafür eignet sich die Search Console besser.
Die Werte Deiner Website kannst Du simpel über die Google Search Console Deiner Website einsehen. Wenn Du auf die Schaltfläche Core Web Vitals in der Seitenleiste klickst, kannst Du den Bericht einsehen. Klicke einfach auf den Typ, den Du überprüfen möchtest, und die Search Console zeigt Dir die Seiten an, die eine schlechte Performance haben, verbessert werden müssen oder die bereits eine sehr gute Performance haben. Wenn Du jene Seiten mit Optimierungsbedarf identifiziert hast, kannst Du PageSpeed Insights verwenden, um Vorschläge für diese spezifischen Seiten zu prüfen. Deine Pagespeed-Experten von KUNDENWACHSTUM.de helfen Dir gern dabei.
Web.dev hat ein kostenloses Mess-Tool, das Lighthouse verwendet, um ein Audit auf Deiner Seite durchzuführen. Damit kannst Du Tipps für erforderliche Verbesserungen Deiner Performance erhalten. Es kategorisiert die Aufgaben, indem es abwägt, wie wichtig sie für die Gesamtverbesserung Deiner Website sind. Damit Deine Optimierung erfolgreich ist und Du qualifizierte Verbesserungen wahrnehmen kannst, stehen Dir Deine SEO-Experten von KUNDENWACHSTUM.de zur Verfügung.
Der Chrome User Experience Report sammelt anonymisierte, reale Benutzer-Messdaten für jede Kennzahl. Anhand dieser Daten können Website-Besitzer ihre Leistung schnell bewerten, ohne ihre Seiten manuell mit Analysefunktionen ausstatten zu müssen. Außerdem unterstützen sie Programme wie PageSpeed Insights oder Search Console. Die vom Chrome User Experience Report bereitgestellten Daten bieten Dir eine schnelle Möglichkeit, die Leistung von Websites zu bewerten.
Usability
im Vitals-Check
im Vitals-Check
Google legt besonderen Wert darauf, das Browsen für Nutzer besonders attraktiv zu machen. Mit der Search Console kannst Du Deine Website zwar überwachen, mit den Vitals kannst Du aber auch ihren Erfolg messen!
Andere Web Vitals
Problemdiagnose
Während die Core Web Vitals die entscheidenden Werte für das Verständnis und die Bereitstellung einer großartigen Benutzererfahrung sind, gibt es auch andere wichtige Maßstäbe. Sie dienen oft als Proxy- oder Ergänzungsmetriken, um einen größeren Teil der User Experience zu erfassen oder um bei der Diagnose eines bestimmten Problems zu helfen.
Ladevorgang messen
Time to First Byte (TTFB) und First Contentful Paint (FCP) sind beide beispielhafte wichtige Aspekte des Ladevorgangs und nützlich bei der Diagnose von Problemen mit LCP. Ersteres misst den Zeitraum, der mit dem Aufruf der Website beginnt und mit dem ersten vom Webserver empfangenen Byte endet. Letzteres misst den Zeitpunkt, an dem der Browser ein Seitenelement zum ersten Mal auf dem Bildschirm darstellen kann. Dies ist für den Benutzer wichtig, da er die positive Rückmeldung erhält, dass die Website tatsächlich geladen wird.
Interaktivitätsprobleme erkennen
Total Blocking Time (TBT) und Time to Interactive (TTI) sind hilfreich, um potentielle Interaktivitätsprobleme zu erkennen und zu Fehler zu diagnostizieren, die sich auf die FID auswirken. Sie sind jedoch nicht Teil der Core Web Vitals, da sie weder im Feld messbar sind noch ein nutzerzentriertes Ergebnis widerspiegeln.
Die Core Web Vitals sind wandelbar
Web Vitals und Core Web Vitals stellen die besten verfügbaren Signale dar, die Entwicklern heute zur Verfügung stehen, um die Qualität der Erfahrung im Web zu messen. Aber diese Signale sind nicht perfekt und zukünftige Verbesserungen oder Ergänzungen sollten erwartet werden. Die Core Web Vitals gelten für alle Websites und werden in allen relevanten Programmen angezeigt. Die Definitionen und Schwellenwerte der Core Web Vitals sind zwar stabil, allerdings werden jährliche Aktualisierungen erfolgen. Die anderen Vitals für das Web sind oft kontext- oder tool-spezifisch und können experimenteller sein als die Core Web Vitals. Daher können sich ihre Definitionen und Schwellenwerte mit größerer Häufigkeit in kürzeren Abständen ändern.
Ein gelungener Webauftritt sorgt für Neukunden, unterstützt die Stammkundenbindung und optimiert den Support im täglichen Kundenservice.
Du hast Fragen?
Wir haben passende Antworten!
Wir haben passende Antworten!
Stelle sicher, dass Du jedes Mal, wenn Du ein Bild- oder Videoelement hinzufügst, dessen Breite und Höhe angibst. Es werden keine Layout-Verschiebungen mehr auftreten, da der Browser das Seitenverhältnis eines Bildes anhand der Breite und Höhe berechnet, bevor es geladen wird.
Alternativ kannst Du auch Platz für die Bildelemente reservieren, bis sie geladen sind. Das gelingt mit der CSS-Eigenschaft aspect-ratio. Dank dessen weiß der Browser, wie viel Platz er für Bilder, Anzeigen und Einbettungen benötigt, während die Seite geladen wird. Bei dynamischen Anzeigen solltest Du zusätzlich darauf achten, dass Du sie nicht oberhalb bestehender Inhalte implementierst. Vor allem der above the fold Bereich sollte davon frei bleiben, damit genügend Platz vorhanden ist.
Damit keine Probleme beim Laden von Schriften entstehen, ist Font-Display empfehlenswert. Damit lädt der Browser vorübergehend eine websichere Schrift anstelle der benutzerdefinierten Schrift, während diese noch geladen wird, und vermeidet FOIT.
1. Server optimieren
Wenn Dein Server die Ursache für schlechte Werte ist, solltest Du diesen unbedingt optimieren. Das erste, was Du bei der Optimierung in Betracht ziehen solltest, ist das Webhosting. Hier gibt es zwei Möglichkeiten: Entweder Du entscheidest Dich für ein höheres Hosting-Angebot bei Deinem aktuellen Anbieter oder Du wechselst zu einem anderen Anbieter. Caching und die Verwendung eines Content Delivery Network (CDN) können die Leistung Deines Servers ebenfalls erheblich verbessern. Beides reduziert die Zeit, die ein Browser benötigt, um den Inhalt einer Webseite zu laden.
2. Bilder anpassen
Nicht optimierte Bilder sind eine der häufigsten Ursachen für schlechte LCP. Alle Bilder, die sich oben auf der Seite befinden, sind das erste, was User sehen. Stelle unbedingt sicher, dass diese Bilder hinsichtlich Größe, Dateiformat und Benennung optimiert sind. Es gibt diverse Programme, um Bilder zu komprimieren. Auch Plug-Ins können dafür nützlich sein. Das Verringern der Dateigröße von Bildern reduziert die Last. Außerdem solltest Du moderne Bildformate verwenden. Dein SEO-Experte von KUNDENWACHSTUM.de hilft Dir dabei.
3. Above the fold Bereich aufräumen
Denke bei der Optimierung daran, dass es das Ziel ist, dem Nutzer den oberen Bereich Deiner Website so weit wie möglich zu servieren. Dieser Bereich ist das erste, was der Benutzer auf Deiner Website sieht, sobald sie geladen wird. Anstatt Skripte und Stylesheets in den oberen Bereich zu laden, solltest Du sie nach unten verschieben, damit sich der Browser beim Laden auf das Wesentliche konzentrieren kann, nämlich den Hauptinhalt der Webseite.
4. CSS und kritisches JavaScript minimieren
Minify ist ein Begriff, der verwendet wird, um unnötige Zeilen und Zeichen aus CSS und JS zu entfernen. Die Art und Weise, wie ein Browser eine Webseite lädt, ist vergleichbar mit einer Person, die ein Buch liest. Wenn Du ein Buch liest, liest Du jedes Wort in jedem Satz. Das Gleiche gilt für Browser. Überprüfe Deine Stylesheets und Skripte immer auf ungenutzte und unnötige Zeilen und Zeichen, das kann helfen, die Ladezeiten der Website nach und nach zu verkürzen.
Diese Kennzahlen sind hauptsächlich Messwerte dafür, wie nutzerfreundlich Deine Website ist. Wenn Du diese nun optimierst, steigerst Du also die Usability Deines Onlineauftritts wodurch User gern auf Deine Seite zurückkehren. Das wiederum signalisiert Google, dass Deine Internetpräsenz sehr beliebt ist. Die Folge: besseres Ranking.
Sie sind Reihe spezifischer Faktoren, die Google als wichtig für die allgemeine Nutzererfahrung einer Webseite erachtet. Die Core Web Vitals setzen sich aus drei spezifischen Messungen der Seitengeschwindigkeit und der Nutzerinteraktion zusammen: Ladeleistung, Interaktivität und visuelle Stabilität.
Du kannst Deine Website mit PageSpeed Insights oder Chrome Lighthouse überprüfen. Auf der Seite mit den Problemdetails im Search Console kannst Du außerdem den Core Web Vitals-Bericht auf Nachverfolgung starten. Dein persönlicher Pagespeed-Berater von KUNDENWACHSTUM.de steht Dir auch zur Verfügung und unterstützt Dich gern dabei, Deine Website zu optimieren.
Die Core Web Vitals (CWVs) sind die Untergruppe der Web Vitals, die universell für alle Webseiten gelten und von allen Website-Betreibern gemessen. Jeder der CWVs repräsentiert eine bestimmte Facette des Nutzererlebnisses, ist in der Praxis messbar und spiegelt die realen Erfahrungen mit einem wichtigen nutzerzentrierten Ergebnis wider. Die Metriken, aus denen die Core Web Vitals bestehen, werden sich im Laufe der Zeit weiterentwickeln. Im Mai 2021 konzentrieren sie sich auf drei Aspekte der User Experience – Ladezeit, Interaktivität und visuelle Stabilität.
