Fix Layout Shift verursacht durch vergrößerndes Bild

Behebung von Layout-Verschiebungen durch automatisch skalierende Bilder

Wussten Sie, dass es einen sehr einfachen und weit verbreiteten Weg gibt, Ihre Core Web Vitals mit nur einer einzigen CSS-Anweisung zu zerstören? Es gibt sie da draußen, ich habe sie oft gesehen und sie wird Chaos in Ihrem CLS anrichten.

Hier ist es: das kleine Stück Code, das automatisch dazu führt, dass alle Ihre Bilder auf der Seite verschoben werden. Es verursacht sogar einen Layout Shift, wenn die Breite und Höhe des Bildes explizit festgelegt wurden! Auch das Setzen des korrekten aspect-ratio CSS-Wertes wird das Problem nicht beheben!

Es ist ein heimtückisches kleines Layout-Shift-Problem, da es nur bei erstem Besuch auftritt. Da Sie als Webmaster das Bild wahrscheinlich in Ihrem Browser-Cache haben, werden Sie den Layout Shift möglicherweise nicht sofort bemerken.

Wie haben wir das Problem bemerkt?

Es ist schwierig, diese Art von Problemen zu erkennen, die hauptsächlich bei neuen Besuchern mit mobilen Geräten mit geringer Bandbreite auftreten. Die Antwort ist RUM-Tracking. RUM-Tracking verfolgt die Core Web Vitals für echte Benutzer und meldet sie an Sie zurück. RUM-Tracking ist großartig, um versteckte Core Web Vitals-Probleme zu finden!

Wie funktioniert es?

Dieses winzige Stück CSS-Code wird manchmal für responsive Bilder verwendet. Wenn ein Bild nicht vom Browser vorab zwischengespeichert wird, hat ein Browser keine Ahnung von der intrinsischen Breite und Höhe. Mit diesem Code ignoriert er die eingestellte Breite und Höhe und versucht, die Seite mit der intrinsischen Breite und Höhe zu rendern. Da diese unbekannt ist, wird das Bild zuerst mit 0x0 Pixeln gerendert und erst wenn das Bild heruntergeladen und dekodiert wurde, wird es neu gerendert und nimmt die korrekte Menge an Pixeln ein.

1. Das height: auto; stellt sicher, dass das Bild immer die richtige Höhe hat, wenn das Bild in der Größe verändert wird. 
2. Das max-width:100%; stellt sicher, dass das Bild nie größer als der sichtbare Viewport ist 
3. Der width:auto; Teil erzeugt einen Layout Shift für nicht zwischengespeicherte Bilder, selbst wenn Sie die Breite und Höhe oder das Seitenverhältnis explizit festlegen.

Wie kann man es beheben?

Die Lösung ist einfach. Entfernen Sie einfach width:auto. Dies zwingt den Browser, die angegebene Bildbreite zu verwenden und die automatische Höhe basierend auf der Höhe zu berechnen. 

Tun Sie sich also einen Gefallen, nehmen Sie sich 15 Sekunden Zeit, untersuchen Sie ein zufälliges Bild auf Ihrer Website (Rechtsklick, Element untersuchen) und suchen Sie nach width:auto; und height:auto;. Wenn Sie es sehen, beheben Sie es!.