Außerdem konnte die Sichtbarkeit von Anzeigen auf der neu gestalteten Website auf über 75 % gesteigert, die Absprungraten um 50 % reduziert und die Seitenaufrufe um 27 % erhöht werden.
Als Google die Core Web Vitals-Initiative ankündigte, erkannte der deutsche Publisher Netzwelt schnell das Potenzial dieser neuen Messwerte für eine gute Nutzerfreundlichkeit von Seiten und eine verbesserte werbebasierte Monetarisierung. Das Unternehmen hat seine Website neu aufgelegt und dabei gängige Best Practices für die Leistung angewendet und gleichzeitig Anzeigen-Tags und Placements optimiert. Die Verbesserung der Nutzerfreundlichkeit und der Seitenladezeit hat sich als ein Weg erwiesen, Interaktionen und Werbeeinnahmen gleichzeitig zu optimieren. Die Seitenaufrufe stiegen um 27%, die Anzeigensichtbarkeit überstieg 75 % und die Werbeeinnahmen stiegen um 18%.
27 %
mehr Seitenaufrufe
18 %
Höhere Werbeeinnahmen
75 %
Anzeigensichtbarkeit
Die Herausforderung
Wie viele andere Nachrichtenverlage hatte Netzwelt Schwierigkeiten, das richtige Gleichgewicht zwischen der Optimierung der Nutzerfreundlichkeit und der Seitengeschwindigkeit zu finden und gleichzeitig hohe Werbeeinnahmen zu erzielen. Die wichtigsten Herausforderungen waren:
- Hohe Cumulative Layout Shift (CLS) aufgrund von Layoutverschiebungen, die durch Anzeigen ausgelöst werden, insbesondere durch Anzeigenflächen mit mehreren Größen und Top-Banner.
- Der Largest Contentful Paint (LCP) wird zu spät angezeigt, weil Anzeigen das größte Paint-Element sind oder weil die Bandbreite durch das Laden des Hero-Bildes belegt wird.
- Hohe First Input Delays (FIDs), die durch JavaScript von Drittanbietern verursacht werden, das für Werbung, Header Bidding und andere Zwecke erforderlich ist.
- Nebenwirkungen auf die Core Web Vitals durch Einwilligungsdialoge, die von Drittanbietern gesteuert werden, was auch zu Layoutverschiebungen führte und als späte LCPs erkannt werden kann.
Nachrichtenwebsite für Core Web Vitals optimieren
Als das Team von Netzwelt mit der Optimierung der Core Web Vitals begann, stellte es schnell fest, dass sich die Optimierung der Core Web Vitals nicht negativ auf die Anzeigen auswirken muss, sondern als Chance genutzt werden kann, die Sichtbarkeit von Anzeigen zu verbessern. Daher optimierte das Netzwelt-Team die Core Web Vitals, um die Sichtbarkeit von Anzeigen auf über 75% zu steigern und so Anzeigen mit höherem Umsatz zu erzielen. Der weltweite Durchschnitt für Displayanzeigen liegt unter 50%.
CLS optimieren
Anzeigen werden oft spät geladen (manchmal bewusst durch Lazy Loading) und ihre tatsächliche Größe ist aufgrund von Anzeigen-Placements mit mehreren Größen und flexiblen Anzeigenformaten oft nicht im Voraus bekannt.
Das Problem lässt sich in zwei Teile unterteilen: Anzeigen, die ohne Scrollen sichtbar sind, und Anzeigen, die nur bei Scrollen sichtbar sind.
Anzeigen im Above-the-Fold-Bereich können zu massiven Layoutsprüngen führen, da sie erst spät und in unbekannten Größen geladen werden. Wenn Sie die größte Fläche blockieren, die sie benötigen könnten, kann das zu einer schlechten Nutzererfahrung führen. Wenn Sie Werbetreibende hingegen um feste Größen bitten, kann das die Werbeeinnahmen verringern. Netzwelt hat dieses Problem gelöst, indem es die oberste Anzeige fixiert und einige der größeren zulässigen Bannergrößen entfernt hat. Durch die Overlay-Anzeige werden Layoutsprünge bei Anzeigen unterschiedlicher Größe vermieden. Die reduzierten zulässigen Größen wirken sich zwar auf die Anzeigenverkäufe aus, dies wird jedoch durch die bessere Sichtbarkeit mehr als ausgeglichen.
Anhand von Verlaufsdaten und A/B-Tests konnte Netzwelt die richtige Größe und Position für verschiedene Geräte und Bildschirmgrößen ermitteln. Mit CSS-Medienregeln wurde Platz reserviert.
Anzeigen, die erst nach dem Scrollen sichtbar sind, bieten erhebliche Verbesserungsmöglichkeiten:
- Wenn ein Banner zwar geladen, aber nicht gesehen wird, ist die Anzeigensichtbarkeit gering und die Nutzerfreundlichkeit der Seite wird beeinträchtigt.
- Ein Banner, das geladen wird, wenn ein Nutzer darüber scrollt, kann zu zusätzlichen Inhaltsübergängen führen.
Um die Nutzerfreundlichkeit der Seite und die Sichtbarkeit von Anzeigen zu verbessern, hat Netzwelt Lazy Loading implementiert und Platz für die Größe des kleinsten gemeinsamen Nenners reserviert. In einer Zone mit mehreren Größen wurden für die Banner, die in den Größen 300 × 250 bis 300 × 600 angefordert wurden, 250 Pixel Höhe reserviert. Dadurch wurden Layoutverschiebungen bei den kleineren Größen eliminiert und bei größeren Bannern stark reduziert. Dieser Ansatz ist nicht optimal, aber ein guter Anfang und ein guter Kompromiss.
Zur weiteren Optimierung nutzte Netzwelt den Intersection Observer und die Network Information API, um Anzeigen-Placements zu steuern und Layoutverschiebungen zu reduzieren. Je nach Scrollposition und Qualität der Netzwerkverbindung werden unterschiedliche Anzeigenpositionen und Lazy-Loading-Strategien verwendet. Außerdem können Anzeigen von mehreren zu festen Größen geändert werden. Ziel des Algorithmus ist es immer, die Sichtbarkeit von Anzeigen zu maximieren und Layoutverschiebungen zu minimieren. In Browsern, die die NetworkInfo API nicht unterstützen, wird ein Proxywert verwendet, der auf einer Kombination aus Gerät und IP-abgeleitetem Netzwerktyp basiert. Mit dieser Strategie für das adaptive Laden lässt sich der CLS vor allem für Nutzer mit langsamen Internetverbindungen reduzieren.
FID optimieren
Die Verzögerung bei der ersten Eingabe kann für Nachrichtenpublisher ein Problem darstellen, da Anzeigen häufig viele zusätzliche JavaScript-Bibliotheken enthalten. Und es scheint tatsächlich negative Auswirkungen zu geben, wenn man sich Lab-Daten wie Lighthouse ansieht. Die Felddaten im Web Almanac 2020 zeigen jedoch, dass viele Websites eine ausreichend schnelle Reaktionszeit haben. Das liegt zum Teil daran, dass JavaScript für Anzeigen erst spät (nach der ersten Eingabe) geladen wird, gut im Cache gespeichert wird (z. B. durch v8-Code-Caching) oder von den Anzeigenanbietern gut optimiert wird. Anbieter von Sichtbarkeits-Trackern vermeiden lange Aufgaben. Selbst wenn die Summe der Laufzeit lang ist, sind die Gesamtblockierungszeit (Total Blocking Time, TBT) und die FID nicht betroffen. Der FID war zwar kein großes Problem für Netzwelt, aber es gab noch einige Optimierungsmöglichkeiten:
- Reduzieren Sie Anzeigenscripts und -anbieter und konzentrieren Sie sich nach Möglichkeit auf einen einzigen Stack.
- Laden Sie alle Scripts mit „defer“ oder „async“
- Webpack oder ähnliche Technologien für Treeshaking und Unbundling verwenden
- Verwenden einfacher BEM-ähnlicher CSS-Regeln
- Vermeiden Sie lang laufende Aufgaben und verwenden Sie das „Inaktiv bis dringend“-Muster.
- Verwenden Sie RequestAnimationFrame, wenn das Layout betroffen ist.
LCP optimieren
Der Wert „Largest Contentful Paint“ kann auf zwei Arten durch Anzeigen beeinflusst werden: direkt, indem eine Anzeige als größter Paint erkannt wird, und indirekt, indem die Netzwerkbandbreite überlastet oder der kritische Pfad beeinträchtigt wird, sodass der tatsächlich größte Paint (z. B. ein Hero-Image) nicht schnell genug geladen werden kann.
Netzwelt hatte bereits Anzeigen im Format „Mittel-Quadrat“ aus den oberen Anzeigenflächen entfernt, um die CLS zu optimieren. Das hatte den zusätzlichen Vorteil, dass Anzeigen nicht zum größten Element wurden.
Netzwelt folgt einer strengen Richtlinie, bei der Inhalte vor Anzeigen priorisiert werden. Netzwelt hat die Hero-Bilder und ‑Schriftarten, die im Above-the-Fold-Bereich verwendet werden, priorisiert und den kritischen Pfad so optimiert, dass er Vorrang vor Werbescripts und Anzeigen hat. Durch diese Priorisierung wurde verhindert, dass sich die LCP durch die Anzeigen verschlechterte.
Neben diesen Optimierungen hat Netzwelt auch andere Best Practices befolgt:
- CSS für den kritischen Renderingpfad getrennt und in den Header eingefügt.
- Die wichtigsten Schriftarten, Scripts und Bilder wurden vorab geladen.
- Das Lazy-Loading von Bildern im Bereich, der auf den ersten Blick und ohne Scrollen sichtbar ist, wurde vermieden.
font-display="swap"verbraucht
DSGVO-Einwilligung und Core Web Vitals
Einwilligungsdialoge wirken sich häufig negativ auf die Core Web Vitals aus. Wie bei Werbung kann ein Einwilligungsdialog die Core Web Vitals auf zwei Arten beeinflussen:
- Explizit, wenn es als größter Paint erkannt wird oder Layoutänderungen verursacht.
- Implizit, indem Bandbreite vom tatsächlichen Largest Contentful Paint abgezogen, der kritische Pfad zum Largest Contentful Paint blockiert oder Anzeigen verzögert werden, bis die Einwilligung vorliegt, was wiederum Layoutänderungen auslösen kann.
Netzwelt arbeitet mit einem Drittanbieter für die Einwilligung zusammen, der auch Optimierungen implementiert hat. Zuerst hat Netzwelt die offensichtlichen Fallstricke vermieden:
- Einwilligungsscripts werden asynchron geladen, um wichtige Ressourcen nicht zu blockieren.
- Die Einwilligung ist so formatiert, dass große Elemente nicht als größtes Element innerhalb des LCP infrage kommen.
- Im Einwilligungs-Overlay wird
position: fixedverwendet, um Verschiebungen zu vermeiden. - Anzeigen werden erst nach der Einwilligung ausgeliefert. Vorher wird jedoch ausreichend Weißraum beibehalten, um Layoutverschiebungen beim Laden von Anzeigen zu vermeiden.
- Achten Sie darauf, dass die Darstellung und Positionierung des Einwilligungsdialogfelds keine Layoutänderungen auslöst. Ein Problem, das hier gefunden und behoben wurde, war die Scrollsperre des Dienstanbieters. Dadurch wurde das Scrollen deaktiviert, während die Einwilligung angezeigt wurde, indem der Hauptinhalt des Artikels beim Scrollen verschoben wurde, was zu Layoutverschiebungen führte.
Nach dieser Arbeit gab es immer noch große Abweichungen zwischen den CLS-Werten im Feld und im Labor. Die CLS im Lab war zwar nahe bei Null, die Feldwerte lagen jedoch deutlich über den Grenzwerten. Nach der Untersuchung stellte sich heraus, dass Layoutänderungen im iframe für die Einwilligung die Ursache waren. Diese werden derzeit nur in Felddaten korrekt erfasst. Netzwelt arbeitet weiterhin mit dem Drittanbieter für die Einwilligung zusammen, um dieses Problem zu beheben.
Abomodelle für Nachrichten und Core Web Vitals
Nachrichtenverlage stellen auf Abomodelle um, um Journalismus zu finanzieren. Dieses Modell ist für Core Web Vitals relevant, da Nutzer keine Websites abonnieren, die eine schlechte Nutzerfreundlichkeit bieten. Außerdem erwarten Abonnenten keine Anzeigen in den kostenpflichtigen Inhalten. Wenn du Anzeigen ausblendest, kann das zu Layoutänderungen führen. Die Website muss prüfen, ob Nutzer berechtigt sind, sich die Inhalte anzusehen, und ob Anzeigen ausgeliefert werden sollen. Diese Prüfungen können zu zusätzlichen Latenzen führen, was zu Inhaltsverschiebungen oder einer schlechten Nutzererfahrung führen kann.
Netzwelt verwendet ein Modell, bei dem Inhalte immer kostenlos sind, Abonnenten aber keine Werbung sehen. Sie haben verschiedene Möglichkeiten untersucht, Berechtigungen abzufragen und zu speichern, um Latenzen und Layoutänderungen zu reduzieren.
Eine anfängliche Abfrage der Berechtigung führte immer zu Latenzen. Wenn die Abfrage der Berechtigungen also zu lange dauert, wird auf der Website der zuletzt im Cache gespeicherte Status angezeigt. Bei neuen Abonnenten besteht ein geringes Risiko, dass zahlende Nutzer einmal Anzeigen sehen. Nutzer, die gerade ein Abo kündigen, sehen möglicherweise eine Ladung ohne Anzeigen, bevor die lokal gespeicherten Berechtigungen aktualisiert werden. Sobald die Berechtigungen bekannt sind, werden sie lokal mit der LocalStorage API gespeichert, um zusätzliche Latenzen und Layoutänderungen bei der zukünftigen Navigation zu vermeiden.
Optimierungsergebnisse
Die Ergebnisse der Optimierungen von Netzwelt sprechen für sich. Der PageSpeed Insights-Wert von CNN ist unerreicht bei Nachrichtenverlagen weltweit:
Die Optimierungen verbesserten die Nutzerfreundlichkeit der Seite, wurden aber mit Blick auf das Unternehmen vorgenommen und verbesserten die Anzeigenleistung, die Sichtbarkeit von Anzeigen und den Umsatz. Nach der Neuveröffentlichung der optimierten Seite konnte Netzwelt CPM-Steigerung von 20–30 % verzeichnen, wobei die Anzeigensichtbarkeit über 75 % lag. Netzwelt geht jedoch davon aus, dass die Umsatzsteigerung insgesamt noch höher ausfällt. Die Zugriffe sind seit der Neuauflage gestiegen, was wahrscheinlich auf ein höheres Nutzer-Engagement und niedrigere Ausstiegsraten aufgrund der verbesserten Nutzerfreundlichkeit zurückzuführen ist. Diese Auswirkungen sind schwer zu quantifizieren und in einen kausalen Zusammenhang mit der Neuauflage zu setzen, da die Zugriffszahlen natürlich schwanken und es auch Auswirkungen der globalen Pandemie gibt. Diese indirekten Effekte sind einer der Gründe, warum Netzwelt bei der Analyse seiner Website immer alle Zahlen berücksichtigt, nicht nur den CPM, der irreführend sein kann. Core Web Vitals und UX-Messwerte in Kombination mit allen werbebezogenen Messwerten liefern das vollständige Bild.
Blick in die Zukunft
Netzwelt ist der Meinung, dass in einer Zukunft ohne Drittanbieter-Cookies das kontextbezogene Targeting über die Inhalte in Kombination mit einer guten Nutzererfahrung und Seitenleistung (einschließlich der Anzeigensichtbarkeit) der Schlüssel zum Erfolg als Nachrichtenverlag ist.
Deshalb setzt Netzwelt nicht nur auf Core Web Vitals, sondern geht noch einen Schritt weiter und implementiert viele moderne Webfunktionen wie progressive Web-Apps (PWAs), Offlineinhalte, den dunklen Modus, die Web Share API und vertrauenswürdige Web-Aktivitäten (TWAs) mithilfe der neuen Digital Goods API.