Lazy Load: Websites und Bilder auf der Überholspur

Bilder verursachen Ladezeit. Wir sprechen nicht nur von Datenmenge, sondern auch von HTTP-Anfragen: jedes einzelne Bild verursacht eine neue HTTP-Anfrage, welche den Seitenaufbau verlangsamen. Statistiken zeigen, das eine Website oftmals geschlossen wird, bevor sie überhaupt geladen ist. Warum? Zu lange Ladezeit. Lazy Load hilft (nicht nur) diese Gegebenheit erfolgreich zu umgehen.

Was ist Lazy Load?

“Lazy Load” ist die Bezeichnung für eine Technik, Bilder erst dann zu laden, wenn sie gebraucht werden. Dein Besucher scroolt also über deine Website und sobald ein Bild im Viewport (der sichtbare Bereich deiner Website im Browser) erscheinen soll, wird es geladen. Nicht schon beim Seitenaufrauf.

Alternativ gibt es Lösungen, welche Bilder schon dann laden, wenn sie kurz vor dem Viewport sind. Beispielsweise 100 oder 200 Pixel. Mit hoher Wahrscheinlichkeit wird dein Besucher das Bild also gleich sehen wollen – Du hat also einen kleinen zeitlichen Vorsprung das Bild schon zu laden.

Warum ist Lazy Load wichtig?

User-Experience

Die Benutzererfahrung (neudeutsch User-Experience) wird durch Lazy Load steigen, da deine Website schlanker ist und schneller lädt. Fühlen sich die Besucher auf deiner Website wohl, bleiben sie länger und empfehlen sie öfters weiter. Bleiben sie länger, passiert was? Sie können deine Website besser erforschen, lesen mehr Inhalte und Du wirst somit relevanter für Google. Wenn deine Besucher deine Website empfehlen, passiert was? Doofe Frage…

Site-Speed

Google wird registrieren, das deine Website wesentlich schlanker ist, was nur von Vorteil ist. Google hat bereits mehrmals betont, das schlanke, schnell ladende Websites bevorzugt werden. Sicher, das ist nur ein Faktor, um in den SERPs zu steigen, aber es ist einer. Wieder einer. Und sei es nur ein Kleiner. Und demnächst optimierst Du den nächsten Punkt. Dann ist es wieder einer. Am Ende hast Du eine High-Performance-Website. Tut das alles Not? Frage Dich, was deine Mitbewerber alles tun und ob Du besser dastehen willst. Sodann, alles klar.

Traffic, Traffic, Traffic!

Ebenso erwähnenswert ist der Trafficverbrauch deines Servers. Der wird nämlich sinken. Ebenso der Trafficverbrauch jener Besucher. Bei Flatrates am Home-PC mag das noch irrelevant sein. Nicht aber unbedingt, wenn sie mit Mobilgeräten deine Website besuchen.

Und wenn die Trafficdrosseln der Internetrprovider erst einmal eingeführt sind oder diverse Netzagenturen entscheiden welche Websites bevorzugt schnell ausgeliefert werden, spätestens dann solltest Du Dir Gedanken machen, wie Du deine Website möglichst schlank hältst.

Die Zeit kommt, in welcher 80000er-DSL-Leitung zzgl. Flatrate und uneingeschränkter Nutzung der Vergangenheit angehören. Besser Du bereitest Dich schon jetzt darauf vor, statt später das böse erwachen zu bekommen.

Individuelle Pinterest-Button ohne Plugin

Pinterest. Bekannt, geliebt, teilweise vergöttert. Pinterest bietet auf seiner Website auch einen Generator für den wohl bekannten “Pin-It-Button”. Schön und gut ist dieser Generator aber nicht gerade. Individualisierungswünsche lassen sich damit nicht realisieren. Dieses kleine Tutorial zeigt, wie man den “Pin-It-Button” anpasst bzw. individualisieren kann.

Pin-It-Button anpassen – garnicht so schwer

Zuvor sollte man sich die Frage stellen: was will ich eigentlich? Wie soll der Button angepasst werden und aussehen? Um nicht auf hunderte, gar tausende Individuallösungen eingehen zu müssen, zeige ich das Grundgerüst jener gewollten Individualität. Zuerst zeige ich den “Pin-It-Button”, wie er vom Generator auf Pinterest ausgegeben wird. Dies ist die Variante ohne Zähler.

Zuerst der Code, welcher im Code dort positioniert wird, wo der Button erscheinen soll.

<a href="//pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" ><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>

Zuzüglich muss noch eine kleiner Code auf der Website zwischen <body> und </body> eingefügt werden, welcher eine JavaScript-Datei einbindet. Diese Datei liegt auf dem Server von Pinterest. Generell ist es ja zu bevorzugen, wenn man möglichst wenige Dinge von externen Servern einbindet – aber das ist eine andere Geschichte.

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

Obige Beispiele sehen auf den ersten Blick so aus, als könne man einfach das Bild, welches vom Link umschlossen wird, austauschen und somit frei wählen, welches Element den Pinterest-Link erhalten soll. Falsch. Funktioniert nicht. Viel mehr wird die Grafik auch von JavaScript bestimmt, welche im body eingebunden wird. Lässt man die JavaScript-Datei einfach weg, funktioniert die Funktion nicht…

Pin-It-Button für Individualisten

Wir erkennen also: Einerseits benötigen wir die Funktion der JavaScript-Datei, andererseits müssen wir den Code umschreiben. Nun könnte man den Code aus der Datei extrahieren und in eine eigene externe Datei auslagern. Könnte man. Um mein Beispiel zu veranschaulichen, habe ich den benötigten JavaScript einfach direkt im von uns benötigten Link integriert. Somit steht es mir frei, welches Element ich wie zum Pin-It-Button umwandeln will.

<a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());'>
 
Hier nun der zu verlinkende Inhalt. Ob Bild, Text, Container - was auch immer.
 
</a>

Da nun der benötigte JavaScript schon im Link enthalten ist, kann auf die Einbindung der externen JavaScript-Datei von Pinterest verzichtet werden.

Eigentlich ganz einfach, oder? Wenn man weiß, wie… Du schneidest das nicht ganz mit oder hast Fragen? Schreibe ruhig einen Kommentar. Oder Du hast einfach nicht das Können oder Lust, um diese Technik in die eigene Website zu integrieren? Nicht schlimm – dafür gibt es ja wellseo – einfach anrufen oder anschreiben.