Beheben Sie Probleme mit CLS und Adsense

 

Google bei Laune zu halten ist unmöglich. Ich habe es schon vor langer Zeit aufgegeben, obwohl es noch einige Probleme zu lösen gibt, wie zum Beispiel die CLS (Kumulative Layout-Verschiebung).

Kumulative Layout-Verschiebung

Kumulative Layoutverschiebung ist die kumulative Änderung des Layouts. Diese Metrik ist wichtig, weil sie analysiert visuelle Stabilität und die Häufigkeit, mit der Besucher unerwartete Layoutänderungen erleben

Kurz gesagt, misst dies jede Verschiebung der Elemente am oberen Rand der Seite während des Ladens.

Ein niedriger CLS-Wert trägt dazu bei, dass die Seite angenehm für das Auge ist und verhindert lästige Bewegungen, die dazu führen können, dass der Leser den Überblick und/oder die Position wichtiger Navigationselemente verliert.

Beheben Sie Probleme mit CLS und Adsense

Es gilt als gute Benutzererfahrung, wenn der CLS-Wert 0,1 nicht überschreitet, bis 0,25 muss er sich verbessern und ab da gilt er als schlecht. Dies kann, wie Sie sicher wissen, auf verschiedene Weise gemessen werden. Die am häufigsten verwendete ist PageSpeed Insights.

Wie in der Dokumentation des Core Web Vitals dokumentation kann ein schlechtes CLS durch verschiedene Elemente verursacht werden, z. B. ein Bild oder Video mit unbekannten Abmessungen, eine Schriftart, die größer oder kleiner als ihre Alternative angezeigt wird, oder eine Anzeige eines Drittanbieters, ein Widget oder ein Animationseffekt, der die Größe dynamisch ändert

Paradoxerweise sind einige der Elemente, die dazu neigen, das CLS zu streichen, Google Adsense-Anzeigen. Besonders wenn Sie die automatische Anzeigen option (nicht empfohlen). Es gibt Fälle, in denen sie sogar die Ladegeschwindigkeit komplett ruinieren.

So erkennen Sie das Blättern

Hier ist der springende Punkt: Wonach genau müssen wir suchen und wie finden wir es? Nun, alles, was die Größe ändert und/oder während des Ladens scrollt.

Jetzt, da wir uns mit der Behebung des Adsense-Problems befassen, können wir uns die übrigen Elemente ansehen, die das CLS fett machen könnten. Es gibt verschiedene Möglichkeiten, dies zu tun, hier sind ein paar davon.

Anschauen

Die rustikalste Methode ist die einfache Beobachtung, mit dem Auge. Wenn die Bewegung auffällig ist, sehen Sie sie sofort, aber es gibt auch weniger auffällige Bewegungen, die eine genauere Untersuchung erfordern.

In der Suchkonsole

In GSC können Sie unter "Top Web Metrics" eine Liste der URLs mit CLS- und LCP-Problemen abrufen, die Ihnen dabei helfen wird, diese einzeln genauer zu betrachten.

Beheben Sie Probleme mit CLS und Adsense

Debugger für kumulative Layoutverschiebung

Debugger für kumulative Layout-Verschiebung, ist eine Website, auf der Sie die Url eingeben, die Sie analysieren möchten, und die ein animiertes GIF erstellt, das alle Designänderungen der mobilen und der Desktop-Version zeigt

Dieses Tool, das von einem Chrome-Ingenieur entwickelt wurde, ist eines der nützlichsten Tools zum Auffinden von CLS-Problemen.

Beheben Sie Probleme mit CLS und Adsense

Wenn der größte Teil des Textes auf der Seite hervorgehoben ist, ist es wahrscheinlich, dass Ihre Schriftarten die Layout-Verschiebungen verursachen.

Layout-Verschiebung GIF-Generator

