Willkommen im STRATO Blog. Hier gibt es News und Tipps rund ums Hosting.

 

Menu

Veröffentlicht am: 18. Oktober 2018

STRATO Ladebalken 2

Ladezeit verbessern, Teil 2: Bilder verkleinern und komprimieren

Zu große Bilder und unzureichende Komprimierung der Bild-Dateien sind typischerweise die größten Performance-Bremsen in einem WordPress-Blog. Mit wenig Aufwand kannst Du hier viel erreichen.

In der Optimierung von Bildern steckt meist das größte Potenzial, um die Ladezeiten Deines Blogs zu reduzieren. Deshalb solltest Du entweder ein Plugin einsetzen, das Bild-Dateien automatisch auf die richtig Größe herunterrechnet und komprimiert, oder dies vor dem Upload selbst tun. Je nach Motiv lassen sich Bild-Dateien mit guter Komprimierung mehr als halbieren.

Der Vorteil von Plugins für diesen Zweck wie beispielsweise Smush Image Compression and Optimization oder reSmush.it Image Optimizer: Sie optimieren die Bilder automatisch beim Hochladen in die Medienbibliothek von WordPress. Für die meisten Blogger ist das die einfachste Möglichkeit, mit kleineren Bild-Dateien viel Ladezeit zu sparen.

Bildoptimierung mit Smush: Nur an der Info zur Komprimierung ist überhaupt zu erkennen, dass Smush aktiv geworden ist – und natürlich an der reduzierten Dateigröße.

Bildoptimierung mit Smush: Nur an der Info zur Komprimierung ist überhaupt zu erkennen, dass Smush aktiv geworden ist – und natürlich an der reduzierten Dateigröße.

Kennst Du Dich mit Photoshop oder einer anderen Bildbearbeitungssoftware aus, kannst Du Deine Bilder aber auch schon vor dem Upload selbst optimieren. Damit hast Du die volle Kontrolle über jedes einzelne Bild und kannst den besten Kompromiss zwischen Dateigröße und Bildqualität ausloten.

Optimierst Du von Hand, dann verkleinerst Du zunächst das Bild auf die maximale in Deinem WordPress-Theme benötigte Größe. Die entsprechenden Pixel-Werte findest Du unter Einstellungen – Medien. So verhinderst Du Qualitätsverluste beim sonst nötigen automatischen Verkleinern des Bildes in WordPress. Beim Speichern der Bild-Datei kannst Du dann noch mit verschiedenen Kompressionsstufen testen, wie Du bei noch guter optischer Qualität möglichst kleine Dateien erzeugst. Als guter Anfangswert kann dabei eine Kompression von 65 Prozent oder Kompressionsstufe 8 dienen.

Denke auch daran, überflüssige Meta-Daten wie etwa GPS- oder Belichtungsdaten Deiner Kamera aus den Bilddateien zu entfernen. Das geht beispielsweise mit Batch Purifier Lite (kostenlos für Jpg-Dateien). Die Windows-eigene Funktion (Datei-Eigenschaften – Details – Eigenschaften und persönliche Informationen entfernen) eignet sich dafür nicht, weil die Dateien dabei sogar größer werden.

Auch spezialisierte, kostenlose Software wie Riot oder Caesium Image Compressor leistet Dir gute Dienste, wenn Du Dateien komprimieren oder Metadaten entfernen möchtest.

Bild-Komprimierung mit RIOT – ein Vorher-Nachher-Vergleich.

Bild-Komprimierung mit RIOT – ein Vorher-Nachher-Vergleich.

„Lazy Load“ von Bildern

Aber selbst verkleinert und gut komprimiert müssen für Bilder relativ viele Daten an den Browser übertragen werden. Das verlängert jedoch die Ladezeit. Je schneller ein Leser auf Deinem Blog Inhalte sieht, desto geringer ist das Risiko, dass er Deiner Seite sofort wieder verlässt.

Ein wirkungsvoller Trick ist dabei, zuerst nur die Inhalte laden zu lassen, die ganz oben auf der Seite stehen. Zunächst zurückstellen solltest Du insbesondere Bilder, die erst in Absätzen weiter unten auftauchen.

Die Technik nennt sich „Lazy Load“. Ein JavaScript steuert dabei die Ladereihenfolge von Bildern und fordert vom Server zuerst diejenigen Bilder an, die oben auf der Seite stehen und deshalb als erste sichtbar sind. Erst wenn diese Bilder geladen sind, folgt der Rest.

