Ladezeitenoptimierung von Webseiten und Werbemitteln

Einleitung

Werbung ist ein integraler Bestandteil von Webseiten und hat daher auch einen großen Anteil an der Ladegeschwindigkeit der Seite.
Jede Optimierung hat unterschiedliche Auswirkungen, auf die Seite als auch auf die Werbung, sowohl positive als auch negative Ergebnisse.

Um die Auswirkungen möglichst genau bewerten zu können, empfehlen wir einige wichtige Metriken bei jeder Optimierung zur messen:

• First Contentful Paint (FCP)
  Diese Metrik gibt an wie lange es für den Benutzer dauert, von der Eingabe der URL zur Webseite bis zur ersten Darstellung des Webseiten Inhalts zu gelangen.
  Benutzer die sehr lange (mehr als 3 Sekunden) vor einer weißen, ladenden Webseite verbringen, brechen den Prozess wesentlich öfter ab und kehren nicht zurück.
  Weitere Informationen zu dieser Metrik finden Sie hier
• Time to Interactive (TTI)
  Eine Metrik um die Zeitspanne zu bestimmen, ab wann der Benutzer zum ersten Mal mit einer Webseite interagieren kann.
  Benutzer wollen sobald sie interaktive Inhalte sehen auch mit diesen interagieren. Je schlechter das Erlebnis durch ruckelnde Bilder, nicht responsives Scrollen, oder nicht funktionierende Schaltflächen, etc. wird, desto wahrscheinlich kommt der Benutzer nicht wieder.
  Weitere Informationen zu dieser Metrik finden Sie hier
• Ad Impressions (Imps)
  Die Anzahl der verfügbaren Ad Impressions auf der Webseite. Jede Darstellung eines einzelnen Werbemittels zählt als "Impression".
  Haben Sie mehrere Werbeflächen auf Ihrer Webseite, macht es Sinn, die Ad Impressions jeder einzelnen Werbefläche genauer zu betrachten. Änderungen an Fläche "A" können durchaus Auswirkungen auf Fläche "B" haben.
  Die Ad Impressions haben eine direkte Auswirkung auf den möglichen Umsatz einer Webseite. Je mehr Ad Impressions verfügbar sind, desto mehr Geld nimmt eine Webseite ein.
• Viewability (View)
  Diese Metrik gibt an, wie gut und wie lange eine Werbefläche sichtbar ist. Es gibt für diese Metrik verschiedene Standards. Am verbreitetsten anerkannt ist es die prozentuale Sichtbarkeit einer Fläche für eine bestimmte Anzahl von Sekunden darzustellen, und diese in eine prozentuale Verbindung mit Ad Impressions zu setzen.
  Beispiel: Werbefläche A hat bei 80 % aller AdImpression eine Sichtbarkeit von 50% für 2 Sekunden erreicht → Viewability 50%/2s:80%
  Viewability ist eine der wichtigsten Metriken für Werbeagenturen und Kunden. Viele Werbekampagnen werden durch den Kunden mit einer minimalen "Viewability" Anforderung versehen. Platzierungen und Webseiten unter diesem Wert werden erst gar nicht bei einer Buchung berücksichtigt.

Diese 4 Metriken sind bei weitem nicht die Einzigen, die bei einer Optimierung herangezogen werden sollten, lassen sich aber am besten für eine Bewertung des möglichen Umsatzes einer Seite benutzen. Durch die direkten Bezüge zu Benutzern und Werbebuchung machen diese Metriken mögliche Änderungen an dem Umsatz einer Webseite schon früh sichtbar. Benutzer als auch Werbekunden reagieren nicht sofort auf Änderungen, die Metriken aber schon oft nach wenigen Stunden.

Im Folgenden stellen wir verschiedene Optimierungen vor, und deren mögliche Auswirkungen auf diese 4 Metriken.

MetaTag Datei aus Domain der Webseite laden