Layout-Verschiebung GIF-Generator ist eine weitere Website, die dasselbe tut. Sie erzeugt ein Gif mit den Verschiebungen für die mobile und die Desktop-Version. Sie können es ausprobieren und die Ergebnisse vergleichen. Es gibt immer geringfügige Unterschiede in den Messungen der einzelnen Werkzeuge und es kann sein, dass Sie in einem Werkzeug etwas finden, was das andere nicht anzeigen kann oder zu einem bestimmten Zeitpunkt nicht erkennt.

CLS-Visualisierer

Da dieses Tool eines der einfachsten ist, konnte ich die Verschiebungen am besten erkennen.

CLS-Visualisierer ist eine sehr nützliche Erweiterung, die Ihnen, wie der Name schon sagt, hilft, die Metrik der kumulativen Layoutverschiebung der Seite zu visualisieren, indem sie Ihnen genau anzeigt, welche Elemente sich wie verändern. Beachten Sie, dass es sich hierbei auch um ein Labor-Tool handelt, das die Daten auf der Grundlage Ihres Geräts, Browsers, Ihrer Bildschirmauflösung oder Ihres Verbindungstyps liefert.

Beheben Sie Probleme mit CLS und Adsense
Das Dämonensymbol hatte eine Verschiebung der Position des Blocks, in dem es enthalten war, die in der Navigation nicht wahrnehmbar war.

Wenn Sie die Erweiterung aktivieren, zeigt sie Ihnen die CLS-Messungen in einer Liste an. Wenn Sie auf die einzelnen Messungen klicken, erscheint die Animation des Elements, das die Messung verursacht, in Rot.

Dank dieser Erweiterung habe ich auf vielen Seiten null CLS erreicht. Obwohl es so viele Gründe dafür geben kann, dass ich es installiert gelassen habe, um die URLs ohne Eile zu überprüfen.

Beheben Sie Probleme mit CLS und Adsense

Ladegeschwindigkeit der Website mit Chrome Dev Tools ändern

Chrome Dev Tools bietet interessante Möglichkeiten. Eine der nützlichsten ist die Option, die Bandbreite, mit der die Seite geladen wird, zu reduzieren und klar zu visualisieren, wann die Designänderung stattfindet und welche Elemente dazu beitragen.

Öffnen Sie dazu die Chrome-Entwicklungstools im Browser und klicken Sie mit der rechten Maustaste auf Ihre Website. Suchen Sie unter Netzwerk nach dem Wifi-Symbol, das auf dem Bild zu sehen ist, und daneben finden Sie ein Dropdown-Menü, in dem Sie eine benutzerdefinierte Geschwindigkeit hinzufügen können.

Beheben Sie Probleme mit CLS und Adsense

Erstellen Sie ein neues Profil und fügen Sie 100 Kb oder weniger hinzu, um es in "Zeitlupe" zu testen.

Beheben Sie Probleme mit CLS und Adsense

Wenn Sie jetzt mit der Geschwindigkeit surfen, mit der das Internet früher langsam war, fällt es Ihnen viel leichter zu erkennen, was Ihnen beim Laden Probleme bereitet.

Rendering

In den Layoutverschiebungsregionen in den Chrome Dev Tools können Sie die blau hervorgehobenen Layoutänderungen auch sehen, während Sie Ihre Seite in Echtzeit durchsuchen

So aktivieren Sie Layout-Verschiebungsregionen
:Suchen Sie in der Konsole nach "Rendering".

Aktivieren Sie das Kontrollkästchen Rendering-Regionen und alle anderen Kontrollkästchen, die Sie ausprobieren möchten.
Wenn Sie nun die Seite durchsuchen, werden die Layoutänderungen blau hervorgehoben.



Beheben Sie Probleme mit CLS und Adsense

Mit einer Browser-Erweiterung

