Schnelleres WordPress durch kleinere Bilder

4. Dezember 2009 Kategorie: WordPress, geschrieben von: caschy

Vor kurzem dachte ich mal: hau deine ganzen Screenshots immer in den letzetn Teil deiner Beiträge, sodass die Startseite frei von dicken Grafiken bleibt. War keine tolle Idee, die Leute fanden es zu nackig und forderten die Bilder auf der Startseite zurück. Recht hatten sie, es sieht schon besser aus. Bilder haben natürlich einen Nachteil: in einer gewissen Größe (Abmessungen) und Qualität kommen natürlich einige Kilobyte zusammen sofern man in fast jedem Beitrag Bilder hat und zudem zehn Beiträge auf der Startseite hat. Mich selber stört das ja nicht, habe ja DSL 16000. Aber ich sollte ja auch mal an meine Leser denken, nicht wahr?

chart

So ist es natürlich kein Wunder, dass das neue Speedtool der Google Webmaster Tools folgendes feststellt: “Im Durchschnitt benötigen Seiten auf Ihrer Website 11,6 Sekunden zum Laden (aktualisiert am 02.12.2009). Dies ist langsamer als 95 % der Websites. Das folgende Diagramm zeigt an, wie sich die durchschnittliche Ladezeit Ihrer Website in den letzten Monaten verändert hat. Zu Ihrer Information wird auch der 20%-Quantil aller Websites angezeigt, wobei die langsamen und schnellen Ladezeiten voneinander getrennt dargestellt werden”.

Arg langsam. Was tun? Auf Grafiken verzichten? Code aufwändig mit irgendwelchen Plugins komprimieren und mich freuen, wenn nichts mehr läuft? Jedes Bild zeitaufwendig (Zeit ist mein Luxusgut Nummer 1) komprimieren & justieren sodass ich mit dem Mix aus Qualität und Dateigröße zufrieden bin? Irgendeinen der zahllosen Onlinedienste beanspruchen, die mir meine Bilder komprimieren, dies aber wiederum auch von fragwürdiger Qualität und mit einem hohen Zeitaufwand?

Des Weiteren: wenn ich größere Bilder hochlade und im Blog skaliere, dann werden automatisiert Thumbnails erstellt. Wer optimiert diese?

Die für mich beste Lösung habe ich gestern im Blog von Guido Mühlwitz gefunden, dass ich jedem Webworker übrigens lesetechnisch ans Herz lege. WP-Smush.it heisst das Plugin für WordPress, welches automatisiert Bilder und Thumbnails komprimiert. Dazu zapft man die API von Yahoos Smush. it an.

Bildschirmfoto 2009-12-04 um 06.48.11

Ganz rechts seht ihr die Arbeit, die WP-Smush.it verrichtet. Völlig automatisch natürlich. Sieht jetzt zwar nicht so viel aus, wird sich aber läppern. Ich versuche in Zukunft nun mal meine Bilder bereits lokal ein wenigen zu verkleinern, den Rest soll WP-Smush.it erledigen. Mal sehen was der Speedtest dann mal in einem Monat sagt. Übrigens: wer einen Fehler bei WP-Smush.it (kann man sehen, wenn man in der Mediathek von Hand “smusht”) angezeigt bekommt, der sollte die Datei wp-smushit.php öffnen und die Anweisungen von Dominik befolgen.

»

Gefällt dir der Artikel?
Dann teile ihn mit deinen Freunden.
Nutze dafür einfach unsere Links:
Über den Autor: caschy

Hallo, ich bin Carsten! Dortmunder im Norden, Freund gepflegter Technik, BVB-Maniac und Gründer dieses Blogs. Auch zu finden bei Twitter, Google+, Facebook, XING, Linkedin und YouTube.

Carsten hat bereits 15452 Artikel geschrieben.


37 Kommentare

Guido 4. Dezember 2009 um 07:26 Uhr

Hallo,

und ich dachte ich mit meinen 8 Sekunden wäre schlecht! Glückwunsch: du bist der neue Spitzenreiter! :) Ich glaube gerade bei Screenshots kann man PNG immens optimieren, da ein Bildausschnitt je nach Capture-Programm nur einen Teil der Farbpalette benutzt, aber die Palette des gesamten Bildschirms gespeichert wird!

Und zu den Zahlen von den Webmaster Tools noch eine kleine Anmerkung für alle die, die WP Super Cache verwenden. In dessen Config wird explizit angegeben das die Seiten für den Google Bot nicht gecached werden sollen (was so sein muss!). Ergo ist die Seitenauslieferung beim Bot langsamer als “normal”. Die Ladezeiten die uns die Google Webmaster Tools präsentieren sind demnach eher als Anregung zu verstehen :)

