Layoutverschiebung minimieren

Eine Layoutverschiebung tritt auf, wenn ein sichtbares Element auf Ihrer Seite die Position oder Größe ändert, was sich auf die Position des umgebenden Inhalts auswirkt. Manchmal ist die Verschiebung vorgesehen, z. B. wenn ein Container als Ergebnis einer Nutzeraktion maximiert wird. Die dynamische Art von Anzeigen kann jedoch zu unerwarteten Layoutverschiebungen führen, die sich negativ auf die Nutzererfahrung auswirken und zu ernsthaften Problemen mit der Nutzerfreundlichkeit führen können.

In diesem Leitfaden wird erläutert, wie Layout Shifts bei der Arbeit mit Google Publisher-Tags (GPT) gemessen und minimiert werden können.

So verursachen Anzeigen Layoutverschiebungen

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 weiterhin geladen und der Nutzer sieht möglicherweise Inhalte, die keine Anzeigen sind. Wenn nicht genügend Platz für die zu ladenden Anzeigen reserviert ist, werden sichtbare Inhalte, die keine Anzeigen sind, nach dem Hinzufügen zu einer Seite verschoben.

Wenn Sie mit Google Publisher-Tags arbeiten, gibt es einige Punkte im Anzeigenlebenszyklus, an denen Layoutverschiebungen auftreten können:

1. Wenn display() aufgerufen wird. Ein Slot kann je nach Konfiguration maximiert oder minimiert werden.
2. Wenn Anzeigeninhalte gerendert werden. Die Größe einer Anzeigenfläche kann angepasst werden, wenn eine flexible Anzeige ausgeliefert wird oder nicht genügend Platz verfügbar ist. Ein Slot kann an diesem Punkt auch maximiert oder minimiert werden, je nachdem, wie er konfiguriert wurde.
3. Nach dem Rendern des Anzeigeninhalts Bestimmte Creative-Typen sind so konzipiert, dass sie maximiert werden, nachdem sie auf der Seite ausgeliefert wurden.

Je höher eine Anzeigenfläche im Darstellungsbereich ist, desto mehr Inhalte können verschoben werden. Seien Sie besonders vorsichtig bei Slots, die sich oben im ersten Darstellungsbereich befinden (ohne Scrollen sichtbar). Diese Anzeigenflächen können zu einem unverhältnismäßig hohen Layout Shift führen, da sie mit größerer Wahrscheinlichkeit sichtbar sind, wenn ihr Anzeigeninhalt geladen wird.

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 in der Praxis messen können.

Wichtig :In den Standards für Core Web Vitals wird empfohlen, dass der CLS-Wert des 75.Perzentils Ihrer Website unter 0,1 liegt und als „gut“ eingestuft wird. Dieser Standard deckt alle Layoutverschiebungen auf Ihrer Website ab, nicht nur solche, die durch Anzeigen verursacht werden.

Im Labor

Lab-Tools messen CLS synthetisch. Das bedeutet, dass sie nicht auf echte Nutzerinteraktionen angewiesen sind. Daher eignen sie sich gut für den Einsatz in Continuous Integration und lokalen Entwicklungsworkflows. Diese Tools messen jedoch in der Regel nur die Leistung während des Seitenaufbaus und sind in den Bedingungen, die sie simulieren können, eingeschränkt. Daher können die gemeldeten Werte niedriger sein als die Werte, die ein echter Nutzer sehen würde.

Mit dem Tool Publisher Ads Audits for Lighthouse kann der CLS-Wert gemessen werden, der speziell auf GPT-Anzeigen zurückzuführen ist. Weitere Informationen finden Sie in der Audit-Dokumentation zum Reduzieren von anzeigenbezogenen Layoutverschiebungen.

Die Chrome-Entwicklertools können auch so konfiguriert werden, dass Layoutverschiebungen beim Navigieren auf Ihrer Website hervorgehoben werden. Damit lassen sich Layoutverschiebungen in der Nähe von Anzeigenflächen auf Ihrer Seite manuell identifizieren.

Im Außendienst

