In der digitalen Welt von heute ist Online-Werbung ein wichtiger Bestandteil des kostenlosen Internets, das wir alle mögen. Schlecht implementierte Anzeigen können jedoch das Surfen im Web verlangsamen, die Nutzer frustrieren und die Interaktion beeinträchtigen. Hier erfahren Sie, wie Sie Anzeigen effektiv laden, ohne die Seitengeschwindigkeit zu beeinträchtigen, für eine nahtlose Nutzererfahrung zu sorgen und die Umsatzmöglichkeiten für Websiteinhaber zu maximieren.
Websites sind in hohem Maße auf Online-Werbung als primäre Einnahmequelle angewiesen. Anzeigen auf Websites können jedoch manchmal zulasten der Nutzererfahrung und der Gesamtleistung der Seite gehen. Daher ist es von entscheidender Bedeutung, für Websiteinhaber und Werbetreibende ein Gleichgewicht zwischen Monetarisierung, Leistung und Nutzerfreundlichkeit zu finden.
Stellen Sie sich eine Website vor, auf der ausgiebige Anzeigen innerhalb des Contents platziert werden, um hohe Einnahmen zu erzielen. Die übermäßige Anzahl von Anzeigen frustriert die Nutzer jedoch, was zu einer schlechten Nutzererfahrung und hohen Absprungraten führt. Trotz des Potenzials für beträchtliche Einnahmen aus Anzeigen, erschweren der Abbruch den Erfolg der Website erheblich.
Am anderen Ende des Spektrums stehen Websites ohne Anzeigen. Diese werbefreie Umgebung zieht aufgrund der kurzen Ladezeiten und des nutzerfreundlichen Surfens viele Nutzer an. Ohne eine Monetarisierungsstrategie hat die Website jedoch Schwierigkeiten, Umsätze zu generieren, was die langfristige Nachhaltigkeit und das Wachstum der Website beeinträchtigen könnte.
Beide Szenarien veranschaulichen, wie wichtig es ist, ein Gleichgewicht zwischen Monetarisierung, Nutzern und Leistung zu schaffen.
Core Web Vitals nutzen
Damit Anzeigen geladen werden können, ohne dabei die Seitengeschwindigkeit zu beeinträchtigen, müssen die Core Web Vitals eingehalten werden. Core Web Vitals, bestehend aus Messwerten wie Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) und Interaction to Next Paint (INP), sind Messwerte für die Nutzerfreundlichkeit, anhand derer Sie die Nutzerfreundlichkeit Ihrer Website messen.
Largest Contentful Paint (LCP)
Der Schwerpunkt auf der LCP-Optimierung ist entscheidend, da dieser Messwert misst, wie lange es dauert, bis das größte Inhaltselement im Darstellungsbereich sichtbar ist. Wenn Websiteinhaber die Ladezeit von Anzeigeninhalten minimieren und asynchrone Ladetechniken priorisieren, können sie den LCP sowie die Renderingzeit der auffälligsten Inhaltselemente auf einer Seite reduzieren.
Interaktion mit nächstem Paint (INP)
Außerdem ist die Verbesserung von INP für eine responsive Nutzererfahrung entscheidend. INP misst die Latenz bei jedem Klick, jedem Tippen und jeder Interaktion über die Tastatur während des gesamten Lebenszyklus einer Seite. 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 Nutzerinteraktionen verzögern, wirken sich negativ auf INP aus. Dies kann Nutzende frustrieren, da sie sich träge oder in extremen Fällen sogar völlig kaputt anfühlen. Wenn Sie Lazy Loading für Anzeigen implementieren und die Ausführung nicht kritischer JavaScripts aufschieben, können Sie den INP-Wert einer Seite reduzieren und so 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 werden oder ihre Größe dynamisch ändern, können zu einer Instabilität des Layouts führen, was zu einer schlechten Nutzererfahrung führt, da Nutzer entweder den Überblick darüber verlieren, wo sie sich auf einer Seite befinden, oder aufgrund unerwarteter Layoutverschiebungen ungewollt 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 Content-Blöcken für Text-, Bild- und Anzeigencontent strukturieren und gleichzeitig die CSS-Eigenschaft content-visibility: verwenden, kann die gesamte Renderingzeit in modernen Browsern erheblich verkürzt werden.
Durch den strategischen Einsatz der content-visibility:-Eigenschaft innerhalb dieser Inhaltsblöcke wird der Renderingprozess für Text-, Bild- und Anzeigencontent optimiert. 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 nützlich, wenn es sich um langwierige oder Seiten mit vielen Anzeigen handelt.
Wichtige Anzeigenflächen priorisieren
Nicht alle Anzeigenflächen sind gleich. Beispielsweise sind Anzeigenflächen "above the fold" (ohne Scrollen sichtbar) in der Regel in Bezug auf Sichtbarkeit und Monetarisierung wertvoller als Anzeigenflächen im "below the fold"-Bereich. Das liegt daran, dass „above the fold“-Anzeigen von Nutzern eher gesehen werden, da sie im ersten Darstellungsbereich ohne Scrollen sichtbar sind. „Below the fold“-Anzeigen werden sichtbar, wenn der Nutzer auf der Seite weit genug nach unten scrollt, um sie zu sehen.
„Above the fold“-Anzeigen
„above the fold“-Anzeigenflächen beziehen sich auf den Teil einer Webseite, der ohne Scrollen sichtbar ist und einen bedeutenden Wert in der digitalen Werbung darstellt. Diese erstklassigen Placements werden aus mehreren Gründen als wertvoll angesehen:
- Anzeigen, die „above the fold“ platziert werden, sind für die Nutzer sofort nach dem Laden einer Webseite sichtbar. Nutzer werden diese Anzeigen mit größerer Wahrscheinlichkeit bemerken und mit ihnen interagieren, was zu höheren Klickraten führt.
- Werbetreibende betrachten oft den oberen Teil einer Webseite als den wertvollsten Immobilienbereich. Es ist der erste Eindruck, den Nutzer beim Besuch einer Website erhalten. Es ist also ein entscheidender Bereich, um wirkungsvolle Anzeigen und Premium-Anzeigen zu präsentieren.
- Anzeigen, die ohne Scrollen sichtbar sind, haben die höchsten Sichtbarkeitsraten, da sie für den Nutzer direkt sichtbar sind. Dadurch wird sichergestellt, dass die Mehrheit der Nutzer, die die Seite besuchen, diese Anzeigen sieht, ohne scrollen zu müssen.
Wenn Sie in der ersten Ansicht „above the fold“-Anzeigenflächen verwenden, ist es jedoch wichtig, ein Gleichgewicht zwischen Monetarisierung und Nutzerfreundlichkeit zu finden. Hier sind einige wichtige Überlegungen.
- Anzeigenflächen für den ersten Bildschirm sollten im ersten Darstellungsbereich des Nutzers so schnell wie möglich geladen werden. Langsam ladende Anzeigen können sich negativ auf die Nutzererfahrung auswirken und die Absprungrate erhöhen. Die Optimierung der Ladezeiten der Anzeigen ist für eine reibungslose Nutzererfahrung und eine reibungslose Nutzung des Browsers von entscheidender Bedeutung.
- Auch wenn diese Anzeigen-Placements wertvoll sind, sollten diese nicht mit zu vielen Anzeigen überladen werden. Übermäßig viele Anzeigen unübersichtlich die Seite, beeinträchtigen die Lesbarkeit der Inhalte und beeinträchtigen die Nutzererfahrung. Bemühe dich um ein Gleichgewicht zwischen Monetarisierung und einem übersichtlichen, nutzerfreundlichen Layout.
- Stellen Sie sicher, dass die Anzeigenflächen "above the fold" (ohne Scrollen sichtbar) mit verschiedenen Bildschirmgrößen und Geräten kompatibel sind. Responsives Webdesign kann dazu beitragen, unabhängig von der Bildschirmgröße des Nutzers ein einheitliches und optisch ansprechendes Layout beizubehalten.
„Below the fold“-Anzeigen
„Below the fold“-Anzeigenflächen, also Anzeigen, die in dem Bereich einer Webseite platziert werden, der erst nach dem Herunterscrollen sichtbar wird, sind in der digitalen Werbung ebenfalls von großem Wert. Die Vorteile dieser Placements ergänzen die „above the fold“-Placements.
Anzeigen, die mit Scrollen sichtbar sind, profitieren von Nutzern, die scrollen, um weitere Inhalte zu entdecken. Diese Placements wecken die Aufmerksamkeit interessierter Nutzer, die aktiv nach zusätzlichen Informationen suchen, und sind somit für Unternehmen wertvoll, die komplexere Botschaften oder Storytelling-Techniken vermitteln möchten.
- Anzeigenflächen, die anfänglich nicht sichtbar sind, können auf den Inhalt daneben ausgerichtet sein. Dies bietet die Möglichkeit für kontextbezogene Relevanz. Diese Abstimmung kann zu einem höheren Nutzer-Engagement führen, da die Nutzer Anzeigen entdecken, die einen Bezug zu den Inhalten haben, die sie sich ansehen.
- „Below the fold“-Anzeigen (mit Scrollen sichtbar) fügen sich nahtlos in den umgebenden Inhalt ein und wirken dadurch weniger störend für den Nutzer. Diese Integration – auch als native Advertising bezeichnet – kann zu einer harmonischeren Nutzererfahrung führen.
- Anzeigen-Placements, für die Scrollen erforderlich ist, bieten mehr kreative Gestaltung, mehr Flexibilität bei den Formaten, viel Platz und Spielraum für Experimente. Für Videoanzeigen, interaktive Elemente und größere Bilder kann Lazy Loading verwendet werden, um die Aufmerksamkeit der Nutzer zu erregen, ohne die Nutzererfahrung zu beeinträchtigen.
Bei Anzeigen-Placements vom Typ „below the fold“ (mit Scrollen sichtbar) sollten Sie Folgendes beachten:
- Die Anzeigen-Placements "below the fold" (mit Scrollen sichtbar) können zwar effektiv sein, es ist jedoch wichtig, dass die Nutzer zum Scrollen animiert werden, um die Anzeigen zu sehen. Wenn Sie visuelle Hinweise oder Teaser einfügen, können Sie Nutzer dazu bewegen, sich weiter zu informieren, und so die Wahrscheinlichkeit einer Anzeigensichtbarkeit erhöhen.
- 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, um die Nutzer nicht zu überfordern und eine positive Nutzererfahrung zu gewährleisten.
- Im Gegensatz zu Anzeigen-Placements vom Typ „above the fold“ müssen Anzeigen, die mit Scrollen sichtbar sind, nicht sofort geladen werden. Wenn Sie das Laden dieser Anzeigen verzögern, bis sie kurz vor dem Darstellungsbereich des Nutzers stehen, kann dies dazu beitragen, die Ladegeschwindigkeit der Seite insgesamt zu verbessern und die anfänglichen Rendering-Zeiten der Seite zu verkürzen.
Bei strategischem Einsatz können „Below the fold“-Anzeigen „above the fold“-Anzeigen ergänzen und eine Plattform für kreative Anzeigenformate und kontextbezogene Relevanz bieten. Die Optimierung der Sichtbarkeit, das Ausbalancieren von Inhalten und die Verwaltung des Ladevorgangs der Anzeigen sind jedoch wichtige Aspekte für eine positive Nutzererfahrung.
Aktuelle Best Practices für Google Publisher-Tags (GPTs):
- Allgemeine Best Practices
- Best Practices für Anzeigen
- Layout Shift minimieren
- Leistung beobachten
- Häufige Implementierungsfehler vermeiden
Lazy Loading von Anzeigen gegebenenfalls
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 erst mit Scrollen sichtbar sind), werden sie nur geladen, wenn sie sichtbar sind. So wird die Bandbreite geschont und die allgemeine Seitengeschwindigkeit verbessert. Browser beinhalten 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 ohne Aktualisierung der Seite aktualisieren
Eine weitere Technik, mit der sich die Seitenleistung und das Laden von Anzeigen in Einklang bringen lassen, ist die Möglichkeit, Anzeigen alle 30 bis 240 Sekunden1 zu aktualisieren, ohne dass die gesamte Seite neu geladen werden muss. So lässt sich der Anzeigeninhalt dynamisch aktualisieren, ohne dass die Nutzererfahrung beim Surfen beeinträchtigt wird oder unnötige Verzögerungen entstehen.
In mobilen Apps bietet die Aktualisierung von Anzeigen in vorhandenen Webansichten eine bessere Leistung als das Neuladen der gesamten Seite oder die Neuerstellung von WebViews, da dadurch der Daten- und Ressourcenaufwand minimiert wird. Dies führt zu schnelleren Inhaltsaktualisierungen und einer flüssigeren Nutzererfahrung ohne die Latenz, die mit einem Neubeginn 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 Seitengeschwindigkeit verbessert, weil nicht die gesamte Seite neu geladen werden muss, sondern auch, dass die angezeigten Anzeigen relevant und ansprechend bleiben. Mit dieser Technik können Websiteinhaber ein Gleichgewicht zwischen Monetarisierung und Leistung finden, indem sie zeitnah und ansprechend Anzeigeninhalte liefern und negative Auswirkungen auf die Nutzererfahrung minimieren.
Das Aktualisieren von Anzeigenflächen lohnt sich besonders auf Seiten, auf denen Nutzer tendenziell länger verweilen, z. B. auf Rezeptseiten, Do-it-yourself-Tutorials oder auf anderen Websites mit viel Content. Auf einer Bastelseite, auf der Nutzer viel Zeit mit den Anleitungen verbringen, kann das strategische Aktualisieren der Anzeigenflächen während der Pausen zwischen den Schritten oder beim Ansehen von Bildergalerien 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 Content der Hauptwebseite geladen. So kann die Seite weiter gerendert und interaktiv werden, ohne auf das vollständige Laden der Anzeigen warten zu müssen. Dies verkürzt die wahrgenommene Ladezeit und erhöht die Zufriedenheit der Nutzer.
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 erhebliche Auswirkungen auf die Seitengeschwindigkeit haben. Große Anzeigen können den Seitenaufbau verlangsamen und die Nutzer verärgern. Deshalb sollten Websiteinhaber eng mit Werbetreibenden zusammenarbeiten, um Anzeigengrößen und ‐formate zu optimieren. Wenn Sie den Einsatz komprimierter Bildformate und eines effizienten Anzeigen-Creative-Designs fördern, können Sie die Dateigröße 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
Die Einhaltung des Better Ads Standard zur Auslieferung von Anzeigen ist wichtig, da dadurch nicht nur die Nutzererfahrung durch die Reduzierung aufdringlicher oder störender Anzeigenformate verbessert wird, sondern auch die Anzeigenposition und die Seitenladezeit positiv beeinflusst werden.
Wenn Sie diese Standards einhalten, werden Anzeigen eher an Positionen platziert, die weniger störend oder aufdringlich sind. Dies kann zu einer höheren Nutzerinteraktion und einer höheren Klickrate führen.
Darüber hinaus kann die Einhaltung dieser Richtlinien zu kürzeren Ladezeiten der Seiten 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. Für eine optimale Seitengeschwindigkeit sollten Websiteinhaber die Leistung verschiedener Werbenetzwerke, Header Bidding-Implementierungen und Anbieter sorgfältig bewerten.
Partnerschaften mit Anbietern, die Geschwindigkeit priorisieren und nachweislich nutzerfreundliche Anzeigeninhalte effizient bereitstellen, können die Seitenleistung erheblich steigern und die Nutzererfahrung verbessern.
Fazit
Für Websiteinhaber, die eine außergewöhnliche Nutzererfahrung bieten und gleichzeitig den Umsatz durch Onlinewerbung maximieren möchten, ist es von entscheidender Bedeutung, ein Gleichgewicht zwischen Monetarisierung und Leistung zu erreichen.
Mithilfe von Techniken wie asynchronem Laden, Lazy Loading, Optimieren von Anzeigenformaten und -größen, intelligentem Caching und sorgfältiger Auswertung von Werbenetzwerken sowie Header Bidding und Anbietern können Websiteinhaber erfolgreich die Herausforderungen des Ladens 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. Bei einigen Käufern ist eine Aktualisierungsdeklaration von mindestens 240 Sekunden erforderlich. Allgemein gilt: Je länger das Intervall zwischen den Aktualisierungen ist, desto attraktiver ist Ihr Inventar für Käufer. Weitere Informationen