Schnelle Ladezeit trotz Werbung im Blog – So gehts

Schnelle Ladezeit trotz Werbung im Blog - So gehts

Ich weiß, die Überschrift ist zum Kotzen, aber das Thema ist wirklich großartig, nicht nur, weil es mich die letzten Monate beschäftigt hat. Außerdem ist es mir auch ein kleines Anliegen, das Netz ein bisschen besser zu machen – wer drauf geachtet hat, wird festgestellt haben, dass wihel.de seit einigen Wochen vollständig über SSL läuft. Was bedeutet: wenn ihr hier drauf geht, seid ihr total sicher. Zwar nicht sicherer in Bezug auf Geschlechtskrankheiten, aber definitiv sicherer als die Meisterschaft der Bayern, versprochen.

Ein Problem, was man als Blogger schnell bekommt: sobald man Werbung einbindet, geht es mit der Geschwindigkeit der Webseite schnell den Berg runter. Natürlich gibt es coole Vermarkter und Einbindungen, die das parallele Laden (async bzw. defer loading) ermöglichen, aber im Grunde leben alle in ihrer eigenen Filterblase und kümmern sich nur darum, dass ihr Scheiß super läuft – wie andere damit klar kommen, ist eher zweitrangig. Gleichzeitig gibt es wohl noch Browser da draußen, die mit dem defer-Attribut nicht so richtig klar kommen und auch das async-Attribut hat so seine Einschränkungen.

Stein des Anstoßes bei mir war aber ein anderes Szenario: mobile friendly. Wer mit dem iPhone oder auch dem iPad wihel.de schon mal besucht hat, wird festgestellt haben, dass die Seite ein bisschen anders aussieht – hoffentlich so, dass es auf den Bildschirmen gut aussieht. Wie genau das alles funktioniert, könnt ihr gern googlen, das würde den Rahmen sprengen – aber ein wesentlicher Bestandteil ist das ausblenden von Elementen. So gibt es zum Beispiel auf dem Smartphone keine Sidebar. Wäre für kleinere Bildschirme nur störend, also fliegt es raus.

Was mich dabei immer mehr gestört hat: nur weil man es nicht sieht, heißt das nicht, dass es nicht trotzdem geladen wird. Und genau das wollte ich verhindern. Wenn man nur den Müll rausbringt, packt man schließlich auch nicht seine Koffer für eine zweiwöchige Reise.

Also hab ich gesucht, getestet, verworfen und unfassbar viel geflucht – bis ich endlich Lazy Ads von James Wragg gefunden hab. Und das ist einfach nur großartig, weil es schlichtweg mit fast jedem AdCode funktioniert (zu den Ausnahmen später mehr). Oder um es anders auszudrücken: das ist der heilige Gral in Bezug auf Ladezeit und Werbeeinbindungen.

Was das ganze so fantastisch macht: ihr bindet letztendlich eine Code-Zeile in eure Kopfzeile (header.php) der Webseite ein und ändert leicht eure Werbeeinbeinbindungen.

Beispiel

Ein typischer Werbecode könnte zum Beispiel so aussehen:

<script src="cooler-werbecode.js"></script>

Einfach da hin, wo die Werbung angezeigt werden soll und fertig. Das Problem ist: Seiten werden von oben nach unten geladen. Kommt der Browser beim Laden also an genau die Stelle, wo der Werbecode ist, lädt er erst diesen und dann den Rest der Seite. Normalerweise werden über diesen Code noch andere Sachen nachgeladen, was gern mal ein bisschen dauern kann. Google stuft das als Render-Blocking Code ein, was schlichtweg Scheiße ist.

Mit Lazy Ads sieht die Einbindung dann so aus:

<div class="ad" data-lazyad>
    <script type="text/lazyad">
      <!--
        <script src="cooler-werbecode.js"></script>
      -->
    </script>
</div>