Mit Feldtools wird der CLS-Wert realer Nutzer bei der Interaktion mit Ihrer Website gemessen. Dieser Vorgang wird allgemein als echtes Nutzermonitoring (Real User Monitoring, RUM) bezeichnet. Mit RUM können Sie beobachten, wie sich CLS durch reale Faktoren wie Gerätefunktionen, Netzwerkbedingungen, Nutzerinteraktionen und Seitenpersonalisierung auswirkt. Diese lassen sich mit synthetischen Tests oft nur schwer oder gar nicht simulieren.

Hinweis: Sie können auch die Layout Instability API verwenden, um CLS manuell im Feld zu messen.

Layout Shift minimieren

Die einzige garantierte Möglichkeit, Layoutverschiebungen zu vermeiden, besteht darin, mit CSS ausreichend Platz für eine bestimmte Anzeigenfläche zu reservieren. Am effektivsten ist es, für die Anzeigenfläche div eine feste Höhe und Breite festzulegen. Während dies bei statischen Anzeigenflächen mit fester Größe gut funktioniert, ist bei komplexeren Szenarien möglicherweise 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, die mehrere Größen akzeptieren, empfehlen wir einen der folgenden Ansätze:

• Reservieren Sie Platz für die größte für die Auslieferung konfigurierte Größe.
• Reservieren Sie Speicherplatz für die kleinste für die Bereitstellung konfigurierte Größe.
• Reservieren Sie Platz für die Größe, die wahrscheinlich ausgeliefert wird. Dazu analysieren Sie die bisherigen Fülldaten aus der Google Ad Manager-Berichterstellung.

Achtung :Achten Sie auf die Maximierung der Anzeigenfläche und die Kontraktionseinstellungen, die sich auf den Größenbereich auswirken können, der auf Ihren Anzeigenflächen ausgeliefert werden kann.

Den richtigen Lösungsansatz finden

Layoutverschiebungen lassen sich am effektivsten vermeiden, wenn Sie Platz für die größte für die Bereitstellung konfigurierte Größe reservieren. Bei dieser Methode kann jedoch für den Fall, dass ein Creative ausgeliefert wird, das kleiner als die reservierte Größe ist, ein zusätzlicher Leerraum um die Anzeige herum entstehen. Das Verkleinern der Anzeigenfläche, um sie an die Größe des bereitgestellten Creatives anzupassen, würde einen zusätzlichen Layout Shift nach sich ziehen. Daher wird empfohlen, dies zu vermeiden. Stattdessen können Sie die vertikale und horizontale Zentrierung verwenden, um die visuellen Auswirkungen von überschüssigem Leerraum zu reduzieren.

Wenn Sie jedoch Platz für die kleinste für die Auslieferung konfigurierte Größe reservieren, wird überflüssige Fläche um Ihre Anzeige vermieden. Das kann eine gute Option sein, wenn Ihre Anzeigenfläche häufig mit kleineren Creatives gefüllt wird oder alle unterstützten Größen ähnlich sind. Bei dieser Methode kommt es jedoch zu einer Layoutverschiebung, wenn ein Creative ausgeliefert wird, das die reservierte Größe überschreitet. Solche Verschiebungen sind jedoch in der Regel kleiner, wenn kein Platz reserviert wird.

Sie können einen „durchschnittlichen“ Platz für Ihre Anzeigenflächen reservieren, um ein Gleichgewicht zwischen Leerraum und Layoutverschiebungen zu finden. Wenn Sie beispielsweise 100px vertikal reservieren, entsteht ein kleiner Leerraum, wenn ein 320x50-Creative ausgeliefert wird. Dadurch sinkt jedoch der CLS-Wert, wenn überhaupt kein Platz reserviert wird. Experimentieren Sie einfach mit verschiedenen Größen, um die beste Balance für Ihre eigene Website zu finden.

Wenn Sie ermitteln, wie viel Platz für einen bestimmten Slot reserviert werden soll, können Sie die historischen Fülldaten aus der Google Ad Manager-Berichterstellung untersuchen, um eine fundiertere Entscheidung zu treffen. Dies lässt sich am besten anhand einiger Beispiele veranschaulichen.