In Chrome können Sie das CLS Checker - Weiterreise und testen Sie alle URLs, die schlecht abschneiden. Darüber hinaus gibt die Erweiterung Hinweise in Form von roten Etiketten und zeigt Ihnen die Liste der Elemente und die CLS, die sie verbrauchen. Wenn Sie auf "Toogle" klicken, wird das betreffende Element markiert. Da in meinem Fall das Problem mit den Adsense-Anzeigen bereits behoben war, erscheint nur eine Anzeige.

Beheben Sie Probleme mit CLS und Adsense

Webpagetest

Eine weitere Messseite, auf der Sie einen Test durchführen können webpagetest.org und Sie können sich die Videos und animierten Gifs ansehen, die es erzeugt.

Beheben Sie Probleme mit CLS und Adsense

Wenn Sie das Video anhalten, ist es einfacher, kleine Verschiebungen zu finden.

Wenn Sie genau hinsehen, werden die Menüpunkte sowie der Titel und die Texte etwas nach rechts verschoben, was anscheinend eine Änderung der Schriftgröße und/oder der Position ist, aber der Anzeigenplatz über dem Titel ist bereits reserviert, so dass der Inhalt nicht nach unten verschoben wird. Das Problem wurde gelöst, indem das H1 etwas verkleinert und der Umschlag des begleitenden Textes aufgeräumt wurde.

Beheben Sie Probleme mit CLS und Adsense

Aber das ist ein anderes Thema. Lassen Sie uns nun das Verhalten der Anzeigen betrachten.

Lösungen für die Reservierung von Werbeblöcken

Auf der Suche nach der besten und schnellsten Lösung fand ich heraus, dass die beste Lösung darin bestand, einem Wrapper (div) um jeden der Anzeigenblöcke einen Mindesthöhenwert hinzuzufügen, um diesen Platz zu reservieren und ein Scrollen nach dem Laden zu vermeiden

Es scheint jedoch nicht ausreichend zu sein, nur eine Klasse zu verwenden, die auf diese CSS-Eigenschaft verweist, sondern auch eine ID für den Wrapper zu verwenden. Es scheint, dass Google AdSense JavaScript aus irgendeinem unbekannten Grund die Richtlinien für die Mindesthöhe aus jedem übergeordneten Objekt entfernt. Sie werden jedoch nicht entfernt, wenn Sie eine ID für die CSS-Ausrichtung verwenden.

Dies wird erklärt hier zusammengefasst und etwas ausführlicher in der Dokumentation von Google. Da ich diese Lösung als lästig empfand, da ich alle Blöcke überprüfen musste, suchte ich nach einer Alternative, bis ich das fand, was funktionierte, nämlich Inserateinleger. Das waren die Schritte.

Adaptive Anzeigen auf feste Größe umstellen

Beheben Sie Probleme mit CLS und Adsense

Der erste Schritt war, keine adaptiven Werbeblöcke mehr zu verwenden. Ich habe alle Blöcke auf feste Größen umgestellt

Für diese Entscheidung müssen Sie Ihren speziellen Fall untersuchen und bewerten.

Obwohl Google behauptet, dass die adaptiven Versionen mehr Umsatz generieren (natürlich wegen der Möglichkeit, verschiedene Größen anzuzeigen), ist dies ziemlich elastisch und kann je nach Szenario variieren. Wenn Sie sich für die gängigsten Größen entscheiden, werden Sie immer wieder Anzeigen sehen.

Größenoptimierung deaktivieren

Beheben Sie Probleme mit CLS und Adsense

Obwohl die Blöcke eine feste Größe haben sollen, ist es am besten, die Option zu deaktivieren, die es Google erlaubt, die Größe der mobilen Anzeigen selbst zu bestimmen. Diese Option finden Sie in der Adsense-Verwaltung unter Anzeigen/Globale Einstellungen.

Auf diese Weise vermeiden wir Überraschungen, falls wir eine Anzeige übersehen haben, die wir von Hand aufgegeben haben. Nur weil sie eine feste Größe haben, heißt das noch lange nicht, dass sie nicht mehr reaktionsfähig sind.

