So konnte Netzwelt durch Core Web Vitals den Werbeumsatz um 18 % steigern

Die neu gestaltete Website verzeichnet außerdem eine Anzeigensichtbarkeit von über 75%, eine Reduzierung der Absprungrate um 50 % und eine Steigerung der Seitenaufrufe um 27%.

Martin Schierle

Als Google die Core Web Vitals-Initiative ankündigte, erkannte der deutsche Publisher Netzwelt schnell das Potenzial dieser neuen Messwerte für eine hervorragende Nutzerfreundlichkeit von Seiten und eine verbesserte werbebasierte Monetarisierung. Das Unternehmen führte einen Relaunch der Website durch und wendete gängige Best Practices für die Leistung an. Gleichzeitig wurden Anzeigen-Tags und Placements optimiert. Eine ansprechende Nutzererfahrung und schnelle Seiten erwiesen sich als ein Weg, um Interaktionen und Werbeeinnahmen parallel zu optimieren. Die Seitenaufrufe stiegen um 27%, die Anzeigensichtbarkeit um über 75 % und die Werbeeinnahmen um 18%.

Die Herausforderung

Wie viele andere Nachrichtenverlage hatte auch Netzwelt Schwierigkeiten, die richtige Balance zwischen der Optimierung der Nutzererfahrung und der Seitengeschwindigkeit bei gleichbleibenden Werbeeinnahmen zu finden. Die größten Herausforderungen, mit denen sie konfrontiert waren, waren:

• Hoher Cumulative Layout Shift (CLS) aufgrund von Layoutverschiebungen, die durch Anzeigen ausgelöst werden, insbesondere bei Anzeigenflächen mit mehreren Größen und Top-Bannern.
• Der Largest Contentful Paint (LCP) kommt verspätet, da Anzeigen den größten Paint sind oder weil beim Laden des Hero-Images Bandbreite verbraucht wird.
• Hohe First Input Delay (FID), die durch Drittanbieter-JavaScript verursacht wird, das für Werbung, Header Bidding und andere Zwecke benötigt wird.
• Nebenwirkungen auf Core Web Vitals aus von Drittanbietern gesteuerten Dialogen zur Einholung von Einwilligungen, die auch zu Layoutverschiebungen beigetragen haben und möglicherweise als spätgrößte Paints erkannt werden.

Nachrichtenwebsite für Core Web Vitals optimieren

Als Netzwelt mit der Arbeit an Core Web Vitals begann, stellte das Unternehmen schnell fest, dass die Optimierung der Core Web Vitals sich nicht negativ auf die Werbung auswirken muss, sondern als Chance zur Verbesserung der Anzeigensichtbarkeit genutzt werden kann. Daher optimierte das Netzwelt-Team die Core Web Vitals, um die Sichtbarkeit von Anzeigen auf über 75% zu steigern, um Werbung mit höherem Wert anzukurbeln (der globale Durchschnitt für Displayanzeigen liegt unter 50%).

CLS optimieren

Anzeigen werden oft erst spät geladen (manchmal bewusst durch Lazy Loading). Aufgrund der Tatsache, dass Anzeigen-Placements mit mehreren Größen und flexiblen Anzeigen-Placements erscheinen, ist ihre tatsächliche Größe oft nicht im Voraus bekannt.

Das Problem lässt sich in zwei Kategorien unterteilen: Anzeigen „above the fold“ und „below the fold“.

Anzeigen, die ohne Scrollen sichtbar sind, können aufgrund von späten Ladevorgängen mit unbekannten Größen zu erheblichen Layoutsprüngen führen. Wenn Sie den größten Platz blockieren, den sie möglicherweise benötigen, kann dies zu einer schlechten Nutzererfahrung führen, während Werbetreibende nach festen Größen gefragt werden, um die Werbeeinnahmen zu verringern. Netzwelt hat dieses Problem gelöst, indem die obere Anzeige fixiert wurde und einige der größeren zulässigen Bannergrößen entfernt wurden. Durch die eingeblendete Anzeige wird vermieden, dass Layout-Sprünge für Anzeigen unterschiedlicher Größe ausgelöst werden. Die reduzierten zulässigen Größen wirken sich zwar auf die Anzeigenverkäufe aus, die bessere Sichtbarkeit gleicht dies jedoch leicht aus.