Hinweis :Die hier gezeigten Beispiele veranschaulichen nur einen Teil des Prozesses, bei dem bestimmt wird, wie viel Platz reserviert wird. Nachdem Sie die Änderungen vorgenommen haben, sollten Sie die Felddaten überprüfen und weitere Anpassungen vornehmen, bis der 75.Perzentil-CLS Ihrer Website die Benchmark von 0,1 erreicht.

Beispiel 1

Creative-Größe (ausgeliefert)	Ad-Server-Impressionen (%)
300x250	70 %
320x50	30%

In diesem Fall kann durch eine vertikale Reservierung von 250px der CLS-Wert erheblich reduziert werden, da der Großteil 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 Mehrheit der Anzeigen höchstens 90px hoch. Wenn Sie 90px also vertikal reservieren, sollte ein Layout Shift in der Regel vermieden werden.

Gruppenbereiche reservieren

Wir empfehlen Ihnen, dieses Problem zu beheben, indem Sie die Größe Ihrer Anzeigenfläche in den CSS-Eigenschaften min-height und min-width angeben:

<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>

Mit den Attributen „min-height“ und „min-width“ können Sie ein wenig Platz für Ihre Anzeigenfläche reservieren und gleichzeitig zulassen, dass der Browser die Größe des Containers nach Bedarf vergrößert. So wird dafür gesorgt, dass Inhalte bei der Auslieferung eines größeren Creatives nicht abgeschnitten werden.

Sie können diese Technik 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 einem Layoutverschiebung beim Laden des Skripts führen kann. Wenn Sie mit CSS Speicherplatz reservieren, können Sie dieses Risiko vermeiden.

Flexible Anzeigenflächen

Für Anzeigenflächen mit flexibler Größe sind keine festen Größen angegeben, die unterstützt werden. Stattdessen wird die Größe dieser Anzeigenflächen automatisch angepasst, damit sie in den ausgelieferten Creative-Inhalt passen. So können Creatives von unbestimmter Größe unterstützt werden. Daher ist es nicht möglich, vor dem Anfordern von Anzeigeninhalt Platz für diese Anzeigenflächen zu reservieren. Anzeigen mit flexibler Größe führen immer zu Layoutverschiebungen.

Wir empfehlen Folgendes, um die Auswirkungen von Layoutverschiebungen bei Anzeigenflächen mit flexibler Größe zu verringern:

• Verwende die Größe fluid nur für Slots „below the fold“ (mit Scrollen sichtbar).
• Rufen Sie flexible Slots so früh wie möglich ab, um die Wahrscheinlichkeit zu minimieren, dass ein Nutzer sie durch Scrollen scrollt, bevor die Größe des Slots angepasst wird.

Minimieren und Maximieren von Anzeigenflächen

Mit der Methode collapseEmptyDivs() können Sie Divs von Anzeigenflächen minimieren, damit sie keinen Platz auf der Seite einnehmen, wenn kein Anzeigeninhalt vorhanden ist. Diese Funktion sollte jedoch mit Vorsicht verwendet werden, da sie unbeabsichtigte Layoutverschiebungen verursachen kann. Wie im vorherigen Abschnitt erwähnt, können minimierbare und maximierbare Anzeigenflächen an zwei verschiedenen Punkten im Anzeigenlebenszyklus Layoutverschiebungen verursachen.

Wenn Sie diese Funktion nutzen müssen, können Sie die Auswirkungen von Layoutverschiebungen reduzieren, indem Sie auf der Grundlage bisheriger Fülldaten aus der Ad Manager-Berichterstellung die folgenden Best Practices umsetzen:

• Anzeigenflächen, die wahrscheinlich gefüllt werden, sollten zu Beginn immer erweitert sein.
• Anzeigenflächen, die wahrscheinlich nicht gefüllt werden, sollten immer minimiert beginnen.

Ein Implementierungsbeispiel finden Sie unter Leere Anzeigenflächen minimieren.