Eine Layoutverschiebung tritt auf, wenn sich die Position oder Größe eines sichtbaren Elements auf Ihrer Seite ändert und sich dies auf die Position der umgebenden Inhalte auswirkt. Manchmal ist die Verschiebung beabsichtigt, z. B. wenn ein Container durch eine Nutzeraktion maximiert wird. Die dynamische Natur von Anzeigen kann jedoch zu unerwarteten Layoutänderungen führen, die sich negativ auf die Nutzerfreundlichkeit auswirken und ernsthafte Probleme bei der Nutzerfreundlichkeit verursachen können.
In diesem Leitfaden wird erläutert, wie Sie Layoutverschiebungen bei der Arbeit mit Google Publisher-Tags (GPT) messen und minimieren.
Wie Anzeigen zu Layoutverschiebungen führen
Anzeigen werden in der Regel asynchron angefordert und während oder nach dem Seitenaufbau dynamisch auf Ihrer Seite eingefügt. Während Anzeigen abgerufen werden, wird der Rest der Seite weiter geladen und nicht werbliche Inhalte können für den Nutzer sichtbar werden. Wenn Sie nicht genügend Platz für die geladenen Anzeigen reservieren, werden möglicherweise sichtbare Inhalte verdrängt, wenn die Anzeigen der Seite hinzugefügt werden.
Bei der Verwendung von Google Publisher-Tags kann es an mehreren Stellen im Anzeigenlebenszyklus zu Layoutänderungen kommen:
- Wenn
display()aufgerufen wird. Je nach Konfiguration kann ein Slot maximiert oder minimiert werden. - Beim Rendern von Anzeigeninhalten Die Größe einer Anzeigenfläche kann geändert werden, wenn eine fluide Anzeige ausgeliefert wird oder anderweitig nicht genügend Platz vorhanden ist. Je nach Konfiguration kann ein Slot an dieser Stelle auch maximiert oder minimiert werden.
- Nach dem Rendern der Anzeigeninhalte. Bestimmte Creative-Typen sind so konzipiert, dass sie sich maximieren, nachdem sie auf der Seite erschienen sind.
Je höher ein Anzeigenblock im Darstellungsbereich ist, desto mehr Inhalte können verdeckt werden. Achten Sie besonders auf Anzeigenflächen, die sich oben im ersten Darstellungsbereich befinden (above the fold). Diese Slots können zu einer unverhältnismäßig großen Layoutänderung führen, da sie mit höherer Wahrscheinlichkeit sichtbar sind, wenn die Anzeigeninhalte geladen werden.
Layout-Shifts messen
Cumulative Layout Shift (CLS) ist ein Core Web Vitals-Messwert, mit dem Sie die Auswirkungen von Layoutverschiebungen auf Ihre Website sowohl im Labor als auch im Feld quantifizieren können.
Im Labor
Mit Lab-Tools wird der CLS synthetisch gemessen. Das bedeutet, dass sie nicht auf echte Nutzerinteraktionen angewiesen sind. Sie eignen sich daher gut für die Verwendung in kontinuierlichen Integrations- und lokalen Entwicklungsabläufen. Diese Tools messen jedoch in der Regel nur die Leistung beim Laden der Seite und sind in den simulierbaren Bedingungen eingeschränkt. Daher sind die gemeldeten Werte möglicherweise niedriger als die, die ein echter Nutzer erleben würde.
Mit Publisher Ads Audits for Lighthouse können Sie den CLS messen, der speziell auf GPT-Anzeigen zurückzuführen ist. Weitere Informationen finden Sie in der Dokumentation zur Prüfung Anzeigenbezogene Layoutverschiebungen reduzieren.
Die Chrome DevTools können auch so konfiguriert werden, dass Layoutänderungen hervorgehoben werden, während Sie sich auf Ihrer Website bewegen. So können Sie Layoutänderungen manuell identifizieren, die in der Nähe von Anzeigenflächen auf Ihrer Seite auftreten.
Im Außendienst
Mit Feldtools wird der CLS gemessen, den echte Nutzer bei der Interaktion mit Ihrer Website erleben. Dieser Vorgang wird allgemein als Real User Monitoring (RUM) bezeichnet. Mit RUM können Sie beobachten, wie sich der CLS durch reale Faktoren wie Gerätefunktionen, Netzwerkbedingungen, Nutzerinteraktionen und Seitenpersonalisierungen beeinflusst lässt, die mit synthetischen Tests oft nur schwer oder gar nicht simuliert werden können.
Layoutverschiebungen minimieren
Die einzige Möglichkeit, Layoutänderungen zu vermeiden, besteht darin, mithilfe von CSS ausreichend Platz für einen bestimmten Anzeigen-Slot zu reservieren. Die effektivste Methode ist das Festlegen einer festen Höhe und Breite direkt im Anzeigen-Slot div. Das funktioniert zwar gut für statische Anzeigenflächen mit fester Größe, bei komplexeren Szenarien ist jedoch ein differenzierterer Ansatz erforderlich. In den folgenden Abschnitten werden einige gängige Szenarien erläutert.
Anzeigenflächen in mehreren Größen
Für Anzeigenflächen, für die mehrere Größen zulässig sind, empfehlen wir einen der folgenden Ansätze:
- Reserviere Speicherplatz für die größte Größe, die zum Ausliefern konfiguriert ist.
- Reserviere Speicherplatz für die kleinste Größe, die bereitgestellt werden soll.
- Hiermit wird Platz für die Größe reserviert, die am wahrscheinlichsten ausgeliefert wird. Diese wird anhand von Verlaufsdaten zur Auslieferung aus Google Ad Manager-Berichten ermittelt.
Den richtigen Lösungsansatz finden
Die effektivste Methode, Layoutverschiebungen zu vermeiden, besteht darin, Platz für die größte Größe zu reservieren, die für die Auslieferung konfiguriert ist. Diese Methode kann jedoch zu zusätzlichen leeren Bereichen um die Anzeige herum führen, wenn ein Creative ausgeliefert wird, das kleiner als die reservierte Größe ist. Wenn Sie die Anzeigenfläche so verkleinern, dass sie der Größe des ausgelieferten Creatives entspricht, kommt es zu einer zusätzlichen Layoutänderung. Wir empfehlen daher, dies zu vermeiden. Stattdessen können Sie vertikale und horizontale Zentrierung verwenden, um die visuelle Wirkung übermäßiger weißer Flächen zu reduzieren.
Wenn Sie dagegen Platz für die kleinste Größe reservieren, die für die Auslieferung konfiguriert ist, wird unnötiger Weißraum um Ihre Anzeige herum vermieden. Das kann eine gute Option sein, wenn Ihre Anzeigenfläche häufig mit kleineren Creatives ausgefüllt wird oder wenn alle unterstützten Größen der Anzeigenfläche ähnlich sind. Diese Methode führt jedoch zu einer Layoutänderung, wenn ein Creative ausgeliefert wird, das größer als die reservierte Größe ist. Diese Änderungen sind jedoch im Vergleich dazu, wenn kein Platz reserviert wird, in der Regel geringer.
Um eine Balance zwischen Leerraum und Layoutänderungen zu finden, können Sie für Ihre Anzeigenflächen eine „durchschnittliche“ Menge an Platz reservieren. Wenn Sie beispielsweise 100px vertikal reservieren, entsteht beim Ausliefern eines 320x50-Creatives ein kleiner weißer Bereich. Der CLS-Wert wird jedoch im Vergleich dazu reduziert, wenn Sie keinen Platz reservieren. Sie müssen mit verschiedenen Größen experimentieren, um das optimale Gleichgewicht für Ihre eigene Website zu finden.
Wenn Sie festlegen möchten, wie viel Speicherplatz für einen bestimmten Slot reserviert werden soll, können Sie anhand der bisherigen Daten zur Auslieferung aus den Google Ad Manager-Berichten fundiertere Entscheidungen treffen. Das lässt sich am besten anhand einiger Beispiele veranschaulichen.
Beispiel 1
| Creative-Größe (ausgeliefert) | Ad-Server-Impressionen (%) |
|---|---|
300x250 |
70 % |
320x50 |
30 % |
In diesem Fall kann die vertikale Reservierung von 250px den CLS erheblich senken, da die meisten ausgelieferten Creatives 300x250 sind.
Beispiel 2
| Creative-Größe (ausgeliefert) | Ad-Server-Impressionen (%) |
|---|---|
970x90 |
60 % |
728x90 |
10 % |
320x50 |
20 % |
728x250 |
5 % |
300x250 |
5 % |
In diesem Fall ist der Großteil der Anzeigen höchstens 90px hoch. Wenn Sie also 90px vertikal reservieren, wird in den meisten Fällen ein Layoutwechsel vermieden.
Platz reservieren
Wir empfehlen, die Größe des Anzeigen-Slots über die CSS-Properties min-height und min-width anzugeben:
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
Mit den Attributen „min-height“ und „min-width“ können Sie einen Mindestplatz für Ihren Anzeigenblock reservieren und gleichzeitig dem Browser erlauben, die Größe des Containers bei Bedarf zu erhöhen. So wird sichergestellt, dass keine Inhalte abgeschnitten werden, wenn ein größeres Creative ausgeliefert wird.
Sie können diese Methode mit CSS-Medienabfragen kombinieren, um unterschiedliche Mindestwerte für unterschiedliche Bildschirmgrößen anzugeben:
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
Das Reservieren von Platz mit JavaScript sollte vermieden werden, da dies zu einer Layoutverschiebung beim Laden des Scripts führen kann. Wenn Sie Platz mit CSS reservieren, lässt sich dieses Risiko vermeiden.
Flexible Anzeigenflächen
Für flexible Anzeigenflächen ist keine feste Anzahl von unterstützten Größen festgelegt. Stattdessen passen sich diese Slots automatisch an die Creative-Inhalte an, die dort ausgeliefert werden. So können sie Creatives mit unbestimmter Größe unterstützen. Daher ist es nicht möglich, Platz für diese Slots zu reservieren, bevor Anzeigeninhalte angefordert werden. Außerdem führen Anzeigen mit variabler Größe immer zu Layoutverschiebungen.
Um die Auswirkungen von Layoutänderungen bei der Verwendung von flexiblen Anzeigenflächen zu minimieren, empfehlen wir Folgendes:
- Verwenden Sie die Größe
fluidnur für Slots, die nicht auf der Startseite sichtbar sind. - Rufen Sie flexible Anzeigenflächen so früh wie möglich ab, um die Wahrscheinlichkeit zu minimieren, dass ein Nutzer sie in den Blick nimmt, bevor die Größe des Slots angepasst wird.
Anzeigenflächen minimieren und maximieren
Mit der Methode collapseEmptyDivs() können Sie Divs für Anzeigenflächen minimieren, damit sie keinen Platz auf der Seite einnehmen, wenn kein Anzeigencontent zu sehen ist. Diese Funktion sollte jedoch mit Vorsicht verwendet werden, da sie unbeabsichtigte Layoutänderungen verursachen kann. Wie im vorhergehenden Abschnitt erwähnt, kann das Zusammen- und Auseinanderfalten von Anzeigenflächen zu Layoutänderungen an zwei verschiedenen Stellen im Anzeigenlebenszyklus führen.
Wenn Sie diese Funktion verwenden müssen, können Sie die Auswirkungen von Layoutänderungen reduzieren, indem Sie Verlaufsdaten zur Auslieferung aus Ad Manager-Berichten verwenden, um die folgenden Best Practices umzusetzen:
- Slots, die wahrscheinlich belegt werden, sollten immer maximiert sein.
- Slots, die wahrscheinlich nicht belegt werden, sollten immer minimiert sein.
Eine Beispielimplementierung finden Sie im Beispiel Leere Anzeigenflächen minimieren.