Die „Core Web Vitals“ werden zum Rankingfaktor – So bereitet Ihr Eure Website darauf vor

von Jochen Moschko

Kategorie(n): Ratgeber Datum: 20. Januar 2021
Wie von Google angekündigt, werden die sogenannten „Core Web Vitals“ im März in den Rang eines Rankingfaktors erhoben. Die „Core Web Vitals“ sind ein Set an Metriken, mit welchem die Nutzerfreundlichkeit von Webseiten bewertet wird. Von dem besagten Zeitpunkt an wird sich die Nutzerfreundlichkeit Eurer Website auf deren Rankings auswirken. In diesem Beitrag zeigen wir Euch auf, welche Metriken „Core Web Vitals“ beinhalten und worauf Ihr achten solltet.

1. First Contentful Paint

Hierunter versteht man die Zeitspanne, nach welcher die Seite nach ihrem Aufruf erstmals zu sehen ist. Auch wenn der Nutzer an diesem Punkt oft noch nicht direkt mit der Seite interagieren kann, weil der Ladevorgang noch nicht abgeschlossen ist, kann er sich trotzdem schonmal orientieren und mit dem Lesen beginnen. Je kürzer diese Zeitspanne ist, umso besser ist dies für die Nutzererfahrung. Wie Ihr die Zeitspanne verkürzen könnt, erfahrt Ihr folgenden Abschnitt.

2. Total Blocking Time

Die Einbindung von CSS-Dateien und JavaScripts kann dazu führen, dass der Ladevorgang vorübergehend blockiert wird und die Seite nicht reagiert. Erfahrungsgemäß wirkt sich das besonders stark aus, wenn Dateien von externen Servern eingebunden werden (z. B. JQuery). Das ist nicht nur aus datenschutzrechtlicher Sicht bedenklich, sondern führt nicht selten dazu, dass der Ladevorgang einer Seite länger dauert, als wenn die Elemente auf dem eigenen Server liegen würden. Ein zusätzlichen Löwenanteil machen CSS-Anweisungen aus. Sie sollten möglichst erst am Seitenende geladen werden – jedenfalls diejenigen, die für das Erscheinungsbild der Seite nicht essentiell sind. Lagert Eure CSS-Anweisungen idealerweise in eine oder zwei Dateien aus, aber nicht in mehr. Nicht selten finden sich Seiten, bei denen die CSS-Anweisungen auf zehn ausgelagerte Dateien verteilt sind. Kein Wunder, wenn die Ladezeit astronomisch lang ausfällt. Stellt auch Eure JavaSkripte auf den Prüfstand und findet heraus, ob Ihr nicht auf das eine oder andere verzichten könnt. Insbesondere Content-Management-Systeme bringen oft viele Plug-Ins mit, die nicht unbedingt erforderlich sind, sich aber nachteilhaft auf die Ladezeit auswirken und den Server unnötig belasten. Wer nicht benötigte Plug-Ins deaktiviert, tut für die Ladezeit im Regelfall etwas Gutes. Wer sich damit auskennt, kann seine CSS-Anweisungen und JavaSkripte zusätzlich minifizieren, also unnötige Leerzeichen und Leerzeilen darin entfernen. Dadurch lässt sich ebenfalls Ladezeit einsparen.

3. Cumulative Layout Shift

Hierunter versteht man die Stabilität des Layouts. Oft werden Elemente wie Bilder oder Werbeanzeigen nachträglich geladen, wenn bereits ein Teil der Seite sichtbar ist und der Nutzer mit dem Lesen begonnen hat. Das ist sogar sinnvoll, weil der Nutzer auf diese Weise bereits mit der Seite interagieren kann, während die restlichen Elemente asynchron im Hintergrund geladen werden. Dieser Vorteil kehrt sich jedoch schnell ins Gegenteil um, wenn die Seite dadurch anfängt auf und ab zu springen. Das ist besonders beim Lesen ärgerlich. Das passiert, wenn für die nachträglich geladenen Elemente im Layout kein Platz reserviert wurde und sich im Augenblick des Ladens das Layout verschiebt. Achtet deshalb darauf, dass der erforderliche Platz für die nachträglich geladenen Elemente bereits im Vorfeld reserviert wird. Ein Hin- und Herspringen des Seiteninhalts verärgert nicht nur Eure Besucher, sondern wird sich zukünftig auch auf die Bewertung Eurer Website durch Suchmaschinenalgorithmen auswirken. Insbesondere viele Nachrichtenseiten dürften – sofern nicht zeitnah gehandelt wird – bald die Quittung erhalten, denn hier ist dieses Phänomen oft besonders stark ausgeprägt.

Wie ist es bei meiner Website um die „Core Web Vitals“ bestellt?

Wenn Ihr erfahren möchtet, wie es bei Eurer Website um die „Core Web Vitals“ steht, müsst Ihr sie lediglich mit „PageSpeed Insights“ von Google prüfen lassen: https://developers.google.com/speed/pagespeed/insights/?hl=de Gebt die URL zu Eurer Website ein und nach wenigen Sekunden seht Ihr bereits das Ergebnis: Wir hoffen, dass dieser Ratgeber hilfreich für Euch ist. Seid Ihr schon auf die „Core Web Vitals“ vorbereitet? Schreibt gerne einen Kommentar!   Bild: Greg Rakozy / unsplash.com