Performance-Analyse: Google Web Vitals

Bei Web Vitals handelt sich dabei um die Werte FCP (First Input Delay), LCP (Largest Contentful Paint) und CLS (Cumulative Layout Shift). Für Projektoptimierungen sind meist nur LCP und CLS relevant. LCP gibt an, wann der größte, also relevanteste Teil der Seite geladen wurde.

Ab Weblication^® Version 16 können Sie pro Seite in der Siteinfo die LCP Ladezeiten grafisch aufbereitet erkennen und bei Bedarf Gegenmaßnahmen einleiten.

Bei mobilen Geräten ist der größte, also relevanteste Teil der Seite aufgrund der Höhe oft der Banner.
Ein Ansatz, um den Wert zu optimieren besteht darin, das Seitenverhältnis so anzupassen, dass der Banner auch  Mobil nie das größte Element ist. Alternativ bleibt fast nur noch, dass man die Bildgröße bzw. Qualität stark reduziert, um hier auf akzeptable Werte zu kommen.
Im aktuellen Banner ist das für die Standardvariante bereits angepasst.

CLS gibt an, inwieweit sich der Inhalt während des Ladens der Seite verschiebt.

Beispiel: Banner-Element

Beim Banner wird die Höhe über CSS definiert. Da beim ersten Laden das CSS für das Logo eingebettet wird, findet hier keine Layout-Verschiebung statt. Die Höhe wird hier in Prozent angegeben, da eine fixe Höhe im HTML nicht umsetzbar ist. Hierzu entsteht keine negative Auswirkung auf das CLS.

Beispiel: Logo

Beim Logo wird die Höhe über CSS definiert. Da beim ersten Laden das CSS für das Logo eingebettet wird, findet hier keine Layout-Verschiebung statt. Hierzu entsteht keine negative Auswirkung auf das CLS.

Für die Web Vitals ist oft vor allem der Banner relevant, es können aber z.B. auch externe Schriftarten zu deutlich schlechteren Werten führen.