Gruß

Guido

Herr Olsen 4. Dezember 2009 um 07:53 Uhr

Die Geschwindigkeitsanalyse von Google kannst Du vergessen.
Ich habe genau die gleichen Ergebnisse wie Du. Führe ich die Netzwerkanalyse vom Firebug lokal auf einem meiner Rechner aus komme ich zu wesentlich besseren und plausibleren Ergebnissen. (Natürlich mit leerem Cache).
Außerdem fällt die Analyse eines eventuellen Bottlenecks damit wesentlich leichter, weil Firebug die Ladezeit jedes Elements der Site anzeigt.

Guido 4. Dezember 2009 um 07:54 Uhr

Klaro @Herr Olsen – du analysierst ja wahrscheinlich die gecachte Version :)

caschy 4. Dezember 2009 um 08:02 Uhr

Hier wird übrigens nicht gecacht.

stardust 4. Dezember 2009 um 08:13 Uhr

so oder so. optimieren ist nie ein fehler. und wenn ich statt 13 nur 10 sekunden draus machen kann sind es bei 20 aufrufen am tag schon 1 minute lebenszeit. mal abgesehen von der entlastung des internet. und bekannte seiten wie deine caschy haben ja einen größeren anteil am traffic als die site der bäckerei von nebenan.

ChackZz 4. Dezember 2009 um 08:13 Uhr

War auch davon ausgegangen, ich sei mit meinen 6 Sekunden (und langsamer als 75% der Websites) schon relativ schlecht :D

Hab das gestern auch installiert und muss sagen, ist eine sehr gelungene Sache.

Nils 4. Dezember 2009 um 08:20 Uhr

WP-Smush.it setze ich auch schon seit geraumer Zeit ein und bin damit wirklich sehr zufrieden. Ohne Bilder auf der Startseite sähe das schlichte Theme bei mir auch viel zu langweilig aus. Cache Plugins habe ich mittlerweile alle deaktiviert. Damit hab ich eher schlechte Erfahrungen gemacht und beim neuen Hoster läuft das Blog bisher auch ohne Caching sehr schnell.

Andreas 4. Dezember 2009 um 08:27 Uhr

Smush.it ist sicherlich nicht verkehrt aber ich persönlich habe TimThumb (generiert automatisch Thumbnails http://bit.ly/7r7Rk7) den Vorzug gegeben. Allerdings sind meine Bilder auf der Startseite auch wesentlich kleiner, genau wie Traffic&Co.
Mit dem kommenden WordPress 2.9 ändert sich das eh alles.

Die 11,6 Sekunden finde ich dennoch ziemlich viel und dein Blog habe ich eigentlich nie als langsam empfunden. Vielleicht liegt das Problem auch am Banner oder an dieser Social Media Toolbar?

Gruß,
Andreas

caschy 4. Dezember 2009 um 08:31 Uhr

Da mag einiges zusammen kommen. Features mag ja jeder, die kosten allerdings Ladezeit. Ich gewöhne mir jetzt einfach mal an, Bilder vorher durch ImageOptim (Freeware für den Mac) zu jagen. Ideale Ergebnisse.

Andreas 4. Dezember 2009 um 08:51 Uhr

@caschy
Features müssen nicht unbedingt viel Ladezeit kosten. Es gibt glücklicherweise immer die ein oder andere Alternative nur ist das manchmal mit etwas Aufwand verbunden. Statt Plug-ins reichen auch oftmals kleine Hacks (ich schaue immer zuerst bei ebiene.de) oder mal simpel verlinkte Icons. Tweet This! oder YARP sind z.B. echte Performancekiller (wie fast alle Related Post Plug-ins) und hinterlassen zudem viel Datenmüll in der Datenbank nach der Deinstallation.

Ich bin da auch fast schon gezwungen auf die Performance zu achten da mein Blog nur ein Punker Hostingpaket hat.
Wenn ich die Kommentare hier so lese dann fahre ich mit meinen 2,6 Sekunden wohl doch ganz gut.

caschy 4. Dezember 2009 um 08:55 Uhr

Naja YARPP bietet allerdings auch einen echten Mehrwert. Beim Rest gebe ich dir Recht, natürlich schaue ich auch immer bei Sergej nach :)

Tom 4. Dezember 2009 um 09:24 Uhr

smush.it habe ich auch im Einsatz. Ist schon interessant zu sehen wieviel “Information” in so einem Bild stecken kann, die man zu ansehen gar nicht braucht.