Unsere Dokumentation für die Integration des TagManagers geht davon aus, dass Sie die JavaScript Datei des TagManagers aus unserem CDN (Content Delivery Network) laden. Sie haben jedoch auch die Möglichkeit, die Datei auf Ihren Servern abzuspeichern und von dort aus zu laden.
Der Vorteil ist, dass der Browser bereits die Domäne Ihrer Webseite kennt und beginnt Bilder und JavaScript von dort zu laden. Eine Adressermittlung für unser CDN kostet den Browser durchschnittlich 20-50 ms, bei mobilen Devices bis zu 150 ms je nach Verbindung. Diese Zeit kann dem Browser erspart werden.

Wenn Sie diese Variante einsetzen, müssen Sie die Datei des TagManagers jedoch in regelmäßigen Abständen (mindestens 1x alle 24 Std) überprüfen und bei Änderungen erneut herunterladen. Änderungen der Datei werden an Werktagen zwischen 8:00 - 20:00 durchgeführt, ein Abgleich der Datei kann auf dieses Zeitfenster beschränkt werden. Wir empfehlen den Abgleich automatisiert durchzuführen.

Eine komplizierte Variante dieses Vorganges ist das Zusammenlegen der TagManager Datei, mit anderen JavaScript Dateien aus Ihrer Webseite, sogenanntes. "Bundling".
Dabei wird der Inhalt von verschiedenen JavaScript Dateien so zusammengelegt, dass daraus eine einzige Datei entsteht. Dies erspart dem Browser das Aufrufen und Interpretieren von mehreren JavaScript Dateien.
Auch hier sollte das "Bundle" mindestens 1x alle 24 Stunden aktualisiert werden. Da für diese Variante meist automatisierte "Build & Release" Prozesse (z.B.: Continuous Integration) verwendet werden müssen, ist die Umsetzung kompliziert. Wir empfehlen bei solch einer Umsetzung Kontakt mit uns aufzunehmen, um weitere Details zu klären.

MetaTag asynchron oder deferred laden

Bei der Einbindung unseres TagManager als festen <script> Tag im <head> der Webseite (wie in unser Anleitung als Standard angegeben), blockiert das Script das weitere Laden/Rendern der Webseite für ca. 50-80 ms.
Auf langsameren mobilen Devices kann diese Zeitspanne sich auf bis zu 150-200 ms erhöhen.
Der TagManager ist so aufgebaut, dass er alle weiteren Daten und Scripte von sich aus asynchron (nicht blockierend) lädt, daher würde nur das Ausführen des eigentlichen "Kerns" die Webseite blockieren.
Trotz dessen kann das asynchrone Laden einen Gewinn für die Ladegeschwindigkeit der Seiten sein, vor allem, wenn die Webseite eher klein und mit wenig scrollbaren Inhalt versehen ist (Foto Klickstrecken, Browserspiele).
Je länger das Laden des TagManager aber verzögert wird, desto länger wird das erste Anzeigen von Werbemittel dauern. Vor allem auf Seiten mit kurzer Aufenthaltsdauer, von denen der Benutzer schnell weiter klickt oder geleitet wird, kann dies massive Auswirkungen auf die Impressions und Viewability haben (ca. minus 20-30%)

Bei der technischen Implementation ist zu berücksichtigen, dass alle Schnittstellen des TagManagers erst nach dem vollständigen Laden zur Verfügung stehen. Bitte stellen Sie sicher das Methoden Aufrufe an diese Schnittstelle erst dann ausgeführt werden.

var tagManager = document.createElement('script');
tagManager.src = "https://meineURLZumTagManager.js";
tagManager.addEventListener('load', function(){
	SDG.Publisher.setZone('start');
	SDG.Publisher.registerSlot('banner','meinBannerSlot');
	
});
document.head.appendChild(tagManager);

Informationen zu einer SRA-Architektur finden Sie hier: Single-Request-Architecture (SRA)

Benutzung von "PreConnect" / "DNS Prefetching"

