Google-WMT: Core Web Vitals-Test nicht bestanden

[patchwork.de]

Seit Mai verwendet Google diesen Test für das Ranking und insbesondere der Wert für Cumulative Layout Shift (CLS) liegt meist über 0,3 - Soll kleiner 0,1.
Hier wird die visuelle Stabilität während des Ladens der Seite gemessen. Durch das Lazy Load wird beim Nachladen der Produktbilder das Layout verschoben was im wesentlichen bei der mobilen Ansicht störend ist.
Hat das schon mal jemand untersucht und voe allem eine Lösung / Strategie gefunden?

[indianer3c]

Guten Morgen

das interessant Core Web Vitals-Test kannte ich bisher noch nicht. Wenn ich diesen in der Search Console bei mir aufrufe steht bei mir Nicht genügend Daten für diesen Gerätetyp. hast Du den dort für Dich bereits ein Ergebnis und wie sieht dieses im Detail aus?

Viele Grüße,
Tim

[patchwork.de]

die Seiten müssen von Google indiziert sein.

Kannst Du auch jede Seite mit pagespeed analysieren.

[indianer3c]

Dankeschön der obige Hinweis mit dem Core Web Vitals-Test nicht bestanden fehlt bei mir …

stattdessen steht dort nur Origin Summary Im Bericht zur Nutzererfahrung in Chrome sind nicht genügend tatsächliche Geschwindigkeitsdaten für diesen Ursprung vorhanden.

Als Fazit glaube geht dabei um die Performance größtenteils und diese kannst verbessern um den Test zu bestehen, so wirkt dies auf mich.

[patchwork.de]

wie gesagt müssen die Seiten gut indiziert sein. Ein “gutes” Beispiel schicke ich dir per pn.
Bei CLS geht es nicht um Performance sondern um das (sich ändernde) Layout.

[vanilla_thunder]

in dem Image Lazy-Loading Blog-Post von Google steht, dass man die Größe des Bildes inline angeben soll und es hinterher per CSS responsive machen.
Das Problem danach könnte sein, dass nicht alle Bilder in OXID das selbe Seitenverhältnis haben.

Images should include dimension attributes.

While the browser loads an image, it does not immediately know the image’s dimensions, unless these are explicitly specified. To enable the browser to reserve sufficient space on a page for images, it is recommended that all <img> tags include both width and height attributes. Without dimensions specified, layout shifts can occur, which are more noticeable on pages that take some time to load.

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Alternatively, specify their values directly in an inline style:

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

The best practice of setting dimensions applies to <img> tags regardless of whether or not they are being loaded lazily. With lazy-loading, this can become more relevant. Setting width and height on images in modern browsers also allows browsers to infer their instrinsic size.

Images will still lazy-load if dimensions are not included, but specifying them decreases the chance of layout shift. If you are unable to include dimensions for your images, lazy-loading them can be a trade-off between saving network resources and potentially being more at risk of layout shift.

While lazy-loading in Chromium is implemented in a way such that images are likely to be loaded once they are visible, there is still a small chance that they might not be loaded yet. In this case, missing width and height attributes on such images increase their impact on Cumulative Layout Shift.

testen konnte ich es noch nicht, da unser dev Shop mit dem neuen Theme noch nicht im Index ist.

[indianer3c]

Dankeschön interessant zum Thema ist folgender Heise Artikel https://www.heise.de/developer/artikel/Performance-Cumulative-Layout-Shift-CLS-fuer-Web-Vitals-optimieren-4871860.html wenn man sich näher mit Thema beschäftigt.

Unter der Überschrift Analyse wird es spannend.

[vanilla_thunder]

ich habe gerade auf der pagespeed insights Seite gesehen, dass dort die Elemente, die das CLS verursachen, mit dem jeweiligen Score aufgeführt werden.
Und ich habe dort 0,912 stehen

[Hupi]

Wir hatten auch ziemlich grottige Werte, besonders auf der Startseite. Abhilfe hat das Setzen einer festen Höhe beim Slider und bei den Produktfotos (in der CSS-Datei) gebracht. Google kann halt diese Höhensprünge durchs Nachladen von Inhalten nicht leiden.

[Jb123]

am besten man analysiert das mit chrome speed auf 3g stellen und dann die screenshots an im reiter performance, da sieht man immer gut wo was shiftet