cimddwc 4. Dezember 2009 um 09:27 Uhr

Google misst diese Ladezeit (die bei mir ähnlich mies ist) nicht mit dem Bot, sondern anhand der normalen Besucher, die die Google Toolbar (mit aktiviertem PageRank) haben – und die dürfte auch alles externe Javascript mitbewerten. (“Page load time is the total time from the moment the user clicks on a link to your page until the time the entire page is loaded and displayed in a browser.”) Das sind bei mir neben hin und wieder Youtube-Videos und/oder eine Ladung Bilder von Flickr vor allem 2 Blog-Link-Dienste (die auch mal Performanceprobleme haben), und das zieht die Zeiten schön in den Keller…

Sergej Müller 4. Dezember 2009 um 09:50 Uhr

Und ich dachte, das smush.it Plugin kennt jeder, spätestens aus meinem Blog ;)

Noch ein Tipp: Das Plugin übernimmt ab jetzt die Komprimierung deiner Bilder, fein. Die bis dato hochgeladene Bilder bleiben aber unkomprimiert, können aber mit diesen Mac-Tools http://playground.ebiene.de/2301/bildoptimierung-mac-tools/ nachträglich lokal verkleinert werden. Einfach den Uploads-Order auf die Anwendung ziehen.

Gast123 4. Dezember 2009 um 09:51 Uhr

Find ich gut, die Bilder zu verkleinern. Hab nur eine langsame Verbindung. Deshalb sind die Tabs bei Opera und FF so wichtig. Da kann man einfach mal 10 Seiten auf einmal “starten” und dann in Ruhe bei Seite 1 weiterlesen, bis im Hintergrund 2-9 geladen hat.

Übrigens, hast Du mal über JPEG2000 nachgedacht? Hat sich zwar nie richtig durchgesetzt, aber komprimiert noch einen Tick besser als JPEG.

Jannes 4. Dezember 2009 um 10:24 Uhr

Cashy, es gibt Übrigens ein weiteres Performance-Problem in deinem Blog. Allerdings tritt dieses nicht beim Laden zum Vorschein sondern beim Scrollen. Dies wird durch die Leiste mit den Social-Links am linken Rand verursacht, weil die sich beim Scrollen nicht mitbewegt. Dadurch wird im Firefox die Scroll-Performance extrem ausgebremst.

Und ich für meinen Teil habe diese Links auch noch nie in meinem Leben angeklickt. Was ist das überhaupt fürn Scheiß? :-D

caschy 4. Dezember 2009 um 10:26 Uhr

Scroll-Performance? Willste mal sehen, wir das bei mir abgeht? ;)

Marco 4. Dezember 2009 um 10:29 Uhr

Wie cimddwc sagt, Google mist anhand der User nicht mit dem Bot. Was da am meisten bei der Zeitmessung kostet sind so bitter es ist Partner oder Netzwerkbuttons mit verknüpften Javascripts. Meine Seite läd unter 3 Sekunden wenn ich alle externen scripts wie Analytics, Werbung, Blogverzeichnis links und Partnerbuttons mit Analysefunktion weg lasse. Mit allem aktiviert komme ich auch regelmäßig über 10 Sekunden.

Was mich dabie schon immer Wurmt sind das Partner / Verzeichnis Seiten wie Topblogs meist die JS Auf ihrer normalen Domain hosten und fleissig jedesmal auch die Cookies hin und her geschickt werden. Das kostet unnötiog zeit und Traffic.

*seufz*

stardust 4. Dezember 2009 um 10:44 Uhr

@caschy: ja gerne. mach mal ein video.

Sergej Müller 4. Dezember 2009 um 10:49 Uhr

@René
Fast alle Tools bedienen sich der kostenfreien Lib: optipng – auf der Projektseite http://optipng.sourceforge.net werden auch die Apps gelistet. Nin der Meinung, sind auch welche für Win dabei.

caschy 4. Dezember 2009 um 10:51 Uhr

@Sergej: wie ich oben schrieb, bearbeite ich bereits mit ImageOptim. Muss aber erst einmal 2009 mit Einzelordnern machen. Hatte mal mehr reingepackt, da ist es abgeranzt. Mal sehen was mit pre2009 ist, da landete ALLES in uploads :(

Sergej Müller 4. Dezember 2009 um 10:55 Uhr

@caschy
Achso, hab nicht jeden Kommentar durchgelesen ;)
Läuft ImageOptim unter Snow Leopard?

caschy 4. Dezember 2009 um 10:57 Uhr

Jau, works like a charme :)

