Schnelleres WordPress durch kleinere Bilder
von caschy | 37 Kommentare
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?
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.
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.
Wird geladen ...
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
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.
Klaro @Herr Olsen – du analysierst ja wahrscheinlich die gecachte Version 🙂
Hier wird übrigens nicht gecacht.
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.
War auch davon ausgegangen, ich sei mit meinen 6 Sekunden (und langsamer als 75% der Websites) schon relativ schlecht 😀
Hab das gestern auch installiert und muss sagen, ist eine sehr gelungene Sache.
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.
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
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.
@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.
Naja YARPP bietet allerdings auch einen echten Mehrwert. Beim Rest gebe ich dir Recht, natürlich schaue ich auch immer bei Sergej nach 🙂
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.
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…
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.
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.
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ß? 😀
Scroll-Performance? Willste mal sehen, wir das bei mir abgeht? 😉
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*
@caschy: ja gerne. mach mal ein video.
@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.