Anhand von Verlaufsdaten und A/B-Tests konnte Netzwelt die richtige Größe und Positionierung für unterschiedliche Geräte und Bildschirmgrößen ermitteln. Zur Platzreservierung wurden außerdem CSS-Medienregeln verwendet.

Anzeigen „below the fold“ (mit Scrollen sichtbar) bieten Raum für erhebliche Verbesserungen:

• Ein Banner, das nicht gesehen, aber geladen wird, beeinträchtigt die Sichtbarkeit von Anzeigen und verschlechtert die Nutzerfreundlichkeit der Seite.
• Ein Banner, das geladen wird, wenn ein Nutzer darüber scrollt, kann zu zusätzlichen Content-Sprüngen führen.

Um eine gute Nutzerfreundlichkeit und eine hohe Anzeigensichtbarkeit zu gewährleisten, hat Netzwelt Lazy Loading implementiert und Platz für die Größe des kleinsten gemeinsamen Nenners reserviert. In einem Bereich mit mehreren Größen werden die Banner in den Größen 300 × 250 bis 300 × 600 angefordert, eine Höhe von 250 Pixeln reserviert. Dadurch wurden Layoutverschiebungen für die kleineren Größen vermieden und bei größeren Bannern deutlich reduziert. Dieser Ansatz ist nicht optimal, aber ein guter Anfang und ein guter Kompromiss.

Zur weiteren Optimierung verwendete Netzwelt 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 in feste Größen geändert werden. Der Algorithmus soll die Anzeigensichtbarkeit maximieren und gleichzeitig Layoutverschiebungen minimieren. Browser, die die NetworkInfo API nicht unterstützen, verwenden einen Proxywert, der auf einer Kombination aus Gerät und IP-Netzwerktyp basiert. Diese Strategie für adaptives Laden verringert den CLS-Wert für Nutzer mit langsamen Internetverbindungen.

FID optimieren

First Input Delay kann für Nachrichtenverlage ein Problem darstellen, da Werbung oft mit vielen zusätzlichen JavaScript-Bibliotheken ausgestattet ist. Und es wirkt sich offenbar negativ aus, wenn man sich Labdaten wie Lighthouse ansieht. Betrachtet man jedoch die Felddaten im Web Almanac von 2020, weisen viele Websites auf eine ausreichend schnelle Reaktion hin. Das liegt unter anderem daran, dass Werbe-JavaScript zu spät geladen wird (nach der ersten Eingabe), gutem Caching (z. B. Caching von Version 8-Code) oder einer guten Optimierung durch die Anzeigenanbieter. Sichtbarkeits-Tracker von Anbietern sorgen dafür, dass lange Aufgaben vermieden werden. Daher sind Total Blocking Time (TBT) und FID auch dann nicht betroffen, wenn die Summe der Laufzeit lang ist. FID war zwar kein großes Problem für die Netzwelt, aber wir mussten noch einige Optimierungen vornehmen:

• Reduzieren Sie Anzeigenskripts und -anbieter und konzentrieren Sie sich nach Möglichkeit auf einen Stapel.
• Laden aller Skripts mit Verzögerung oder Asynchron.
• Einsatz von Webpack- oder ähnlichen Technologien für Treehaking und Entbundling
• Einfache BEM-ähnliche CSS-Regeln verwenden
• Lange laufende Aufgaben vermeiden und das Muster idle-until-dringend verwenden
• Sie können mit RequestAnimationFrame überall dort arbeiten, wo das Layout betroffen ist.

LCP optimieren

