Google Adsense: Cumulative Layout Shift (CLS) reduzieren

Cumulative Layout Shift ist eine neue Metrik in Google PageSpeed Insights und den Google Webmaster Tools. Sie misst, wie sehr das Layout einer Webseite herumspringt, insbesondere während des Ladevorgangs.

Schlechte CLS-Performance wird in der Webmaster-Konsole angezeigt und Google wird Webseiten, die einen CLS über dem empfohlenen Maximum von 0,25 haben, sehr vermutlich abstrafen und schlechter ranken lassen.

Die visuelle Stabilität einer Webseite ist wichtig, da Nutzer ansonsten frustriert sein können, wenn Sie eine Webseite nutzen und der Inhalt sich ständig verändert. Damit ist der CLS eine nutzerzentrierte KPI.

Google möchte das Sie als Webseitenbetreiber Ihre Website so benutzerfreundlich wie möglich gestalten.

Insbesondere Google AdSense sorgt auf Webseiten häufig ebenfalls für höhere CLS-Werte. Daher wird im nachfolgenden Artikel erklärt, wie Sie Ihre CLS reduzieren können, wenn Sie auf Ihrer Website responsive Google AdSense-Anzeigenblöcke schalten.

Diese Methode kann auch für andere Werbenetzwerke funktionieren.

Wie wird der CLS gemessen?

Der CLS wird anhand der Menge der Layoutverschiebung gemessen, die an einem beliebigen Punkt während der Lebensdauer der Seite auftritt. Google misst den CLS als Bruchzahl, wobei jeder Wert kleiner, gleich 0,1 als sehr gut gilt. Werte unter 0,25 müssen verbessert werden, und Werte über 0,25 gelten als sehr schlecht und sollten dringend verbessert werden.

Der CLS wird auch separat für Desktop- und Mobil-Layouts gemessen. Es kann sein, dass Sie auf dem Desktop einen perfekten CLS-Wert haben, aber Ihr Layout auf dem Smartphone einen schlechten CLS-Wert hat.

Die CLS-Zahl wird anhand der Auswirkung und Menge der Bewegung von Objekten zwischen Frames auf der Seite berechnet.

Warum verursacht AdSense CLS-Probleme?

Google AdSense forciert schon seit geraumer Zeit Responsive Ads. Diese Anzeigenblöcke erzielen eine bessere Leistung als Versionen mit fester Größe, da sie sich an die richtige Bildschirmgröße anpassen und intelligente Gebote abgeben können, um die Einnahmen zu optimieren.

Allerdings werden diese Anzeigenblöcke alle mit einer Höhe von 0px geladen und erweitern sich dann auf die richtige Größe, sobald die Gebotsabgabe und das Laden der Anzeige stattgefunden haben. In manchen Fällen kann dies einige Sekunden dauern. Das führt dazu, dass die Elemente auf der Seite herumspringen und sich verschieben, was wiederum Ihren CLS-Score in die Höhe treibt.

Wenn Sie einen Anzeigenblock weit oben auf der Webseite haben (z. B. in der Nähe des Seitentitels), trägt dies wahrscheinlich zu einem schlechten CLS-Wert bei, da sich diese leere Anzeigenposition schon früh im Viewport befindet und somit sichtbar ist, wenn sie geladen wird und dadurch den Rest der Seite nach unten verschiebt.

So beheben Sie Google AdSense CLS

Zum Glück ist es nicht allzu kompliziert dieses Problem zu beheben.

Die beste Methode besteht darin, einen Wert für die Mindesthöhe zu einem DIV-Container um jeden Ihrer Anzeigenblöcke hinzuzufügen. Es reicht jedoch nicht aus, eine Klasse zu verwenden, um diese CSS-Eigenschaft festzulegen – Sie müssen eine ID verwenden, um diesen Wrapper festzulegen.

Das Javascript von Google AdSense entfernt die Richtlinien für die Mindesthöhe bei allen übergeordneten Objekten. Diese werden jedoch nicht entfernt, wenn Sie eine ID für das CSS-Targeting verwenden.

Diese CSS- und HTML-Beispiele zeigen Ihnen eine sehr einfache Methode zur Behebung von CLS mit Google AdSense:

Ermitteln Sie die tatsächlichen maximalen Höhen der Anzeigenblöcke für jede Viewport-Größe auf Ihrer Website, und richten Sie Ihre Media-Queries entsprechend ein. Das hier gewählte Beispiel ist sehr einfach, da es sich um einen Header-Banner handelt und Google hier nur zwei verschiedene Anzeigenblöcke basierend auf Desktop-/Mobile-Ansichtsfenstern anzusteuern scheint.

Wenn an dieser Stelle ein kleinerer Anzeigenblock erscheinen sollte, funktioniert diese Methode ebenfalls – es wird jedoch ein leerer Platz auf der Seite entstehen.