Platz für Anzeigen mit Ad Inserter reservieren

Ad Inserter ist meiner Meinung nach das beste Plugin für die Verwaltung von Anzeigen, mit dem Sie auch andere Inhalte hinzufügen können

Um Platz für die einzelnen Anzeigen zu reservieren, gehen Sie einfach auf "Anzeigen" und legen Sie die Breite und Höhe der einzelnen Blöcke fest.

Beheben Sie Probleme mit CLS und Adsense

Wenn Sie su verwenden pRO-Versionkönnen Sie auch die Funktion Lazy Load prüfen, die ebenfalls dazu beiträgt, das CLS etwas zu lindern.

Einige Überlegungen

DasReservieren von Platz für Adsense hat seine Nachteile. Wenn Anzeigen nicht angezeigt werden können, weil sie nicht in dieser Größe geschaltet werden, oder wenn es zu einem bestimmten Zeitpunkt keine Inserenten für Ihre Website gibt, können Sie eine leere Fläche in der Größe des reservierten Platzes erhalten.

In Ad Inserter können Sie nur bei serverseitigen Einblendungen die Höhe direkt mit dem Code Benutzerdefiniertes CSSo .

Beachten Sie, dass die Höhe der Anzeige durch den Anzeigencode definiert wird. Der Code für adaptive Anzeigen kann die Höhe der Anzeige auf der Grundlage des verfügbaren Platzes einstellen

Einige Werbenetzwerke (z.B. AdSense) können auch Anzeigen schalten, die kleiner als der verfügbare Platz sind. Die Blockhöhe, wie in Ad Inserter definiert, ist die Höhe des eingefügten Blocks, d.h. die Höhe des div, das ihn umschließt. Dies ist der für die Anzeige reservierte Platz. Bei der Reservierung kann Folgendes passieren:

  1. Wenn die Höhe der Anzeige mit der Höhe des reservierten Platzes (Blockhöhe) übereinstimmt, ändert sich das Layout nicht und das CLS wird nicht beeinflusst.
  2. Wenn die Höhe der Werbung größer ist als die Höhe des reservierten Platzes (Blockhöhe), kann das Design nach unten verschoben werden, um die Werbung unterzubringen und den CLS zu beeinträchtigen.
  3. Wenn die Höhe der Anzeige geringer ist als die Höhe des reservierten Bereichs (Blockhöhe), erhalten Sie einen leeren Bereich unter der Anzeige, aber das Layout wird nicht verändert und hat keine Auswirkungen auf das CLS.

Einige Anzeigencodes, wie z. B. der adaptive AdSense-Anzeigencode, können die Höhe der Hauptcontainer außer Kraft setzen. In diesem Fall wird die Blockhöhe überschrieben und nicht angewendet

Kurz gesagt, wenn Sie dringend CLS-Probleme lösen müssen, indem Sie das Layout so wenig wie möglich ändern, ist es am schnellsten, wenn Sie, wo immer möglich, feste Anzeigengrößen verwenden.

Beheben Sie Probleme mit CLS und Adsense

Und wenn Sie schon dabei sind, können Sie sicherstellen, dass Sie keine fehlenden Abmessungen in den Bildern haben, auch das lässt sich auf verschiedene Weise beheben. Einige schnelle und einfache Möglichkeiten sind die Verwendung von Perfmatters o WP Rocket (beide gegen eine Gebühr).

Beheben Sie Probleme mit CLS und Adsense

Oder das Plugin Litespeed Cache wenn Sie Ihr Blog auf einem Litespeed-Server hosten.

Beheben Sie Probleme mit CLS und Adsense

Wenn alles gut geht, werden Sie den CLS-Abfall in wenigen Stunden in den Feldberichten und in wenigen Tagen in den Laborberichten von PageSpeed Insights.


Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad

Artículos relacionados

Este blog se aloja en LucusHost

LucusHost, el mejor hosting