ichselbst 4. Dezember 2009 um 10:59 Uhr

Ich benutze wp-smush.it auch schon länger,
bin aber nicht ganz zufrieden mit dem Plugin.
Es kann sehr, sehr oft die Bilder nicht optimieren,
auch nach manuellen wiederholten Versuchen…

Mike 4. Dezember 2009 um 11:47 Uhr

Danke für den Verweis auf dieses Plugin. Habe zwar noch keinen Blog, bin aber gerade dabei, einen vorzubereiten bzw. mich auf die Arbeit mit WP vorzubereiten. Das kann sicherlich nützlich sein. :)

Dirk Paehl 4. Dezember 2009 um 12:47 Uhr

Bei mir hat das Plugin noch nie funktioniert.
Für Windows gibt es das hier
http://luci.criosweb.ro/riot/
Läuft als Standalone oder als Plugin für IrfanView oder Gimp.
Unter IrfanView steht dann Speichern fürs Web

Lasse 4. Dezember 2009 um 13:52 Uhr

Die Webmaster Tools probiere ich am WE mal aus. Bisher orientiere ich mich immer an ismyblogworking.com *g* Aber so stark achte ich da nicht drauf… Hält sich ja alles im Rahmen :)

Don Salva 4. Dezember 2009 um 14:34 Uhr

Ich geh anders vor, ist bissl mehr arbeit, aber soviel Zeitaufwändiger auch wieder nicht.

Bild mit Irfanview aufmachen, auf gewünschte Thumbnailgröße verkleiner, als Thumbnail speichern. Maximal 10-25kb bei mir.

Normales Bild über WordPress auf Serverablegen, als Backup. Thumbnail bei imagehost.org ablegen, originalbild bei Abload.de ablegen.

Thumbnail im Blog verlinken, Originalbild auf Thumbnail verlinken. Alternativ kann man das Originalbild vom Server aus verlinken, jedem das seine.

Adam 4. Dezember 2009 um 14:48 Uhr

@caschy: Welches Pendant (Gegenstück) zu ImageOptim nutzt bzw. bevorzugst du auf deinen Windows-Rechnern? Mit IrfanView bin ich nicht besonders und mit Paint überhaupt nicht zufrieden. Danke im Voraus.

Jan 4. Dezember 2009 um 17:48 Uhr

All Tools – All See kann ich unter Windows empfehlen

http://www.altools.com/ALTools/ALSee.aspx

hatte aber auch eine zeitlang mal ein Tool für das Kontextmenu, das war auch super.

ebook 4. Dezember 2009 um 19:06 Uhr

cool vielen dank. ich habe angefangen cover zu posten. bei einem langsamen inet zugang öffnen die sich sehr langsam. mal schauen, ob es besser wird.

Pressini 5. Dezember 2009 um 09:36 Uhr

das erinnert mich an die www Anfänge – Bilder klein halten – damals war 56k Modems voll schnell- das waren Zeiten:) na ja – mittlerweile werden Blogs mit Surfsticks “gelesen” daher muß alles wieder klein werden:)))

Ramón 5. Dezember 2009 um 15:22 Uhr

Hab das Plugin auch schon ne Weile drin, aber irgendwie funktioniert es nicht. Den Fix hab ich auch schon eingespielt. Wenn ich es manuell probiere passiert gar nichts. Fliegt es eben wieder raus.

martin 6. Dezember 2009 um 12:30 Uhr

um pngs zu optimieren verwende ich pngout.
http://advsys.net/ken/utils.htm#pngout

Yoschi 10. Dezember 2009 um 20:46 Uhr

Du könntest beispielsweise statt die letzen 10 die letzten 5 Artikel auf der Startseite anzeigen lassen.

Ansonsten finde ich dein Blog gar nicht so langsam.

Tobbi 12. Dezember 2009 um 17:41 Uhr

Jetzt erst dazu gekommen, mein Blog auch mal auf die Ladezeit hin zu testen, selbes Ergebnis wie Du Caschy.

Werde also nun auch mal WP-Smush.it ausprobieren.


Deine Meinung ist uns wichtig...

Kommentar verfassen

Du willst nichts verpassen?
Neben der E-Mail-Benachrichtigung habt ihr auch die Möglichkeit, den Feed dieses Beitrags zu abonnieren. Wer natürlich alles lesen möchte, der sollte den Hauptfeed abonnieren. Alternativ könnt ihr euch via E-Mail über alle neuen Beiträge hier im Blog informieren lassen. Einfach eure E-Mail-Adresse hier eingeben, dann bekommt ihr 1x täglich eine Zusammenstellung.