Crazy Lazy WordPress Plugin – Bilder nachladen leicht gemacht!

WordPress Plugins gibt es mehr als man braucht. Eines, das bei mir aber nicht fehlen darf ist Crazy Lazy von Sergej Müller. Deswegen möchte ich euch das Plugin heute vorstellen.

Nachladen von Bildern leicht gemacht

Wer mit der Zeit geht muss immer wieder seine Technik überdenken und optimieren. Die Ladegeschwindigkeit einer Website spielt trotz schneller Internet-Leitungen immer noch eine wichtige Rolle. Vielleicht sogar mehr denn je. Denn nicht nur der Besucher, sondern auch Google (und natürlich auch andere Suchmaschinen) legt großen Wert auf eine schnell ladende Website.
Um dies umzusetzen gibt es etliche technische Baustellen die man bearbeiten kann. Eine größere Baustelle ist meist das Thema Bilder bzw. die Optimierung jener.

Das diese eine möglichst geringe Dateigröße bei möglichst wenig Qualitätsverlust haben sollten ist klar und teilweise schon ein Mysterium für sich, wenn man technisch nicht bewandt ist. Eine weitere Möglichkeit ist das Nachladen von Bildern, im technischen Sprachgebrauch als „Lazy Load“ bekannt.

Dabei werden definierte Bilder erst dann geladen, wenn sie in den sichtbaren Bereich des Nutzers kommen. Das vermindert die Ladezeit teilweise erheblich (je nach Website-Aufbau), denn alle Bilder die nicht im sichtbaren Bereich liegen werden auch (noch) nicht geladen. Sergej, der Programmierer hinter dem besagten WordPress Plugin, hat das in einem kurzen Video veranschaulicht:

WordPress Plugin Crazy Lazy

Für alle Blogger die mit der technischen Implementierung nichts zu tun haben möchten und dies einfach und gut umgesetzt haben wollen eignet sich Crazy Lazy.

Das Plugin wird einfach hochgeladen, oder über die Plugin-Verwaltung von WordPress installiert, aktiviert und fertig. Das Plugin berücksichtigt alle (Beitrags-) Bilder die über die Mediathek eingebunden werden und funktioniert auch mit allen gängigen Caching-Plugins.

Sergej greift dabei auf eine von ihm weiterentwickelte Version von Unveil.js zurück.

Formatierung der Bildplatzhalter

Wer die Bildplatzhalter formatieren möchte, kann dies einfach tun. Zwei Beispiele zum Ansprechen der Platzhalter von der Plugin-Seite:

img[src*='data:image/gif;base64'] {
    border: 1px dashed #dbdbdb;
}

img.crazy_lazy {
    background: url(/wp-includes/images/wpspin-2x.gif) no-repeat center center;
    background-size: 16px 16px;
}

Vielmehr gibt es eigentlich auch nicht dazu zu sagen. Für mich ein Plugin das ich nicht missen möchte.

Hier kommt ihr zur Plugin-Seite