Für „Lazy Load“ von Bildern gibt es zahlreiche Plugins. Das wohl bekannteste ist BJ Lazy Load, das sich neben Bildern auch um iFrames kümmert, also beispielsweise eingebettete YouTube-Videos.

Mit BJ Lazy Load steuerst Du, dass bestimmte Inhalte Deiner Seite erst später geladen werden und Du auch Ausnahmen definieren kannst.

Mit BJ Lazy Load steuerst Du, dass bestimmte Inhalte Deiner Seite erst später geladen werden und Du auch Ausnahmen definieren kannst.

Das Plugin-Paket Jetpack bietet unter Schreiben – Performance & Speed ebenfalls eine solche Funktion, die dort „verzögertes Laden von Bildern“ heißt. Auch bei dieser Jetpack-Funktion solltest Du Dich aber mit dem datenschutzrechtlichen Aspekt von Jetpack auseinandersetzen.

Eigene Lazy-Load-Optionen findest Du zudem in manchen Cache-Plugins, was vor allem ein fehlerfreies Zusammenspiel mit dem Cache sicherstellt.

Die Integrierte Lazy-Load-Funktion im Cache-Plugin WP Rocket.

Die Integrierte Lazy-Load-Funktion im Cache-Plugin WP Rocket.

So einfach es klingt, so schwierig kann Lazy Load in der praktischen Umsetzung sein. Konflikte kann es beispielsweise mit Cache-Plugins geben, wenn erst später geladenen Bilder nicht mit gecacht werden. Und JavaScript-Fehler im Browser führen eventuell dazu, dass manche Bilder überhaupt nicht nachgeladen werden. Hier solltest Du also intensiv in unterschiedlichen Browsern und auf verschiedenen Endgeräten testen. So gehst Du sicher, dass ein entsprechendes Lazy-Load-Plugin für Dein Blog problemlos funktioniert.

Mit der Optimierung der Bilder hast Du Dein Blog wesentlich schneller gemacht. Der Reiz und die Versuchung, das Blog noch weiter zu beschleunigen, ist groß – beispielsweise mit der häufig empfohlenen Verwendung eines Content Delivery Networks für Bilder. Doch nicht alle Tipps zu diesem Thema sind wirklich zielführend und können sogar große Probleme machen. Teil 3 der Serie zu Optimierungstipps zeigt Dir, wie Du Online-Tools zum Aufspüren weiterer Leistungsbremsen in Deinem Blog findest und welche Tipps Du getrost ignorieren kannst – er erscheint am 25.10.2018.

Tags: Wordpress

Der Autor:

Autor: Franz Neumeier

Ich bin Franz Neumeier, war jahrelang Chefredakteur bei IT-Zeitschriften wie PC Professionell, Internet Professionell und Internet Magazin. Inzwischen habe ich mich als freier Autor vor allem auf Kreuzfahrt-Themen spezialisiert, betreibe mehrere Websites und schreibe für STRATO über verschiedene Themen, vor allem über WordPress und übers Bloggen.

Hinterlasse eine Antwort

Bitte beachte, dass sich Dein Kommentar auf den Artikel beziehen sollte. Wenn Du ein persönliches Kundenanliegen besprechen möchtest, wende Dich bitte an unseren Kundenservice auf Facebook, Twitter oder über Hilfe & Kontakt.
Wir freuen uns, wenn Du uns Deinen Namen hinterlässt. So wissen wir, wie wir Dich bei unserer Antwort ansprechen können.
Wenn Du Deine E-Mail-Adresse einträgst, wirst Du per Mail über unsere Antwort informiert. Sie wird zum Schutz Deiner Daten aber nicht veröffentlicht. Beide Angaben sind freiwillig.

Hier bloggen

Lisa Kopelmann
Ist Ansprechpartnerin für den Blog und berichtet über aktuelle STRATO Themen

Michael Poguntke
Schreibt über den Online-Speicher HiDrive, den Homepage-Baukasten, Webshops und Server

Thomas Ritter
Berichtet über Neuigkeiten aus dem Unternehmen

Bianca Restorff-Adrion
Schreibt über Karriere & die Menschen bei STRATO

Christian Lingnau
Bloggt über WordPress & andere CMS

Franz Neumeier
Gibt Tipps zum erfolgreichen Bloggen

Sven Hähle
Kennt sich bei Domains hervorragend aus

Patrick Schroeder
Erzählt die Stories unserer Kunden