Lohnt sich die Core Web Vitals Optimierung?

Die Core Web Vitals sind aktuell in aller Munde. Denn Google plant die Einführung der Core Web Vitals als Ranking-Kriterium. Gut optimierte Websites haben dann wohl einen Vorteil gegenüber eher halbherzig betriebenen Pages...

Doch lohnt sich die Optimierung der Core web Vitals eigentlich? Sollte man eine Agentur damit beauftragen?

Eine gute Übersetzung für "Core Web Vitals" ist mir nicht eingefallen - sinngemäß steht der Begriff für die wichtigsten Vitalitäts-Parameter moderner Websites. Also etwa das, was in der Medizin Herz- und Atemfrequenz sind, gewissermaßen.

Unabhängig vom Ranking-Aspekt macht es also an sich Sinn, diese Parameter im Blick zu behalten - und die Seite entsprechend zu optimieren.

Google hat bereits angekündigt, dass der Fokus auf die Core Web Vitals im Laufe der Zeit weiter ausgedehnt wird. Auch wenn aktuell der Fokus auf Aspekten der User-Experience liegt, werden künftig noch viele weitere Aspekte eine Rolle spielen.

Im Wesentlichen geht es bei den Core Web Vitals um folgende Aspekte:

Largest Contentful Paint (LCP)

Dieser Parameter sagt aus, wie viel Zeit zwischen Aufruf der Website und erster (sinnvoller) Darstellung vergeht. Natürlich spielt dabei einerseits die Ladezeit selbst (inkl. der Serverantwortzeit) eine Rolle - aber nicht nur!

Auch die Renderzeit auf dem Rechner des Besuchers spielt hier mit rein. Aus dem Grund spielt es bei der Optimierung der Web Core Vitals eine wichtige Rolle, die Seite abzuspecken. Das betrifft Bilder, Videos, aber auch Javascripts, unnötigen CSS-Code und Schriftarten.

First Input Delay (FID)

Die Zeit vom Laden der Seite bis zur Interaktivität wird mit dem First Input Delay angegeben. Denn schon während eine Seite sich aufbaut wollen Nutzer bereits Eingaben tätigen. Als "Input" zählt dabei übrigens auch bereits ein Klick.

Besonders tückisch sind hier schlecht gesetzte Event-Listeners, die den Browser dazu zwingen, auf das Laden weiterer Scripts im Hintergrund zu warten. In dieser Zeit kann der Nutzer keine Eingaben tätigen - die Website wirkt wie eingefroren und reagiert nicht.

Cumulative Layout Shift (CLS)

Kennen Sie das? Sie rufen eine Website auf, wollen auf einen Link klicken, und plötzlich verrutscht der ganze Seiteninhalt, weil sich oben im Header ein Werbebanner reingequetscht hat.

Das ist ein Beispiel für eine "Layout-Verschiebung", die sich mit vielen anderen Verschiebungen "kumulieren" kann (ich hoffe, die sinngemäße Übersetzung ist mir gelungen).

Typische Ursachen für Cumulative Layout Shifts sind

  • Schriftarten, die erst nachgeladen werden (daher sollte der Browser angewiesen werden, bis zum Laden des Fonts auf eine systemeigene Schriftart zu setzen (CSS: text-rendering: optimizeLegibility;).
  • Werbebanner (der Effekt ist oft auch gewollt, damit sich Nutzer "verklicken" und Webmastern Einnahmen bescheren)
  • Bilder, bei denen keine fixe Höhe angegeben wurde (respektive ein Seitenverhältnis (Aspect-Ratio)), aus dem der Browser schon vor dem Laden des Bildes erkennen kann, wie viel Platz er freihalten muss.

Webentwickler können Layout-Shifts in den Chrome DevTools anzeigen lassen. Dazu im Menü auf "More Tools" --> "Rendering" gehen und dort das Häkchen bei "Layout Shift Regions" aktivieren. Anschließend die Seite neu laden. Chrome zeigt ein Overlay über den Regionen, die sich beim Rendering der Seite verschieben.

Übrigens: Minimale Layout Shifts sind völlig normal, allerdings lassen sich die meisten Ursachen beheben, sodass man im Rahmen der Core Web Vitals Optimierung durchaus Chancen hat, diesen Störfaktor stark zu reduzieren.

Das Bild oben ist ein Screenshot das im Rahmen meiner Arbeit an einem Agenturprojekt entstanden ist.

Interessiert an einer Beratung? Nehmen Sie jetzt Kontakt auf!