Wann ist eine Website nutzerfreundlich – und welche Auswirkungen hat das auf ihre Besucher? Ihre Internetpräsenz kann der entscheidende Faktor bei der Akquisition eines neuen Kunden sein oder der Grund, aus dem er lieber bei den Wettbewerbern unterschreibt. Aber nicht nur das: Die Nutzerfreundlichkeit Ihrer Website ist mit ausschlaggebend für Ihre Google-Rankings. Wir verschaffen Ihnen einen Überblick.
Inhaltsverzeichnis:
- Was sind die Core Web Vitals?
Testen Sie Ihre Website auf die Core Web Vitals - Largest Contentful Paint – LCP
Largest Contentful Paint optimieren - First Input Delay – FID
First Input Delay optimieren - Cumulative Layout Shift – CLS
Cumulative Layout Shift optimieren - Fazit: Die Bedeutung der Core Web Vitals
Was sind die Core Web Vitals?
Google aktualisiert den Suchmaschinenalgorithmus regelmäßig. Kürzlich ist ein besonders großes Update erschienen: die Einführung der Core Web Vitals. Die messen anhand unterschiedlicher Faktoren die Nutzerfreundlichkeit einer Website in der Desktop- und in der Mobile-Version. Wer auf Googles Seite 1 möchte, muss diese Werte nicht nur kennen, sondern sie vor allem bei der eigenen Internetpräsenz berücksichtigen – und das Optimum aus ihnen herausholen. Aber welche Faktoren sind das genau, die künftig über Ihre Google-Rankings bestimmen?
Die Core Web Vitals im Überblick:
- Largest Contentful Paint – LCP
- First Input Delay – FID
- Cumulative Layout Shift – CLS
Sie alle haben englischsprachige Bezeichnungen, die in der Welt der Suchmaschinenoptimierung aber eher mit ihren Abkürzungen verwendet werden. Wenn wir uns anschauen, wofür sie stehen, wird uns sofort klar, warum Google ihre Bedeutung steigert. Denn: Damit Nutzer möglichst häufig googlen – und somit die Werbeeinnahmen der Suchmaschine steigen – muss ihre Erfahrung mit den Suchergebnissen eine möglichst positive sein. Werden sie zu häufig enttäuscht, suchen sie künftig womöglich woanders oder eben gar nicht mehr.
Deshalb bevorzugt Google Websites, die die Core Web Vitals berücksichtigen und dem Nutzer damit am ehesten ein positives Erlebnis bereiten. Wie lange braucht eine Website, um ihr größtes Element zu laden und anzuzeigen? Wie lang braucht sie, bis der Nutzer die erste Aktion auf ihr durchführen kann? Und wie groß ist die Verschiebung, die auf einer Website stattfindet, wenn das letzte Element angezeigt wird?
Das sind die entscheidenden Fragen, die den Metriken der Core Web Vitals zugrunde liegen. Je niedriger sie sind, desto nutzerfreundlicher die Website – und umso größer die Chance, auf Googles Seite 1 angezeigt zu werden.
Testen Sie Ihre Website auf die Core Web Vitals
Bevor wir ins Detail gehen, überprüfen Sie doch gerne einmal, inwieweit Ihre Website möglicherweise bereits für die Core Web Vitals optimiert ist: Bei den Google PageSpeed Insights tragen Sie einfach die Domain zu Ihrer Website ein und erhalten nach einer kurzen Wartezeit Ihre Ergebnisse für die Desktop- und die mobile Ansicht. Das Tool zeigt Ihnen nicht nur eine Gesamtbewertung der Geschwindigkeit Ihrer Website an, sondern gibt Ihnen ebenso einen Einblick in eben die neuen Core Web Vitals – inklusive Handlungsempfehlungen, um Ihre Werte zu optimieren.
Largest Contentful Paint – LCP
Beginnen wir mit dem Largest Contentful Paint: Diese Metrik beschreibt die Zeit, die eine Website braucht, um den größten Inhalt im sichtbaren Bereich zu laden. Der sichtbare Bereich ist der, den der Nutzer nicht durch das Scrollen erreicht, sondern sofort sieht, sobald er eine Website besucht. Lädt der größte Content einer Website zu lang, können Nutzer womöglich schon weiter gescrollt oder das Interesse verloren haben. Vielleicht geht die entscheidende Information damit verloren – oder aber es entsteht der Eindruck einer nicht professionellen Internetseite, wenn die einzelnen Elemente zu lange laden.
Mit der Content-Größe ist in diesem Fall übrigens nicht die Dateigröße gemeint: Der „Largest Content“ beschreibt das Element, das den meisten Platz im Sichtbereich des Nutzers einnimmt. Wie lässt sich der Largest Contentful Paint aber optimieren?
Largest Contentful Paint optimieren
Bevor wir uns diese Frage stellen, gilt es erst einmal festzuhalten, wann der Wert überhaupt optimiert werden muss. Grundsätzlich gilt: Eine Ladezeit von weniger als 2,5 Sekunden für den größten Content gilt bereits als gut – 2,5 bis 4 Sekunden sind in Ordnung, Optimierungen wären aber wünschenswert und alles, was länger lädt als 4 Sekunden, muss dringend überarbeitet werden.
So optimieren Sie Ihren Largest Contentful Paint:
- Serverladezeiten verkürzen: Dass das Element eine lange Ladezeit hat, muss nicht immer am Element selbst liegen. Oft ist es einfach der Server, auf dem die gesamte Website liegt, der zu langsam ist. Lädt die Website auf dem Server schneller, reduziert das natürlich gleichermaßen die Ladezeit des größten Elements und optimiert damit den Wert dieser Metrik.
- CSS und JavaScript reduzieren: Umfangreiche CSS- und JavaScript-Dateien können das Rendern von Seitenelementen blockieren und damit ihre Ladezeiten verlängern. Um das zu vermeiden, sollten die CSS- und JavaScript-Dateien in der Quantität verringert und in der einzelnen Größe reduziert werden. So beginnt das Rendern der Website-Elemente eher und ihre Ladezeit verkürzt sich.
- Die richtigen Formate einsetzen: Besonders in Sachen Fotos und Videos ist das richtige Format entscheidend. Videos werden idealerweise von externer Quelle eingebunden oder – wenn nicht – beim Laden priorisiert. Fotos werden responsiv eingebunden, in einer passenden Größe und in einem modernen Format wie JPEG 2000, JPEG XR oder WebP; und nur, wenn sie tatsächlichen Mehrwert haben.
Wer diese Ratschläge berücksichtigt und sie entsprechend umsetzt, ist auf einem guten Weg zu einem optimalen LCP-Wert von unter 2,5 Sekunden und damit zu einer erhöhten Benutzerfreundlichkeit.
First Input Delay – FID
Die nächste Metrik der Core Web Vitals ist der First Input Delay. Er beschreibt die Zeit, die der Browser braucht, bis ein neuer Website-Besucher mit ihr interagieren kann. Wir kennen das alle aus unserer persönlichen Nutzung: Wir kommen auf eine neue Internetseite, sehen einen Button, dessen Inhalt uns interessiert und klicken darauf – und nichts passiert. Wahrscheinlich liegt das daran, dass die Website gerade noch einen Inhalt lädt und solange nicht ansprechbar ist. Der First Input Delay beschreibt die Zeit, die die Seite braucht, bis sie erste Interaktionen des Nutzers verarbeiten kann.
First Input Delay optimieren
Liegt der Wert für die Ansprechzeit der Website bei unter 100 Millisekunden, gilt er als sehr gut, zwischen 100 und 300 ist er in Ordnung, könnte aber eine Optimierung vertragen und alles, was über die 300 Millisekunden hinausgeht, ist sehr negativ und muss dringend überarbeitet werden – einerseits für die Benutzerfreundlichkeit insgesamt, andererseits für eben die künftigen Suchmaschinenrankings bei Google.
So optimieren Sie Ihren First Input Delay:
- Interaktionen priorisieren: Die erste Maßnahme ist recht naheliegend und kann schnell umgesetzt werden. Elemente, mit denen interagiert werden kann, sollten priorisiert werden im Ladeprozess der Seite und damit zügiger zur Verfügung stehen als andere. Ein Button ist für die Metrik First Input Delay von größerer Bedeutung als ein Foto, mit dem nicht interagiert werden kann.
- Web Worker einsetzen: Mit Hilfe von Web Workern werden umfangreiche JavaScripte separat ausgeführt. So werden die Ladezeiten anderer Elemente nicht beeinflusst und bleiben kurz.
- JavaScripte aufteilen: Besonders umfangreiche JavaScripte sollten aufgeteilt werden in mehrere. Skripte, die länger als 50 Millisekunden zum Laden brauchen, gelten als „Long Tasks“ und müssen für eine kürzere First-Input-Delay-Zeit aufgespalten werden in mehrere kleine.
Cumulative Layout Shift – CLS
Bei der letzten der drei Core Web Vitals ist das Frustrationslevel für den Nutzer wahrscheinlich am größten: der Cumulative Layout Shift. Die Situation ist vergleichbar mit dem First Input Delay. Wir besuchen eine neue Website, sehen einen interessanten Button, klicken darauf und in derselben Sekunde verschieben sich Elemente der Seite und statt den Button zu treffen, öffnet sich ein anderer Link, der die Position vom Button eingenommen hat. Das passiert besonders gerne, wenn Werbebanner auf einer Internetseite eingebunden sind – die laden nämlich häufig besonders spät.
Und so vergeht viel Zeit, in der sich erst einmal eine Seite öffnet, die wir gar nicht sehen möchten, in der wir wieder zurück zur alten Seite und erneut probieren müssen, den Button anzuklicken.
Cumulative Layout Shift optimieren
Der CLS-Wert wird berechnet, indem die Größe des betroffenen Bereichs mit dem Grad der Verschiebung multipliziert wird. Nimmt der Content die Hälfte des Bildschirms ein und verschiebt sich um ein Viertel, wird dementsprechend 0,5 mit 0,25 multipliziert. 0,125 wäre hier das Ergebnis für den Wert des Cumulative Layout Shifts. Liegt der CLS über 0,1, sollte er bereits optimiert werden – ab 0,25 muss er dringend überarbeitet werden.
So optimieren Sie Ihren Cumulative Layout Shift:
- Feste Höhen und Breiten definieren: Für Bilder, Ads, Iframes oder andere eingebettete Elemente müssen feste Höhen und Breiten definiert werden. Solange sie noch nicht angezeigt werden, wird dadurch trotzdem der Platz für sie freigehalten und es entstehen keine Verschiebungen, wenn der Ladevorgang schließlich beendet ist.
- Animationen mit transform: Wer Animationen auf seine Website einbinden möchte, sollte dieser mit der CSS-Eigenschaft „transform“ erstellen. Diese verhindert, dass es zu Verschiebungen der Seite kommt, wenn Elemente animiert werden.
Fazit: Die Bedeutung der Core Web Vitals
Wer seine Suchmaschinenrankings steigern und über organischen Content neue Kunden für sein Unternehmen gewinnen möchte, darf nicht nur in klassischer SEO-Manier in Inhalten, Keywords und Links denken. Mit den Core Web Vitals erhält das Thema Benutzerfreundlichkeit der Website eine besonders große Relevanz und entscheidenden Einfluss darauf, welche Unternehmen auf Seite 1 ranken – und welche auf den folgenden Seiten in der Bedeutungslosigkeit verschwinden. Im April 2021 haben nur weniger als 3% aller Websites diesen Anforderungen entsprochen. Zeit, das zu ändern.