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 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.
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
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.
Debugger für kumulative Layoutverschiebung Debugger für kumulative Layout-Verschiebung,
Dieses Tool, das von einem Chrome-Ingenieur entwickelt wurde, ist eines der nützlichsten Tools zum Auffinden von CLS-Problemen.
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
CLS-Visualisierer Da dieses Tool eines der einfachsten ist, konnte ich die Verschiebungen am besten erkennen.
CLS-Visualisierer
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.
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.
Erstellen Sie ein neues Profil und fügen Sie 100 Kb oder weniger hinzu, um es in "Zeitlupe" zu testen.
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
Mit einer Browser-Erweiterung In Chrome können Sie das CLS Checker - Weiterreise
Webpagetest Eine weitere Messseite, auf der Sie einen Test durchführen können webpagetest.org
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.
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 ausführlicher Inserateinleger
Adaptive Anzeigen auf feste Größe umstellen 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 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.
Wenn Sie su verwenden pRO-Version
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 CSS o
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:
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 . 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 . 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.
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 WP Rocket
Oder das Plugin Litespeed Cache
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
