{"id":42458,"date":"2018-10-18T12:06:21","date_gmt":"2018-10-18T10:06:21","guid":{"rendered":"https:\/\/strato.de\/blog\/?p=42458"},"modified":"2019-12-23T15:00:52","modified_gmt":"2019-12-23T14:00:52","slug":"ladezeit-blog-verbessern-teil-2","status":"publish","type":"post","link":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/ladezeit-blog-verbessern-teil-2\/","title":{"rendered":"Ladezeit verbessern, Teil 2: Bilder verkleinern und komprimieren"},"content":{"rendered":"

Zu gro\u00dfe Bilder und unzureichende Komprimierung der Bild-Dateien sind typischerweise die gr\u00f6\u00dften Performance-Bremsen in einem WordPress-Blog. Mit wenig Aufwand kannst Du hier viel erreichen.<\/p>\n

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

Der Vorteil von Plugins f\u00fcr diesen Zweck wie beispielsweise Smush Image Compression and Optimization<\/a> oder reSmush.it Image Optimizer<\/a>: Sie optimieren die Bilder automatisch beim Hochladen in die Medienbibliothek von WordPress. F\u00fcr die meisten Blogger ist das die einfachste M\u00f6glichkeit, mit kleineren Bild-Dateien viel Ladezeit zu sparen.<\/p>\n

\"Bildoptimierung
Bildoptimierung mit Smush: Nur an der Info zur Komprimierung ist \u00fcberhaupt zu erkennen, dass Smush aktiv geworden ist \u2013 und nat\u00fcrlich an der reduzierten Dateigr\u00f6\u00dfe.<\/figcaption><\/figure>\n

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 \u00fcber jedes einzelne Bild und kannst den besten Kompromiss zwischen Dateigr\u00f6\u00dfe und Bildqualit\u00e4t ausloten.<\/p>\n

Optimierst Du von Hand, dann verkleinerst Du zun\u00e4chst das Bild auf die maximale in Deinem WordPress-Theme ben\u00f6tigte Gr\u00f6\u00dfe. Die entsprechenden Pixel-Werte findest Du unter Einstellungen \u2013 Medien<\/em>. So verhinderst Du Qualit\u00e4tsverluste beim sonst n\u00f6tigen 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\u00e4t m\u00f6glichst kleine Dateien erzeugst. Als guter Anfangswert kann dabei eine Kompression von 65 Prozent oder Kompressionsstufe 8 dienen.<\/p>\n

Denke auch daran, \u00fcberfl\u00fcssige Meta-Daten wie etwa GPS- oder Belichtungsdaten Deiner Kamera aus den Bilddateien zu entfernen. Das geht beispielsweise mit Batch Purifier Lite<\/a> (kostenlos f\u00fcr Jpg-Dateien). Die Windows-eigene Funktion (Datei-Eigenschaften \u2013 Details \u2013 Eigenschaften und pers\u00f6nliche Informationen entfernen<\/em>) eignet sich daf\u00fcr nicht, weil die Dateien dabei sogar gr\u00f6\u00dfer werden.<\/p>\n

Auch spezialisierte, kostenlose Software wie Riot<\/a> oder Caesium Image Compressor<\/a> leistet Dir gute Dienste, wenn Du Dateien komprimieren oder Metadaten entfernen m\u00f6chtest.<\/p>\n

\"Bild-Komprimierung
Bild-Komprimierung mit RIOT \u2013 ein Vorher-Nachher-Vergleich.<\/figcaption><\/figure>\n

\u201eLazy Load\u201c von Bildern<\/h2>\n

Aber selbst verkleinert und gut komprimiert m\u00fcssen f\u00fcr Bilder relativ viele Daten an den Browser \u00fcbertragen werden. Das verl\u00e4ngert jedoch die Ladezeit. Je schneller ein Leser auf Deinem Blog Inhalte sieht, desto geringer ist das Risiko, dass er Deiner Seite sofort wieder verl\u00e4sst.<\/p>\n

Ein wirkungsvoller Trick ist dabei, zuerst nur die Inhalte laden zu lassen, die ganz oben auf der Seite stehen. Zun\u00e4chst zur\u00fcckstellen solltest Du insbesondere Bilder, die erst in Abs\u00e4tzen weiter unten auftauchen.<\/p>\n

Die Technik nennt sich \u201eLazy Load\u201c. 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.<\/p>\n

F\u00fcr \u201eLazy Load\u201c von Bildern gibt es zahlreiche Plugins. Das wohl bekannteste ist BJ Lazy Load<\/a>, das sich neben Bildern auch um iFrames k\u00fcmmert, also beispielsweise eingebettete YouTube-Videos.<\/p>\n

\"Mit
Mit BJ Lazy Load steuerst Du, dass bestimmte Inhalte Deiner Seite erst sp\u00e4ter geladen werden und Du auch Ausnahmen definieren kannst.<\/figcaption><\/figure>\n

Das Plugin-Paket Jetpack<\/a> bietet unter Schreiben \u2013 Performance & Speed<\/em> ebenfalls eine solche Funktion, die dort \u201everz\u00f6gertes Laden von Bildern\u201c hei\u00dft. Auch bei dieser Jetpack-Funktion solltest Du Dich aber mit dem datenschutzrechtlichen Aspekt von Jetpack auseinandersetzen.<\/p>\n

Eigene Lazy-Load-Optionen findest Du zudem in manchen Cache-Plugins, was vor allem ein fehlerfreies Zusammenspiel mit dem Cache sicherstellt.<\/p>\n

\"Die
Die Integrierte Lazy-Load-Funktion im Cache-Plugin WP Rocket.<\/figcaption><\/figure>\n

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\u00e4ter geladenen Bilder nicht mit gecacht werden. Und JavaScript-Fehler im Browser f\u00fchren eventuell dazu, dass manche Bilder \u00fcberhaupt nicht nachgeladen werden. Hier solltest Du also intensiv in unterschiedlichen Browsern und auf verschiedenen Endger\u00e4ten testen. So gehst Du sicher, dass ein entsprechendes Lazy-Load-Plugin f\u00fcr Dein Blog problemlos funktioniert.<\/p>\n

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\u00df \u2013 beispielsweise mit der h\u00e4ufig empfohlenen Verwendung eines Content Delivery Networks f\u00fcr Bilder. Doch nicht alle Tipps zu diesem Thema sind wirklich zielf\u00fchrend und k\u00f6nnen sogar gro\u00dfe Probleme machen. Teil 3 der Serie<\/a> zu Optimierungstipps zeigt Dir, wie Du Online-Tools zum Aufsp\u00fcren weiterer Leistungsbremsen in Deinem Blog findest und welche Tipps Du getrost ignorieren kannst \u2013 er erscheint am 25.10.2018.<\/p>\n","protected":false},"excerpt":{"rendered":"

Zu gro\u00dfe Bilder und unzureichende Komprimierung der Bild-Dateien sind typischerweise die gr\u00f6\u00dften Performance-Bremsen in einem WordPress-Blog. Mit wenig Aufwand kannst Du hier viel erreichen.<\/p>\n","protected":false},"author":20,"featured_media":42658,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,490],"tags":[55],"acf":[],"yoast_head":"\nLadezeit verbessern, Teil 2: Bilder verkleinern und komprimieren<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ladezeit verbessern, Teil 2: Bilder verkleinern und komprimieren\" \/>\n<meta property=\"og:description\" content=\"Zu gro\u00dfe Bilder und unzureichende Komprimierung der Bild-Dateien sind typischerweise die gr\u00f6\u00dften Performance-Bremsen in einem WordPress-Blog. Mit wenig Aufwand kannst Du hier viel erreichen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/ladezeit-blog-verbessern-teil-2\/\" \/>\n<meta property=\"og:site_name\" content=\"STRATO Blog DE Staging\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/strato\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-18T10:06:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-12-23T14:00:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2018\/09\/2_Batterie.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"728\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"xxxxxxxx\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@STRATO_AG\" \/>\n<meta name=\"twitter:site\" content=\"@STRATO_AG\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"xxxxxxxx\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/ladezeit-blog-verbessern-teil-2\/\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/ladezeit-blog-verbessern-teil-2\/\",\"name\":\"Ladezeit verbessern, Teil 2: Bilder verkleinern und komprimieren\",\"isPartOf\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website\"},\"datePublished\":\"2018-10-18T10:06:21+00:00\",\"dateModified\":\"2019-12-23T14:00:52+00:00\",\"author\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/7787419a54ecb752a02b96a001a49ba1\"},\"breadcrumb\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/ladezeit-blog-verbessern-teil-2\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/ladezeit-blog-verbessern-teil-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/ladezeit-blog-verbessern-teil-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ladezeit verbessern, Teil 2: Bilder verkleinern und komprimieren\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/\",\"name\":\"STRATO Blog DE Staging\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/7787419a54ecb752a02b96a001a49ba1\",\"name\":\"xxxxxxxx\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0f9de07c54a148cb53d997fdff0710aa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0f9de07c54a148cb53d997fdff0710aa?s=96&d=mm&r=g\",\"caption\":\"xxxxxxxx\"},\"description\":\"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 aus diesen Praxiserfahrungen heraus weiterhin auch \u00fcber Webhosting- und Webpublishing-Themen.\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/author\/xxxxxxxx\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ladezeit verbessern, Teil 2: Bilder verkleinern und komprimieren","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"de_DE","og_type":"article","og_title":"Ladezeit verbessern, Teil 2: Bilder verkleinern und komprimieren","og_description":"Zu gro\u00dfe Bilder und unzureichende Komprimierung der Bild-Dateien sind typischerweise die gr\u00f6\u00dften Performance-Bremsen in einem WordPress-Blog. Mit wenig Aufwand kannst Du hier viel erreichen.","og_url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/ladezeit-blog-verbessern-teil-2\/","og_site_name":"STRATO Blog DE Staging","article_publisher":"https:\/\/www.facebook.com\/strato","article_published_time":"2018-10-18T10:06:21+00:00","article_modified_time":"2019-12-23T14:00:52+00:00","og_image":[{"width":728,"height":410,"url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2018\/09\/2_Batterie.jpg","type":"image\/jpeg"}],"author":"xxxxxxxx","twitter_card":"summary_large_image","twitter_creator":"@STRATO_AG","twitter_site":"@STRATO_AG","twitter_misc":{"Verfasst von":"xxxxxxxx","Gesch\u00e4tzte Lesezeit":"4 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/ladezeit-blog-verbessern-teil-2\/","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/ladezeit-blog-verbessern-teil-2\/","name":"Ladezeit verbessern, Teil 2: Bilder verkleinern und komprimieren","isPartOf":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website"},"datePublished":"2018-10-18T10:06:21+00:00","dateModified":"2019-12-23T14:00:52+00:00","author":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/7787419a54ecb752a02b96a001a49ba1"},"breadcrumb":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/ladezeit-blog-verbessern-teil-2\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stg.blog-de.strato.wpcust.com\/blog\/ladezeit-blog-verbessern-teil-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/ladezeit-blog-verbessern-teil-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Ladezeit verbessern, Teil 2: Bilder verkleinern und komprimieren"}]},{"@type":"WebSite","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/","name":"STRATO Blog DE Staging","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"Person","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/7787419a54ecb752a02b96a001a49ba1","name":"xxxxxxxx","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0f9de07c54a148cb53d997fdff0710aa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0f9de07c54a148cb53d997fdff0710aa?s=96&d=mm&r=g","caption":"xxxxxxxx"},"description":"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 aus diesen Praxiserfahrungen heraus weiterhin auch \u00fcber Webhosting- und Webpublishing-Themen.","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/author\/xxxxxxxx\/"}]}},"_links":{"self":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/42458"}],"collection":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/comments?post=42458"}],"version-history":[{"count":9,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/42458\/revisions"}],"predecessor-version":[{"id":60508,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/42458\/revisions\/60508"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/media\/42658"}],"wp:attachment":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/media?parent=42458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/categories?post=42458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/tags?post=42458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}