Performance von Websites mit Google AdSense verbessern

Jeder der schon mal die Werbeblöcke von Google AdSense eingebaut hat, der weiß, dass diese mit Hilfe von Javascript eingefügt werden. Jede Referenzierung im HTML-Dokument – egal ob Bilder, CSS, Scripte etc. – verursacht http-Abfragen und vergrößert das Dokument. Das macht sich logischerweise bemerkbar bei der Performance einer Website. So weit, so gut … ist alles allgemein bekannt.

Weniger bekannt ist die Tatsache, dass Javascripte die Browser dazu veranlassen, den Aufbau der Seite (engl. rendering) so lange zu unterbrechen, bis der Script abgearbeitet wurde. In manchen Browsern, wie z. B. IE 6-7 und Firefox 3.0 wird auch der gleichzeitige Download von anderen Komponenten, wie zum Beispiel CSS und Bilder, ebenfalls gestoppt. Daher empfiehlt es sich, wo es möglich ist, die Javascripte am Ende des HTML-Dokumentes, vor dem schließenden body-Tag unterzubringen.

Denn auch wenn sich an der Größe des Dokumentes nichts ändert, so baut sich die komplette Website für den Besucher dennoch schneller auf, weil das Layout un der Inhalt schon aufgebaut sind, bevor sich der Browser den Skripten widmet.

Die Lösung des Problems

Bringt man die Skripte, wie bei den Blöcken von Google AdSense, mitten im Inhalt, dann tritt der negative Effekt auf welchen ich eben beschrieben habe. Um dieses Problem zu lösen gibt es eine interessante Lösung: Non-blocking Google Adsense ads: improve page speed.

Dort wie eigentliche Anzeige rein kommen soll, wird ein leerer div-Block untergebracht:

<div id="adsense" style="height:60px;"></div>

Die Angabe von 60 Pixel für die Höhe muss natürlich an die Größe der jeweiligen Anzeige angepasst werden.

Ganz am Ende des Dokuments wird ein zusätzlicher div-Block untergebracht:

<div id="adsense-loader" style="display:block;">
 [der AdSense-Code]
 <script type="text/javascript">
 var loader = document.getElementById('adsense-loader');
 document.getElementById("adsense").appendChild(loader);
 </script>
</div>

Dieser Block beinhaltet den Code der AdSense-Anzeige und einen kleinen Zusatz, der den Inhalt dieses Block in den oberen “beamt”. Dadurch haben wir zwar eine Anzeige mitten im Inhalt, diese stört aber nicht den Rendering-Prozess.

Be Sociable, Share!

•