Wie man also sieht, einfach ein bisschen Code vor und hinter der Einbindung und die Magie kann beginnen. Wichtig ist, dass diese beiden Kommentarpfeile erhalten bleiben, denn nur darüber wird erkannt, dass irgendwas mit Javascript rumgewuselt werden soll. Ich hab die Kommentare bei mir noch ein bisschen abgeändert, sodass mein finaler Code so aussieht:

<div class="ad" data-lazyad>
    <script type="text/lazyad">
      <!--lazy
        <script src="cooler-werbecode.js"></script>
      lazy-->
    </script>
</div>

Warum? Weil der Code, der durch Werbeeinbindungen nachgeladen wird, gern auch mal selbst Kommentare enthalten kann und dann kommt alles durcheinander. Die Wahrscheinlichkeit, dass jemand einen Kommentar einbaut, der dieses „lazy“ mit drin hat, ist hingegen recht gering.

Mobile

Für die mobile Ansicht wird es richtig genial, denn mit Hilfe von media-queries kann man das Laden direkt blockieren. Media Queries dienen dazu, dass bestimmte Anweisungen für das Aussehen (also das css) abhängig von der Bildschirmgröße greifen. Wenn ihr wihel.de zum Beispiel auf dem iPad aufruft und einfach mal das Gerät dreht, seht ihr, dass die Darstellung sich direkt ändert. Das funktioniert über zwei Media Queries, die einfach sagen: wenn hochkannt, dann das und das – wenn quer, dann das und das.

Bei Lazy Ads ist es ähnlich – aus

<div class="ad" data-lazyad>

wird zum Beispiel einfach

<div class="ad" data-lazyad data-matchmedia="only screen and (min-width: 800px)">

was wiedeurm bedeutet, dass das enthaltene Javascript erst ab einer Bildschirmbreite von 800px Breite aktiviert wird. Und das war schon immer genau das, was ich wollte! Geiel!!!!111

Schnelle Ladezeit trotz Werbung im Blog - So gehts

Ausnahmen

Ich habe hier so sämtliche Werbeinbindungen optimieren können, sodass Google definitiv nichts mehr zu meckern hat, was das Laden in irgendeiner Form verzögert. Aber natürlich gibt es auch hier ausnahmen und diese heißt Google Adsense. Der Adsense Code sieht ein bisschen anders aus, als die üblichen Werbeeinbindungen.

Ist das schlecht? Nein, ist es nicht, denn Google kann von Haus aus async ausliefern und das auch so, dass eigentlich kein Browser damit Probleme hat. Kann man also getrost ignorieren.

Dieser ganze Kram funktioniert natürlich nicht nur für Werbeinbindungen, sondern für nahezu jede Einbindung dieser Art. Das wären zum Beispiel Zählpixel (wobei man natürlich sagen muss, warum sollte man ein Zählpixel ausschließen wollen?), aber auch anderen Kram, den man zum Beispiel auf Smartphones nicht haben will. Wichtig ist, wie gesagt nur, dass die Kommentare im Code erhalten bleiben – also beim Minifying aufpassen!

Das war ausnahmsweise mal sehr technisch – aber es ist einfach großartig und einfach jeder Seitenbesucher wird es euch danken. Wirklich!

Genaue Anweisungen zur Installation und mehr findet ihr hier auf GitHub. Und wer Hilfe braucht bei der Abänderung der Kommentare, damit es nicht mit anderen kollidiert, schreibt einfach kurz in die Kommentare.

Also auf, auf – schreibt eurem Hoster oder Server-Menschen, dass er den Kram installieren soll.

[Klischee-Coder-Bild & Katzenbild via shutterstock]

Über Martin

Martin
Technikbegeistert und immer auf der Suche nach spannenden, beeindruckenden und/oder lustigen Themen schreibt Martin neben seinem Hauptberuf täglich mehrere Artikel für wihel.de. Oder wie er es beschreibt: Andere teilen ihre Internetperlen lediglich mit ihren Freunden, wir teilen Sie mit allen, die es interessiert. Alle Beiträge von Martin ansehen.

Sag was dazu!

Kürzlich