{"id":401,"date":"2009-12-27T15:21:29","date_gmt":"2009-12-27T13:21:29","guid":{"rendered":"http:\/\/www.claudia-klinger.de\/digidiary\/?p=401"},"modified":"2009-12-27T15:28:04","modified_gmt":"2009-12-27T13:28:04","slug":"blog-ladezeiten-verbessern-ein-nachmittag-als-nerd","status":"publish","type":"post","link":"https:\/\/www.claudia-klinger.de\/digidiary\/2009\/12\/27\/blog-ladezeiten-verbessern-ein-nachmittag-als-nerd\/","title":{"rendered":"Blog-Ladezeiten verbessern: ein Nachmittag als Nerd"},"content":{"rendered":"<p>So, wie findet Ihr die aktuelle Ladezeit des Digidiary? Gestern &#8211; und auch schon in den letzten Tagen &#8211; fiel mir auf, dass es mittlerweile unertr\u00e4glich lahmte. Wer hier mitdiskutiert, hat ja einen Grund, mehrere Sekunden zu warten, bis sich endlich was zeigt. Aber spontane Besucher? Eher nicht&#8230; <\/p>\n<p><strong>WordPress-Blogs<\/strong> haben allgemein die Unart, im Lauf der Zeit immer volumin\u00f6ser und lahmer zu werden: man bindet dieses und jenes Feature ein, probiert Zusatzmodule aus, erweitert die Style-Datei (mit den m\u00f6glichen Formatierungen), klatscht GoogleAds und interaktive Web2.0-Gimmicks dran &#8211; und merkt in der zunehmende Betriebsblindheit gar nicht, dass das Blog kaum noch in akzeptabler Zeit auftaucht.<\/p>\n<h2>Testen, testen, testen&#8230;<\/h2>\n<p>Also machte ich mich gestern dran, das zu \u00e4ndern. Ein Test mit einer statischen Seite (<a href=\"https:\/\/www.claudia-klinger.de\">meine Homepage<\/a>) zeigte, dass der Server an sich recht schnell ist &#8211; es musste also am Blog und seinen vielf\u00e4ltigen Einzelteilen liegen, die ja erst beim Aufrufen zusammen gesetzt werden.  Aber WELCHE Teile waren nun der Grund der Langsamkeit?<!--more--><\/p>\n<p>Nach einem allgemeinen <a href=\"http:\/\/webwait.com\/\">Ladezeit-Test<\/a> nutzte ich das sehr gute <a href=\"http:\/\/www.uptrends.com\/aspx\/kostenlose-ladezeit-html-seite-test.aspx\">Tool von Uptrends,<\/a> das eine genaue \u00dcbersicht \u00fcber s\u00e4mtliche Objekte im Blog und deren Ladezeit erstellt. Noch genauer und zudem mit sehr hilfreichen Empfehlungen f\u00fcr die &#8222;Optimierung&#8220; ist der <a href=\"http:\/\/websiteoptimization.com\/services\/analyze\/\">Web Page Speep Report auf WebSiteOptimisation.com.<\/a><\/p>\n<h2>Reduzieren, Optimieren, Komprimieren<\/h2>\n<p>Angefangen hab&#8216; ich dann mit dem Entfernen von allem, was mir momentan entbehrlich erschien: das Twitter-Fenster flog raus, die &#8222;letzten Kommentare&#8220; hab&#8216; ich gek\u00fcrzt, ebenso die Zahl der Postings auf der Startseite, die ich dann auch noch mit &#8222;weiter lesen&#8220;-Umbr\u00fcchen auf mehrere Seiten verteilte. Auch die Social Bookmarks mussten dran glauben, denn ich hab&#8216; schon l\u00e4nger bemerkt, dass die kaum mal jemand nutzt. <\/p>\n<p>Dann besichtigte ich die CSS-Datei (style.css) und entfernte Formate, die l\u00e4ngst nicht mehr genutzt wurden, verkleinerte Hintergrundbilder oder entfernte sie ganz (f\u00fcr die Kambodscha-Rubrik gabs z.B. ein riesiges  Header-Bild, das IMMER mit den Styles vorgeladen wurde, auch wenn keiner einen der alten Kambodscha-Artikel liest). <\/p>\n<p>Sodann erg\u00e4nzte ich die Ma\u00dfangaben (Breite\/H\u00f6he) auch kleinster Grafik-Dateien &#8211; auch das spart Ladezeit, wenn auch nicht viel. \u00dcberhaupt bringts erst die Masse verschiedenster Verbesserungen, wobei mir zuletzt noch ein &#8222;gro\u00dfer Sprung nach vorne&#8220; gelang, als ich mich in das Thema &#8222;Datenkompression&#8220; vertiefte. Die meisten Webserver bieten &#8222;GZip-Komprimierung&#8220; an, was bedeutet, dass z.B. HTML-Seiten, CSS-Dateien und Javascripte komprimiert zum Browser \u00fcbertragen werden. So lassen sich mehr als die H\u00e4lfte der Daten einsparen &#8211; man muss es nur anweisen!<\/p>\n<p>Leider gibt es f\u00fcr WordPress keine eingebaute M\u00f6glichkeit, einfach &#8222;alles komprimieren, was geht&#8220; anzuweisen. Ich forschte also weiter in der Welt der Plugins und Beschleunigungstipps und kam vom H\u00f6lzchen aufs St\u00f6ckchen. Mittlerweile war ich voll in der Technik versackt, fasziniert vom Reich der algorithmischen M\u00f6glichkeiten, die &#8222;Welt&#8220; zumindest auf Code-Basis unabweisbar zu beherrschen &#8211; wow! Stunde um Stunde verging, ich lernte &#8218;was \u00fcber Caching, verschiedene serverseitige Komprimierungen, entsprechende Methoden in PHP, \u00c4nderungen in der .htaccess-Datei und wie ich den Server meines Providers checke: was darf ich da und was nicht?<\/p>\n<p>Wieder einmal merkte ich, dass aus mir auch ein richtiger <a href=\"http:\/\/de.wikipedia.org\/wiki\/Nerd\">Nerd<\/a> h\u00e4tte werden k\u00f6nnen: so ein Sonderling, der mit den Bits und Bytes tanzt und seine Adrenalin-Sch\u00fcbe bei jedem Testlauf des gerade bearbeiteten Programms bekommt. Hach, was f\u00fcr ein  Erfolgsgef\u00fchl, wenn das Testtool dann in fast allen Bereichen GR\u00dcN anzeigt und seinen Kommentar mit &#8222;Congratulations!&#8220; beginnt! <\/p>\n<h2>Die kleine, aber sichere L\u00f6sung<\/h2>\n<p>Faktisch hab&#8216; ich es dann vorsichtshalber bei zwei Zeilen in der <a href=\"http:\/\/de.selfhtml.org\/servercgi\/server\/htaccess.htm\">.htaccess<\/a> belassen:<\/p>\n<blockquote><p>php_flag zlib.output_compression on<br \/>\nphp_value zlib.output_compression_level 5<\/p><\/blockquote>\n<p>und f\u00fcr die Komprimierung der Style-Datei das <a href=\"http:\/\/dev.wp-plugins.org\/wiki\/css-compress\">Plugin CSS-Kompress<\/a> genutzt. Alles andere h\u00e4tte deutlich mehr Studium erfordert: ich wei\u00df gerne, was ich tue, wenn ich was ausprobiere &#8211; und schlie\u00dflich will ich das Diary nicht versehentlich &#8222;zerschie\u00dfen&#8220;. <\/p>\n<h2>Nat\u00fcrlich geht noch MEHR<\/h2>\n<p>Als n\u00e4chstes k\u00f6nnte ich noch diverse kleine Grafiken (Twitter, das Auge-Icon, RSS-Icon, etc.) zu einer zusammen fassen und dann <a href=\"http:\/\/www.webkrauts.de\/2009\/12\/15\/kuerzere-ladezeiten-durch-css-sprites\/\">per CSS-Positionierung<\/a> Ausschnitte davon als Hintergr\u00fcnde nutzen. Das w\u00fcrde auch wieder einige Bilder-Ladevorg\u00e4nge ersparen. <\/p>\n<p>Weiter denke ich dran, die Gravatar-Unterst\u00fctzung wieder zu entfernen und lieber die Namen der Kommentierer pr\u00e4gnant links neben den Kommentar zu stellen. Denn wie ich an den langen Diskussionen der letzten Wochen sah, nutzt HIER kaum jemand Gravatare. Und die Einbindung ist so nachl\u00e4ssig programmiert, dass das immerselbe graue Platzhalterbildchen nicht etwa als EIN Bild kommt, sondern zigmal mit unterschiedlichen Namen!<\/p>\n<p>Dann k\u00f6nnte ich mich noch ins Thema &#8222;Caching&#8220; einarbeiten, mit Datenbank-Optimierungstools experimentieren, die <a href=\"http:\/\/www.tagseoblog.de\/cascading-style-sheet-css-optimieren\">CSS-Dateien &#8222;h\u00e4ndisch&#8220; besser packen<\/a>, und &#8211; das kommt sicher &#8211; das Blog auf PHP5\/MySQL5 umstellen, mit denen ein aktuelles WordPress schneller l\u00e4uft. <\/p>\n<p>Ach ja: wenn man erstmal unter die Haube gekrochen ist, kommt man nur schwer wieder hoch&#8230; .:-)<\/p>","protected":false},"excerpt":{"rendered":"<p>So, wie findet Ihr die aktuelle Ladezeit des Digidiary? Gestern &#8211; und auch schon in den letzten Tagen &#8211; fiel mir auf, dass es mittlerweile unertr\u00e4glich lahmte. Wer hier mitdiskutiert, hat ja einen Grund, mehrere Sekunden zu warten, bis sich endlich was zeigt. Aber spontane Besucher? Eher nicht&#8230; WordPress-Blogs haben allgemein die Unart, im Lauf [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[8],"tags":[],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.claudia-klinger.de\/digidiary\/wp-json\/wp\/v2\/posts\/401"}],"collection":[{"href":"https:\/\/www.claudia-klinger.de\/digidiary\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.claudia-klinger.de\/digidiary\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.claudia-klinger.de\/digidiary\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.claudia-klinger.de\/digidiary\/wp-json\/wp\/v2\/comments?post=401"}],"version-history":[{"count":0,"href":"https:\/\/www.claudia-klinger.de\/digidiary\/wp-json\/wp\/v2\/posts\/401\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.claudia-klinger.de\/digidiary\/wp-json\/wp\/v2\/media?parent=401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.claudia-klinger.de\/digidiary\/wp-json\/wp\/v2\/categories?post=401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.claudia-klinger.de\/digidiary\/wp-json\/wp\/v2\/tags?post=401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}