The Largest Contentful Paint kann durch Werbung auf zwei Arten beeinflusst werden – explizit durch Erkennung einer Anzeige als Largest Paint, indirekt durch Überlastung der Netzwerkbandbreite oder Beeinflussung des kritischen Pfads, sodass der tatsächliche Largest Paint (z. B. ein Hero-Image) nicht schnell genug geladen werden kann.

Netzwelt hatte bereits Medium-Rectangle-Anzeigen von den oberen Anzeigenflächen entfernt, während er für CLS optimiert wurde. Dies hatte den zusätzlichen Vorteil, dass Anzeigen nicht das größte Element wurden.

Die Netzwelt hat strenge Richtlinien eingehalten, sodass Inhalte Vorrang vor Werbeanzeigen haben. Netzwelt hat die Hero-Images und Schriftarten „above the fold“ (ohne Scrollen sichtbar) und den kritischen Pfad optimiert, sodass dieser Vorrang vor Werbeskripts und Werbeanzeigen hat. Durch diese Priorisierung wurde der LCP nicht mehr von den Anzeigen beeinflusst.

Neben diesen Optimierungen setzte Netzwelt noch weitere Best Practices um:

• Der CSS-Code für den kritischen Rendering-Pfad wurde getrennt und im Header eingefügt.
• Die wichtigsten Schriftarten, Skripts und Bilder wurden vorab geladen.
• Lazy Loading von Bildern „above the fold“ vermieden.
• font-display="swap" verwendet.

DSGVO-Einwilligung und Core Web Vitals

Dialoge zur Einholung von Einwilligungen wirken sich häufig negativ auf die Core Web Vitals aus. Wie bei Anzeigen gibt es zwei Möglichkeiten, wie ein Dialog zur Einholung von Einwilligungen die Core Web Vitals beeinflussen kann:

• Geben Sie explizit an, ob es sich um den größten Paint handelt oder wenn es zu Layoutverschiebungen kommt.
• Implizit, indem Bandbreite vom tatsächlich größten Paint weggenommen wird, der kritische Pfad zum größten Paint blockiert oder Anzeigen verzögert werden, bis die Einwilligung vorliegt, was wiederum zu Layoutverschiebungen führen kann.

Netzwelt arbeitet mit einem Drittanbieter für Einwilligungen zusammen, der ebenfalls Optimierungen implementiert hat. Die First Netzwelt sorgte dafür, dass sich Fehler vermeiden ließen:

• Einwilligungsskripts werden asynchron geladen, um kritische Ressourcen nicht zu blockieren.
• Die Einwilligung ist so formatiert, dass große Elemente nicht als größtes Element innerhalb des LCP infrage kommen.
• Für das Einwilligungs-Overlay wird position: fixed verwendet, um Verschiebungen zu vermeiden.
• Anzeigen werden zwar erst ausgeliefert, nachdem die Einwilligung erteilt wurde, vorab wird jedoch ausreichend Leerraum beibehalten, um Layoutverschiebungen beim Laden von Anzeigen zu vermeiden.
• Die Anzeige und Positionierung des Dialogfelds zur Einwilligung darf keine Layoutverschiebungen auslösen. Ein Problem, das hier gefunden und behoben wurde, war die Scroll-Lock-Option des Dienstanbieters, bei der das Scrollen deaktiviert wurde, während die Einwilligung angezeigt wurde, indem der Hauptinhalt des Artikels beim Scrollen verschoben wurde. Dadurch wurden Layoutverschiebungen verursacht.

Nach dieser Arbeit kam es immer noch zu großen Abweichungen zwischen Feld- und Lab-CLS. Während die Lab-CLS nahe bei null lag, lagen die Feldwerte deutlich über den Grenzwerten. Die Ursache waren nach der Untersuchung Verschiebungen des Layouts innerhalb des Einwilligungs-iFrames, die derzeit nur in Felddaten korrekt erfasst werden. Netzwelt arbeitet weiterhin mit dem Drittanbieter für Einwilligungserklärungen zusammen, um dieses Problem zu beheben.

