CLS: Wie man die Höhe von Elementen beibehält (Bilder, JS-Komponenten, iframes…)

In diesem Text erfahren Sie, warum und wie Sie auf HTML- oder CSS-Ebene die Abmessungen von Elementen sicherstellen müssen, die asynchron in die Seite eingefügt werden, wie z.B. <img>, <iframe> oder JavaScript-Komponenten.

Eine korrekte Vorbereitung des Platzes für diese Elemente hilft Ihnen, unerwünschte Verschiebungen der Seite zu vermeiden und somit die Metrik Cumulative Layout Shift (CLS) nicht zu verschlechtern, die Teil der Core Web Vitals ist.

Warum ist es notwendig, Abmessungen und Seitenverhältnisse zu überwachen?#

Jedes asynchron geladene Element auf der Seite sollte eine definierte Größe haben. Dies kann ein Bild, ein Video, ein iframe oder eine andere Webkomponente sein.

Wenn die Seite geladen wird und der Inhalt zum ersten Mal angezeigt wird (Ereignis FCP), muss der Browser den Platz für dieses Element definiert haben, bevor es angezeigt wird.

Lassen Sie uns die Lösungen für bestimmte Elemente genauer betrachten.

1. Bilder, IMG-Elemente#

Ein häufiges Problem bei der CLS-Metrik sind fehlende Abmessungen bei Bildern. Der Browser weiß nichts über das Bild, bis es vollständig heruntergeladen und angezeigt wird. Wenn Sie im <img>-Tag die Parameter width und height angeben, reserviert der Webbrowser den notwendigen Platz für das Bild.

<img src="image.webp" alt="…" width="1600" height="900" />

In den Attributen width und height geben Sie am besten die physischen Abmessungen des Bildes in Pixeln an.

Aus den Abmessungen kann auch das Seitenverhältnis berechnet werden, was auch bei in ein responsives Layout eingefügten Bildern funktioniert. Wenn möglich, geben Sie immer die Abmessungen bei Bildern an. Dies ist besonders wichtig bei Bildern, die lazy loading verwenden und daher das Attribut loading="lazy" haben.

Manchmal kann es aus technischen Gründen vorkommen, dass Sie die Parameter width und height nicht in HTML generieren können. Dies kann durch die CSS-Eigenschaft aspect-ratio ersetzt werden, die den Platz durch das Seitenverhältnis reserviert.

Wenn Sie bei Bildern weder die Abmessungen noch das Seitenverhältnis im Voraus kennen, können Sie einen Trick mit dem automatischen Seitenverhältnis verwenden.

.wysiwyg img {
	aspect-ratio: auto 16 / 9;
}

Diese Einstellung von aspect-ratio stellt sicher, dass für jedes Bild das Seitenverhältnis 16/9 festgelegt wird, aber nach dem Herunterladen und Rendern des Bildes wird der Browser das tatsächliche Seitenverhältnis respektieren.

Es ist nämlich besser, zumindest etwas Platz zu reservieren, als überhaupt keinen dedizierten Platz zu haben.

Ein Bild, das keine Abmessungen hat, wird zunächst mit falscher Höhe dargestellt und verschiebt dann den darunterliegenden Inhalt, was einen Layout-Shift verursacht.

2. JavaScript-Komponenten auf Ihrer Website#

Hierbei kann es sich um verschiedene Rechner, Bilder-Slideshow-Browser, Karussells mit Angeboten und Ähnliches handeln. Es kann vorkommen, dass dieses Element nicht sofort beim ersten Rendern der Seite dargestellt wird, sondern seine Darstellung beispielsweise durch Lazyloading verzögert wird oder sein Inhalt mithilfe von asynchronem JavaScript nachgeladen wird.

Diesen Elementen sollten Sie immer im Voraus Platz im Layout reservieren. Wenn es sich um Inhalte handelt, die später durch JavaScript nachgeladen werden, bereiten Sie den Platz für das Element mithilfe der CSS-Eigenschaft aspect-ratio oder min-height in der Stilvorlage vor.

Wenn wir das Seitenverhältnis kennen:

.box {
	aspect-ratio: 16 / 9;
}

Wenn wir das Seitenverhältnis nicht kennen, geben wir eine geschätzte Mindesthöhe an:

.box {
	min-height: 200px;
}

3. JavaScript-Komponenten von Drittanbietern#

Typischerweise handelt es sich um ein Social Plugin wie Instagram, Facebook, TikTok, Google-Bewertungen, YouTube-Videos usw.

Diese Widgets werden oft nicht sofort beim ersten Rendern der Seite dargestellt, sondern ihre Darstellung wird ebenso wie die Komponenten im vorherigen Punkt verzögert.

Auch diesen Elementen sollten Sie immer im Voraus Platz im Layout reservieren. Wenn Sie weder das Seitenverhältnis noch genaue Abmessungen kennen, können Sie zumindest die CSS-Eigenschaft min-height verwenden und zumindest eine Mindesthöhe vorbereiten.

Überprüfen Sie die Darstellung mit einem „typischen Beitrag“ und stellen Sie die Mindesthöhe dieser Komponente entsprechend ein. Es ist immer besser, zumindest etwas Platz vorzubereiten, als überhaupt keinen. Vielleicht beseitigen Sie nicht alle Layout Shifts vollständig, aber Sie reduzieren ihren Einfluss auf die CLS-Metrik erheblich.

Wenn Sie das Google-Bewertungs-Widget verwenden, bereiten Sie ihm auf der Seite Platz, noch bevor die Daten selbst geladen werden.

Mini-Fallstudie: Karussell von einem externen Dienst bei Datart#

Datart.cz gelang es in Zusammenarbeit mit PageSpeed.ONE, die unerwünschten Layoutverschiebungen auf der Startseite erheblich zu verbessern. Das Problem lag bei einem Karussell, das über den externen Dienst Bloomreach geladen wurde, der erst nach dem ersten Rendern der Seite geladen wurde und den darunterliegenden Inhalt verschob.

Die Lösung war relativ einfach, aber nicht leicht auf die bestehende Lösung zu implementieren. Wir reservierten Platz für das Karussell mithilfe der CSS-Eigenschaft min-height, noch bevor es geladen wurde. Durch diese Anpassung sank der CLS-Wert auf der Startseite von 0,6 auf 0,06, was einer zehnfachen Verbesserung entspricht.

Das Diagramm zeigt die Entwicklung der CLS-Metrik auf der Startseite von Datart. Der Anteil unzureichender Messungen (rote Fläche) sank von etwa zwei Dritteln der Seitenaufrufe auf ein Minimum, während der Anteil ausreichender Messungen (grüne Fläche) auf über 80 % stieg.

Wie man fehlende Abmessungen oder Seitenverhältnisse testet#

1. Lokale Messungen mit DevTools in Chrome#

Mit dem Performance-Panel können Sie die Änderungen der CLS-Metrik live verfolgen. Im Panel erfahren Sie auch, wodurch das Problem verursacht wird.

In diesem Fall ist es ideal, die Netzwerkeinstellungen zu verlangsamen. Diese Einstellung deckt Bilder und Komponenten ohne Abmessungen sehr schnell auf, da die Ressourcen länger laden.

2. Synthetische Tests mit dem Lighthouse-Tool#

Synthetische Tests mit dem Lighthouse-Tool, die Sie auch in unserem PLUS-Geschwindigkeitsüberwachung erstellen können, helfen Ihnen zu erkennen, welche Bilder keine Abmessungen haben und potenziell Probleme für die CLS-Metrik verursachen können.

Ergebnis des Lighthouse-Tests, bei dem Sie den Einfluss von Elementen im sichtbaren Bereich auf die CLS sehen.

Die Sicherstellung der Höhe oder des Seitenverhältnisses gehört zu den grundlegenden Methoden, um unerwünschte Verschiebungen der Seite und eine Verschlechterung der Cumulative Layout Shift (CLS)-Metrik zu vermeiden.

In unserer Hilfe finden Sie auch weitere Methoden zur Optimierung der CLS-Metrik.