In der heutigen digitalen Welt ist Onlinewerbung ein wichtiger Bestandteil des kostenlosen Webs, das wir alle nutzen. Schlecht implementierte Anzeigen können jedoch zu einer langsameren Browsernutzung führen, Nutzer frustrieren und das Engagement verringern. Hier erfahren Sie, wie Sie Anzeigen effektiv laden, ohne die Seitengeschwindigkeit zu beeinträchtigen. So sorgen Sie für eine reibungslose Nutzererfahrung und maximieren die Umsatzchancen für Websiteinhaber.
Websites sind in hohem Maße auf Onlinewerbung als Haupteinnahmequelle angewiesen. Anzeigen auf Websites können jedoch manchmal zulasten der Nutzererfahrung und der Gesamtleistung der Seite gehen. Daher ist es wichtig, ein Gleichgewicht zwischen Monetarisierung und Leistung für Websiteinhaber und Werbetreibende sowie der Nutzererfahrung zu finden.
Stellen Sie sich eine Website vor, auf der Anzeigen in den Inhalten platziert werden, um einen hohen Umsatz zu erzielen. Die überwältigende Anzahl von Anzeigen frustriert die Nutzer jedoch, was zu einer schlechten Nutzererfahrung und hohen Absprungraten führt. Trotz des Potenzials für erhebliche Werbeeinnahmen beeinträchtigen Abbrüche den Erfolg der Website erheblich.
Am anderen Ende des Spektrums steht eine Website ohne Anzeigen. Diese werbefreie Umgebung zieht aufgrund der kurzen Ladezeiten und der reibungslosen Navigation eine große Anzahl von Nutzern an. Ohne eine Monetarisierungsstrategie ist es jedoch schwierig, mit der Website Einnahmen zu erzielen, was die langfristige Nachhaltigkeit und das Wachstum beeinträchtigen kann.
Beide Szenarien veranschaulichen, wie wichtig es ist, ein Gleichgewicht zwischen Monetarisierung, Nutzern und Leistung zu finden.
Core Web Vitals nutzen
Damit Anzeigen geladen werden können, ohne dass die Seitengeschwindigkeit beeinträchtigt wird, müssen die Core Web Vitals erfüllt werden. Die Core Web Vitals umfassen Messwerte wie Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) und Interaction to Next Paint (INP). Mit diesen Messwerten wird die Nutzerfreundlichkeit Ihrer Website bewertet.
Largest Contentful Paint (LCP)
Die Optimierung des LCP ist wichtig, da dieser Messwert angibt, wie lange es dauert, bis das größte Inhaltselement im Darstellungsbereich sichtbar wird. Durch die Minimierung der Ladezeit von Anzeigeninhalten und die Priorisierung von asynchronen Ladetechniken können Websiteinhaber die LCP und die Renderingzeit der wichtigsten Inhaltselemente auf einer Seite verringern.
Interaction to Next Paint (INP)
Zweitens ist die Verbesserung von INP für eine responsive Nutzererfahrung entscheidend. Mit INP wird die Latenz für jeden Klick, jede Berührung und jede Tastaturinteraktion gemessen, die während der Lebensdauer einer Seite stattfindet. Der sich daraus ergebende Wert ist meistens die Interaktion, die am längsten gedauert hat. Er gibt Aufschluss darüber, wie schnell eine Seite auf Nutzerinteraktionen reagieren kann.
Anzeigen, die die Nutzerinteraktionen verzögern, wirken sich negativ auf die Anzeigenleistung aus. Das kann für Nutzer frustrierend sein, da die App in extremen Fällen sogar unzuverlässig erscheint. Wenn Sie Lazy Loading für Anzeigen implementieren und die Ausführung nicht kritischer JavaScript-Codeblöcke verschieben, lässt sich der INP einer Seite reduzieren und die Reaktionsfähigkeit der Seite insgesamt verbessern.
Cumulative Layout Shift (CLS)
Der CLS misst schließlich die visuelle Stabilität einer Seite, indem er das Ausmaß der unerwarteten Layoutverschiebungen misst, die beim Seitenaufbau auftreten. Anzeigen, die dynamisch geladen oder deren Größe geändert wird, können zu einer Instabilität des Layouts führen. Das wirkt sich negativ auf die Nutzerfreundlichkeit aus, da Nutzer entweder den Überblick über ihre Position auf der Seite verlieren oder aufgrund unerwarteter Layoutänderungen versehentlich auf die falschen Elemente tippen. Um dies zu vermeiden, sollten Websiteinhaber CLS optimieren, damit für die Anzeigen genügend Platz ist, um Layoutverschiebungen zu vermeiden. Außerdem sollten die Anzeigengrößen so optimiert werden, dass plötzliche Reflows des Contents vermieden werden.
Webseite in verschiedene Inhaltsblöcke strukturieren
Wenn Sie Ihre Webseite mit Inhaltsblöcken für Text, Bilder und Anzeigeninhalte strukturieren und dabei die CSS-Eigenschaft content-visibility: verwenden, lässt sich die Gesamtdauer des Renderings in modernen Browsern erheblich verbessern.
Wenn Sie die content-visibility:-Property strategisch in diesen Inhaltsblöcken anwenden, optimieren Sie den Rendering-Prozess für Text-, Bild- und Anzeigeninhalte. So wird sichergestellt, dass nur der Content im Darstellungsbereich vollständig gerendert wird, was zu einem schnelleren anfänglichen Seitenaufbau und flüssigeren Nutzerinteraktionen führt. Diese Leistungssteigerung ist besonders bei langen Seiten oder Seiten mit vielen Anzeigen von Vorteil.
Wichtige Anzeigenflächen priorisieren
Nicht alle Anzeigenflächen sind gleich. Anzeigenflächen, die ohne Scrollen sichtbar sind, sind beispielsweise in Bezug auf Sichtbarkeit und Monetarisierung in der Regel wertvoller als solche, die sich weiter unten befinden. Das liegt daran, dass „above the fold“-Anzeigen von Nutzern eher gesehen werden, da sie im ersten Darstellungsbereich ohne Scrollen sichtbar sind. Anzeigen, die „below the fold“ (mit Scrollen sichtbar) sind, werden erst sichtbar, wenn der Nutzer weit genug nach unten scrollt.
„Above the fold“-Anzeigen
Anzeigenflächen, die „above the fold“ ausgeliefert werden, beziehen sich auf den Teil einer Webseite, der ohne Scrollen sichtbar ist. Sie haben einen hohen Stellenwert bei digitaler Werbung. Diese Prime-Placements sind aus mehreren Gründen wertvoll:
- Anzeigen, die „Above the fold“ (ohne Scrollen sichtbar) platziert sind, sind für Nutzer sofort sichtbar, wenn eine Webseite geladen wird. Nutzer nehmen diese Anzeigen mit höherer Wahrscheinlichkeit wahr und interagieren mit ihnen. Das führt zu höheren Klickraten.
- Werbetreibende betrachten den oberen Bereich einer Webseite oft als die wertvollste Werbefläche. Der Bereich ist der erste Eindruck, den Nutzer beim Besuch einer Website erhalten. Daher ist er ein entscheidender Bereich für wirkungsvolle und Premium-Anzeigen.
- Anzeigen, die ohne Scrollen sichtbar sind, haben die höchste Sichtbarkeitsrate, da sie sich direkt im Blickfeld des Nutzers befinden. Dadurch wird sichergestellt, dass die Mehrheit der Nutzer, die die Seite besuchen, diese Anzeigen sieht, ohne scrollen zu müssen.
Es ist jedoch wichtig, bei der Verwendung von Above-the-Fold-Anzeigenflächen in der Startansicht ein Gleichgewicht zwischen Monetarisierung und Nutzerfreundlichkeit zu finden. Hier sind einige wichtige Aspekte.
- Anzeigenflächen im ersten Bildschirm sollten so schnell wie möglich im ursprünglichen Darstellungsbereich des Nutzers geladen werden. Langsam ladende Anzeigen können sich negativ auf die Nutzerfreundlichkeit auswirken und die Absprungraten erhöhen. Die Ladezeiten von Anzeigen müssen optimiert werden, damit die Nutzererfahrung und das Surfen reibungslos ablaufen.
- Auch wenn die Anzeigen-Placements „above the fold“ wertvoll sind, sollten diese nicht mit zu vielen Anzeigen überladen werden. Zu viele Anzeigen überladen die Seite, beeinträchtigen die Lesbarkeit der Inhalte und mindern die Nutzerfreundlichkeit. Achten Sie darauf, ein Gleichgewicht zwischen Monetarisierung und einem klaren, nutzerfreundlichen Layout zu finden.
- Achten Sie darauf, dass Above-the-Fold-Anzeigenflächen mit verschiedenen Bildschirmgrößen und Geräten kompatibel sind. Praktiken für responsives Webdesign können dazu beitragen, ein einheitliches und visuell ansprechendes Layout zu erhalten, unabhängig von der Bildschirmgröße des Nutzers.
Anzeigen „below the fold“ (mit Scrollen sichtbar)
Anzeigenflächen „below the fold“ (mit Scrollen sichtbar) – also Anzeigen, die in dem Bereich einer Webseite platziert sind, der erst nach dem Scrollen sichtbar wird – sind in der digitalen Anzeigenbranche ebenfalls sehr wertvoll. Diese Placements bieten einzigartige Vorteile, die Placements „above the fold“ ergänzen.
Anzeigen, die „below the fold“ platziert sind, profitieren von Nutzern, die scrollen, um weitere Inhalte zu sehen. Diese Placements wecken die Aufmerksamkeit von interessierten Nutzern, die aktiv nach zusätzlichen Informationen suchen, und sind somit für Unternehmen wertvoll, die komplexere Botschaften oder Storytelling vermitteln möchten.
- Anzeigenflächen, die anfangs nicht sichtbar sind, können an den neben ihnen stehenden Inhalt angepasst werden. So lässt sich die Kontextrelevanz verbessern. Diese Ausrichtung kann zu mehr Nutzerinteraktionen führen, da Nutzer Anzeigen sehen, die zu den Inhalten passen, die sie sich ansehen.
- Wenn sie gut gestaltet sind, können Anzeigen vom Typ „below the fold“ (mit Scrollen sichtbar) nahtlos in den umgebenden Content integriert werden und wirken für Nutzer weniger störend. Diese Integration, auch als native Werbung bezeichnet, kann zu einer harmonischeren Nutzererfahrung führen.
- Scroll-Anzeigen bieten mehr Flexibilität bei Design und Format und viel Platz für Experimente. Videoanzeigen, interaktive Elemente und größere Bilder können mit Lazy Loading geladen werden, um die Aufmerksamkeit der Nutzer zu wecken, ohne die Nutzererfahrung zu beeinträchtigen.
Bei Anzeigen-Placements vom Typ „below the fold“ (mit Scrollen sichtbar) sollten Sie Folgendes beachten:
- Anzeigen-Placements unterhalb des Folds können zwar effektiv sein, aber Nutzer müssen dazu angeregt werden, zu scrollen, um sie zu sehen. Visuelle Hinweise oder Content-Teaser können Nutzer dazu anregen, mehr zu entdecken, und so die Wahrscheinlichkeit erhöhen, dass Anzeigen gesehen werden.
- Die Platzierung der Anzeigen „below the fold“ (mit Scrollen sichtbar) sollte die Qualität und Lesbarkeit des Contents nicht beeinträchtigen. Achten Sie auf ein ausgewogenes Verhältnis zwischen Anzeigen und Inhalten, damit Nutzer nicht überfordert werden und die Nutzerfreundlichkeit erhalten bleibt.
- Im Gegensatz zu Anzeigen-Placements, die ohne Scrollen sichtbar sind, müssen Anzeigen, die „below the fold“ (mit Scrollen sichtbar) platziert sind, möglicherweise nicht sofort geladen werden. Wenn Sie das Laden dieser Anzeigen verzögern, bis sie kurz vor dem Darstellungsbereich des Nutzers erscheinen, kann dies dazu beitragen, die Ladegeschwindigkeit der Seite insgesamt zu verbessern und die anfänglichen Rendering-Zeiten der Seite zu verkürzen.
Bei strategischer Verwendung können Anzeigen unterhalb des Folds Anzeigen oberhalb des Folds ergänzen und eine Plattform für kreative Anzeigenformate und kontextbezogene Relevanz bieten. Die Sichtbarkeit zu optimieren, Inhalte auszubalancieren und das Timing der Anzeigenauslieferung zu verwalten, sind jedoch wichtige Aspekte für eine positive Nutzererfahrung.
Aktuelle Best Practices für Google Publisher-Tags (GPT):
- Allgemeine Best Practices
- Best Practices für Anzeigen
- Layout-Verschiebung minimieren
- Leistung beobachten
- Häufige Fehler bei der Implementierung vermeiden
Anzeigen nach Bedarf per Lazy Loading laden
Beim Lazy Loading wird das Laden nicht kritischer Ressourcen verzögert, bis sie benötigt werden. Wenn Sie Lazy Loading für Anzeigen verwenden, die nicht sofort sichtbar sind (d. h. Anzeigen, die sich unterhalb des sichtbaren Bereichs befinden), werden sie erst geladen, wenn sie in den Blick kommen. So wird die Bandbreite geschont und die Seitenladegeschwindigkeit insgesamt verbessert. Browser unterstützen jetzt natives Lazy Loading für iFrames mit einem loading=lazy-Attribut.
Durch die Implementierung von Lazy Loading werden Anzeigen dynamisch abgerufen, wenn sie kurz vor dem Eintritt in den Darstellungsbereich des Nutzers stehen. Dadurch werden die anfängliche Ladezeit und die Gesamtblockierungszeit (Total Blocking Time, TBT), die stark mit INP korreliert, im Hauptthread in diesem entscheidenden Teil des Seitenlebenszyklus reduziert. Dadurch werden negative Auswirkungen auf die Nutzererfahrung minimiert.
Anzeigen aktualisieren, ohne die Seite zu aktualisieren
Eine weitere Möglichkeit, die Seitenleistung mit dem Laden von Anzeigen in Einklang zu bringen, besteht darin, Anzeigen alle 30 bis 240 Sekunden1 zu aktualisieren, ohne die gesamte Seite neu zu laden. Dieser Ansatz ermöglicht dynamische Aktualisierungen von Anzeigeninhalten, ohne die Nutzung zu beeinträchtigen oder unnötige Verzögerungen zu verursachen.
In mobilen Apps führt das Aktualisieren von Anzeigen in vorhandenen Webviews zu einer besseren Leistung als das Neuladen der gesamten Seite oder das Erstellen neuer WebViews. Dadurch wird der Daten- und Ressourcenoverhead minimiert, was zu schnelleren Inhaltsaktualisierungen und einer reibungsloseren Nutzererfahrung ohne die Latenz führt, die mit einem Neustart verbunden ist.
Durch die asynchrone Aktualisierung von Anzeigen können Websiteinhaber den Seitencontent beibehalten und gleichzeitig den Anzeigeninhalt direkt und in Echtzeit aktualisieren. Dadurch wird nicht nur die Seitenladezeit verbessert, da die gesamte Seite nicht neu geladen werden muss, sondern auch dafür gesorgt, dass die angezeigten Anzeigen relevant und ansprechend bleiben. So können Websiteinhaber ein Gleichgewicht zwischen Monetarisierung und Leistung finden, zeitnahe und ansprechende Anzeigeninhalte präsentieren und gleichzeitig negative Auswirkungen auf die Nutzerfreundlichkeit minimieren.
Das Aktualisieren von Anzeigenflächen ist besonders auf Seiten sinnvoll, auf denen Nutzer in der Regel länger verweilen, z. B. auf Rezeptseiten, bei DIY-Anleitungen oder auf anderen inhaltsreichen Websites. Auf einer Seite mit DIY-Anleitungen, auf der Nutzer viel Zeit mit dem Ansehen der Anleitungen verbringen, können Sie die Anzeigenflächen beispielsweise in den Pausen zwischen den einzelnen Schritten oder beim Ansehen von Bildgalerien strategisch aktualisieren. So können Sie sowohl die Nutzerfreundlichkeit als auch die Werbeeinnahmen verbessern. Auf einer Rezeptseite kann das Aktualisieren von Anzeigenflächen, nachdem Nutzer durch die Zutatenliste oder Anweisungen gescrollt haben, das Nutzerinteresse aufrechterhalten.
Asynchrones Laden priorisieren
Eine der wirkungsvollsten Strategien zur Verbesserung der Seitengeschwindigkeit bei der Anzeigenbereitstellung ist das asynchrone Laden. Beim asynchronen Laden werden Anzeigen unabhängig vom Inhalt der Hauptwebseite geladen. So kann die Seite weiter gerendert und interaktiv werden, ohne dass auf das vollständige Laden der Anzeigen gewartet werden muss. Dadurch wird die wahrgenommene Ladezeit deutlich reduziert und die Nutzerzufriedenheit erhöht.
Fügen Sie das Attribut async in die Definition des Script-Tags ein. Beispiel:
AdSense:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
AdSense (automatische Anzeigen):
<script async data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Google Publisher-Tag:
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
Optimieren von Anzeigengrößen, -position und -formaten
Größe, Position und Format von Anzeigen können sich erheblich auf die Seitengeschwindigkeit auswirken. Große Anzeigen können das Laden der Seite verlangsamen und zu Frustration bei den Nutzern führen. Deshalb sollten Websiteinhaber eng mit Werbetreibenden zusammenarbeiten, um Anzeigengrößen und ‐formate zu optimieren. Wenn Sie die Verwendung komprimierter Bildformate und effizienter Creative-Designs fördern, lassen sich die Dateigrößen reduzieren, ohne die visuelle Qualität zu beeinträchtigen. Durch diese Optimierungen wird nicht nur die Seitengeschwindigkeit verbessert, sondern auch der Datenverbrauch für Nutzer mit begrenzter Bandbreite minimiert.
Better Ads Standards
Es ist wichtig, die Better Ads Standards einzuhalten, wenn Anzeigen ausgeliefert werden. Dadurch wird nicht nur die Nutzerfreundlichkeit verbessert, da aufdringliche und störende Anzeigenformate reduziert werden, sondern auch die Position der Anzeigenauslieferung und die Seitenladezeit.
Wenn Sie diese Standards einhalten, werden Anzeigen mit höherer Wahrscheinlichkeit an Positionen platziert, die weniger störend und aufdringlich sind. Das kann zu mehr Nutzerinteraktionen und Klickraten führen.
Darüber hinaus kann die Einhaltung dieser Richtlinien auch zu kürzeren Seitenladezeiten führen, da schlanke und weniger ressourcenintensive Anzeigenformate bevorzugt werden. Dadurch wird die Gesamtleistung der Website und die Zufriedenheit der Nutzer verbessert.
Strategische Bewertung von Werbenetzwerken und Anbietern
Nicht alle Werbenetzwerke und Anbieter sind in Bezug auf die Leistung gleich. Websiteinhaber sollten die Leistung verschiedener Werbenetzwerke, Header Bidding-Implementierungen und Anbieter sorgfältig bewerten, um eine optimale Seitengeschwindigkeit zu gewährleisten.
Partnerschaften mit Anbietern, die Geschwindigkeit priorisieren und nachweislich effizient schlanke Anzeigeninhalte ausliefern, können die Seitenleistung erheblich steigern und die Nutzerfreundlichkeit verbessern.
Fazit
Für Websiteinhaber, die eine hervorragende Nutzererfahrung bieten und gleichzeitig den Umsatz durch Onlinewerbung maximieren möchten, ist es entscheidend, ein Gleichgewicht zwischen Monetarisierung und Leistung zu finden.
Mithilfe von Techniken wie asynchronem Laden, Lazy Loading, der Optimierung von Anzeigenformaten und ‑größen, intelligenter Caching-Technologien sowie einer sorgfältigen Auswahl von Werbenetzwerken, Header Bidding-Plattformen und Anbietern können Websiteinhaber die Herausforderungen beim Laden von Anzeigen meistern, ohne die Seitenleistung zu beeinträchtigen. Die Priorisierung einer effizienten Anzeigenschaltung sorgt letztendlich für die Schichtung der Nutzer, ein erhöhtes Engagement und eine nachhaltige Umsatzgenerierung.
Fußnoten
- Für Ad-Server gelten möglicherweise Einschränkungen und Anforderungen. In Ad Manager müssen Publisher beispielsweise ihr Inventar deklarieren, das auf der Benutzeroberfläche aktualisiert wird. Einige Käufer benötigen eine Aktualisierungserklärung von mindestens 240 Sekunden. Im Allgemeinen gilt: Je länger das Intervall zwischen den einzelnen Aktualisierungen ist, desto attraktiver wird Ihr Inventar für Käufer. Weitere Informationen