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. Der dynamische Charakter von Anzeigen kann jedoch zu unerwarteten Layoutverschiebungen führen, die sich negativ auf die Nutzererfahrung auswirken und zu ernsthaften Problemen bei der Nutzerfreundlichkeit führen 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 normalerweise asynchron angefordert und fügen Ihrer Seite während oder nach dem Seitenaufbau dynamisch Inhalte hinzu. 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. - Wann der Anzeigeninhalt gerendert wird. Die Größe einer Anzeigenfläche kann geändert werden, wenn eine fluide Anzeige ausgeliefert wird oder nicht genügend Platz vorhanden ist. Je nach Konfiguration kann ein Slot an dieser Stelle auch maximiert oder minimiert werden.
- Nach dem Rendern des Anzeigeninhalts Bestimmte Creative-Typen werden maximiert, nachdem sie auf der Seite zu sehen 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-Shift messen
Cumulative Layout Shift (CLS) ist ein Core Web Vitals-Messwert, mit dem Sie die Auswirkungen von Layoutverschiebungen auf Ihrer Website sowohl im Lab als auch vor Ort messen 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 kontinuierliche Integration und lokale Entwicklungsabläufe. 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. Damit lassen sich Layoutverschiebungen in der Nähe von Anzeigenflächen auf Ihrer Seite manuell ermitteln.
Im Außendienst
Mit Feldtools wird die CLS gemessen, die Nutzer bei der Interaktion mit Ihrer Website erleben. Dieser Prozess 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
Layoutverschiebungen können vermieden werden, indem mithilfe von CSS genügend Platz für eine bestimmte Anzeigenfläche reserviert wird. 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:
- Reservieren Sie Platz für die größte Größe, die für die Auslieferung konfiguriert ist.
- Sie können Platz für die kleinste Größe reservieren, die für die Auslieferung konfiguriert ist.
- Reserviert Platz für die Größe, 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 einem zusätzlichen Leerraum um die Anzeige führen, falls 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 einen „durchschnittlichen“ 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 die CLS erheblich reduzieren, da die Mehrheit der ausgelieferten Creatives 300x250 ist.
Beispiel 2
| Creative-Größe (ausgeliefert) | Ad-Server-Impressionen (%) |
|---|---|
970x90 |
60 % |
728x90 |
10 % |
320x50 |
20 % |
728x250 |
5 % |
300x250 |
5 % |
In diesem Fall ist die Mehrzahl der Anzeigen höchstens 90px hoch. Wenn du 90px also vertikal reserviert, solltest du die meiste Zeit eine Layoutverschiebung vermeiden.
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 verschiedene 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
Anzeigenflächen mit flexibler Größe geben keinen festen Satz an unterstützten Größen an. 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, vor dem Anfordern von Anzeigencontent Platz für diese Anzeigenflächen zu reservieren. Anzeigen mit flexibler Größe führen 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 Shifts zur Folge haben 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 verringern, 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.