Die meisten modernen Browser erlauben beim Aufrufen einer Webseite die Übertragung einer Adressliste, sog "Preconnect", welche der Browser parallel zum Laden der Seite abarbeitet. Dabei werden die Adressen von weiteren Services und Servern im Voraus in Erfahrung gebracht. Beim Aufrufen und Benutzen dieser Adresse hat der Browser bereits alle benötigten Informationen vorliegen und kann sofort reagieren.

In der Regel spart dies ca. 50 ms pro Adresse. Der Effekt ist auf mobilen Datenverbindung deutlicher zu spüren und funktioniert umso besser, je schlechter die mobile Datenverbindung des Gerätes ist.

Da die Auslieferung von Werbung eine Vielzahl von verschiedenen Servern und Services beinhaltet, macht diese Option vor allem auf Seiten Sinn, auf denen so schnell wie möglich eine Auslieferung gelingen muss. Webseiten auf denen der Benutzer nur eine sehr kurze Weile verbleibt, profitieren vom "PreConnect" am Meisten

Liste der der Domains, die am häufigsten bei der Auslieferung von Werbemitteln angefragt werden, und welche Funktionen die Domains bereitstellen:

Die Einbindung dieser Liste ist einfach, und kann direkt im HTML einer Webseite passieren. Eine genaue Anleitung finden Sie im Mozilla Developer Network.

Verzögertes Laden von Werbeflächen (LazyLoad)

Alle Werbeflächen einer Webseite werden generell vom AdServer so schnell wie möglich mit Werbemitteln bestückt. Für den AdServer gilt: Je schneller die Werbeflächen auf der Seite dargestellt werden, desto mehr Umsatz kann eine Webseite generieren.
Diese Annahme schließt sich aus älteren Produktmodellen, in denen die Lieferung einer Werbung bezahlt wurde, nicht jedoch ob die Werbung jemals theoretisch sichtbar war. Liegen Werbeflächen sehr weit "unten" im Content, und der Benutzer muss erst zu diesen Werbeflächen "scrollen", kann es vorkommen, dass der AdServer diese Flächen bereits mit Werbung befüllt hat, der Nutzer diese aber niemals wahrnehmen kann.

Die meisten Werbetreibende lassen daher heutzutage messen, ob ihre "Viewability" Anforderung erfüllt wurden und ein Benutzer zumindest die Möglichkeit hatte, die ausgelieferte Werbung zu sehen. Auslieferungen die diese Anforderung nicht erfüllen, werden nicht bezahlt.
Die Anzeige der Werbung ist in diesem Moment ungültig und hat nichts zum Ertrag einer Webseite beigetragen, jedoch für alle Teilnehmer (Benutzer, Webseite, Vermarkter) technische Kosten ausgelöst (Datei wurden geladen, Server kontaktiert, etc.).

Wir bieten daher die Möglichkeit, Werbeflächen erst dann zu laden, wenn der Benutzer die Fläche sehen kann bzw. kurz davor ist die Fläche in einen sichtbaren Bereich zu "scrollen".
Der AdServer wird erst in diesem Moment kontaktiert, und liefert auch nur dann ein Werbemittel aus.

Diese Technik kann einen massiven Einfluss auf Ihren Umsatz haben, die sich je nach Webseite unterschiedlich auswirken können. Webseiten, die größtenteils über automatische Kanäle vermarktet werden und in denen die Sichtbarkeit ein Kernargument beim Kauf von Werbeflächen ist, können am meisten profitieren. Webseiten die jedoch ihren meisten Umsatz noch aus älteren Produktmodellen der Werbebuchung beziehen, könnten beim Einsatz dieser Technik einen starken Umsatzverlust auslösen.

Sollten Sie Interesse haben diese Technik einzusetzen, kontaktieren Sie bitte Ihren Ansprechpartner bei uns. Wir überprüfen gemeinsam den möglichen Einfluss auf Ihren Umsatz und erstellen die beste Strategie zur Umsetzung.