Die meisten Internetseiten finanzieren sich (in Teilen) über eingeblendete Werbung. Dabei werden häufig Werbebanner, Texte und ganze Flashlayer von Drittanbietern präsentiert, die während des Pageloads ebenfalls geladen werden müssen. Ein gängiges Problem dabei ist die Performance der Adserver bei dem ausliefern der Werbeinhalte. In diesem Artikel beschreibe ich daher kurz wie man diese Panne umgehen kann.
Insgesamt gibt es zwei Methoden die gewünschte Unabhängigkeit vom Adserver zu erreichen. Zum einen durch die einfache Nutzung eines iFrames, zum Anderen indem die Werbung durch ein asynchrones Java Script (AJAX) nachgeladen wird.
Nutzung von iFrames
iFrames werden von Google beinahe gänzlich ignoriert – dies ist in dem Falle auch nicht negativ, da wir nicht wollen, dass unsere Werbeeinblendungen von Google gelistet werden, sondern unser Inhalt. Desweiteren sind iFrames unabhängig vom generellen Pageload der Webseite.
<iframe src="http://adserver.werbeanbieter/banner.js" width="728" height="90" name="Werbung"></iframe>
Nachladen durch asynchrones Java Script (AJAX)
Im folgenden Quellcodeausschnitt zeige ich, wie Werbung vom Adserver abgefragt werden kann unter Nutzung von jQuery um einen asynchronen AJAX-Call zu bewerkstelligen. Das Beispiel ist sehr einfach gehalten, sollte jedoch den Sachverhalt verdeutlichen.
...
<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
$.ajax({
url: "http://adserver.werbeanbieter/banner.js",
cache: true,
async: true,
success: function(html){
$("#Werbebanner").append(html);
}
});
});
-->
</script>
...
</head>
<body>
...
<div id="Werbebanner"></div>
...
Im unwahrscheinlichen Fall, dass ein Adserver die Werbung nicht ausliefern kann (keine Verbindung zum Server), würde das dafür vorgesehene Div einfach leer bleiben. Dem Nutzer fällt das Fehlen von Werbung nicht (negativ) auf, jedoch ist es von stark positiver Natur, dass der Nutzer nicht bis zum Timeout des Servers warten muss um die Webseite vollständig nutzen zu können.
Weitere Beiträge aus dieser Reihe:
- Einleitung: Wie Ladezeiten verkürzt werden können
- Teil 2: Komprimierung von CSS und Java Script
- Teil 3: Komprimierung der auszuliefernden Inhalte mit GZip
- Teil 4: Optimiertes Nutzen von CSS durch Beschränkung in der Strukturtiefe
- Teil 5: Beschränkung der HTTP Requests
- Teil 6: Laden von Elementen auf den Viewport des Nutzers beschränken (Lazy Loading)
- Teil 7: iFrames richtig nutzen (Nachladen externer Inhalte)
- Teil 8: Cachingerfolg erhöhen durch Auslagerungen
- Teil 9: CSS Sprites nutzen
Keine verwandten Themen vorhanden.