Abomodelle und Core Web Vitals

Nachrichtenverlage wechseln zu Abomodellen, um den Journalismus zu finanzieren. Dieses Modell ist für Core Web Vitals relevant, da Nutzer Websites mit schlechter Nutzererfahrung nicht abonnieren. Außerdem erwarten Abonnenten keine Werbeanzeigen in den bezahlten Inhalten. Das Ausblenden von Anzeigen kann jedoch zu Layoutverschiebungen führen. Auf der Website muss geprüft werden, ob Nutzer berechtigt sind, die Inhalte anzusehen, und ob Anzeigen eingeblendet werden dürfen. Diese Prüfungen können zu zusätzlichen Latenzen führen, was wiederum zu Inhaltsverschiebungen oder einer schlechten Nutzererfahrung führt.

Netzwelt nutzt ein Modell, bei dem Inhalte immer kostenlos sind, Abonnenten aber keine Werbung sehen. Das Team untersuchte verschiedene Möglichkeiten, Berechtigungen abzufragen und zu speichern, um Latenzen und Layoutverschiebungen zu reduzieren.

Eine erste Berechtigungsabfrage verursacht immer Latenzen. Wenn das Abfragen der Berechtigungen zu lange dauert, zeigt die Website den letzten im Cache gespeicherten Status an. Für neue Abonnenten bedeutet dies ein geringes Risiko, dass ein zahlender Nutzer Anzeigen einmal sieht. Nutzer, die gerade ein Abo kündigen, sehen möglicherweise einen Ladevorgang 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 Layoutverschiebungen bei der zukünftigen Navigation zu vermeiden.

Optimierungsergebnisse

Die Ergebnisse der Optimierungen von Netzwelt sprechen für sich. Ihr PageSpeed Insights-Wert ist unter den Nachrichtenverlagen weltweit unübertroffen:

Durch die Optimierungen wurde die Nutzerfreundlichkeit von Seiten verbessert. Sie wurden jedoch im Hinblick auf das Unternehmen vorgenommen, um die Nutzerfreundlichkeit von Werbeanzeigen, die Anzeigensichtbarkeit und den Umsatz zu verbessern. Nach dem Neustart der optimierten Seite verzeichnete Netzwelt einen CPM-Anstieg von 20 bis 30 % und eine Anzeigensichtbarkeit von über 75%. Netzwelt geht jedoch von einer Umsatzsteigerung insgesamt aus. Die Zugriffe sind seit dem Relaunch gestiegen, was vermutlich auf mehr Nutzerinteraktionen und niedrigere Absprungraten aufgrund einer verbesserten UX zurückzuführen ist. Diese Effekte sind schwer zu quantifizieren und in kausaler Beziehung zum Neustart zu setzen, da der Traffic natürlich schwankt. Auch die globale Pandemie hat Auswirkungen. Diese indirekten Auswirkungen sind einer der Gründe, warum Netzwelt bei der Überprüfung ihrer Website immer alle Zahlen berücksichtigt und nicht nur den CPM, was irreführend sein kann. Core Web Vitals und UX-Messwerte – zusammen mit allen anzeigenbezogenen Messwerten – liefern ein echtes Bild.

Blick in die Zukunft

Netzwelt glaubt, dass in Zukunft ohne Drittanbieter-Cookies Kontext-Targeting über den Content, eine hohe Nutzerfreundlichkeit von Seiten (einschließlich der Anzeigensichtbarkeit) der Schlüssel zum Erfolg als Nachrichtenverlage ist.

Daher setzt Netzwelt nicht nur auf Core Web Vitals, sondern geht noch einen Schritt weiter und implementiert mithilfe der neuen Digital Goods API viele moderne Webfunktionen wie progressive Web-Apps (PWA), Offlineinhalte, Dark Mode, die Web Share API und Trusted Web Activity (TWA).