Claudia am 27. Dezember 2009 —

Blog-Ladezeiten verbessern: ein Nachmittag als Nerd

So, wie findet Ihr die aktuelle Ladezeit des Digidiary? Gestern – und auch schon in den letzten Tagen – fiel mir auf, dass es mittlerweile unerträglich lahmte. Wer hier mitdiskutiert, hat ja einen Grund, mehrere Sekunden zu warten, bis sich endlich was zeigt. Aber spontane Besucher? Eher nicht…

WordPress-Blogs haben allgemein die Unart, im Lauf der Zeit immer voluminöser und lahmer zu werden: man bindet dieses und jenes Feature ein, probiert Zusatzmodule aus, erweitert die Style-Datei (mit den möglichen Formatierungen), klatscht GoogleAds und interaktive Web2.0-Gimmicks dran – und merkt in der zunehmende Betriebsblindheit gar nicht, dass das Blog kaum noch in akzeptabler Zeit auftaucht.

Testen, testen, testen…

Also machte ich mich gestern dran, das zu ändern. Ein Test mit einer statischen Seite (meine Homepage) zeigte, dass der Server an sich recht schnell ist – es musste also am Blog und seinen vielfältigen Einzelteilen liegen, die ja erst beim Aufrufen zusammen gesetzt werden. Aber WELCHE Teile waren nun der Grund der Langsamkeit?

Nach einem allgemeinen Ladezeit-Test nutzte ich das sehr gute Tool von Uptrends, das eine genaue Übersicht über sämtliche Objekte im Blog und deren Ladezeit erstellt. Noch genauer und zudem mit sehr hilfreichen Empfehlungen für die „Optimierung“ ist der Web Page Speep Report auf WebSiteOptimisation.com.

Reduzieren, Optimieren, Komprimieren

Angefangen hab‘ ich dann mit dem Entfernen von allem, was mir momentan entbehrlich erschien: das Twitter-Fenster flog raus, die „letzten Kommentare“ hab‘ ich gekürzt, ebenso die Zahl der Postings auf der Startseite, die ich dann auch noch mit „weiter lesen“-Umbrüchen auf mehrere Seiten verteilte. Auch die Social Bookmarks mussten dran glauben, denn ich hab‘ schon länger bemerkt, dass die kaum mal jemand nutzt.

Dann besichtigte ich die CSS-Datei (style.css) und entfernte Formate, die längst nicht mehr genutzt wurden, verkleinerte Hintergrundbilder oder entfernte sie ganz (für 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).

Sodann ergänzte ich die Maßangaben (Breite/Höhe) auch kleinster Grafik-Dateien – auch das spart Ladezeit, wenn auch nicht viel. Überhaupt bringts erst die Masse verschiedenster Verbesserungen, wobei mir zuletzt noch ein „großer Sprung nach vorne“ gelang, als ich mich in das Thema „Datenkompression“ vertiefte. Die meisten Webserver bieten „GZip-Komprimierung“ an, was bedeutet, dass z.B. HTML-Seiten, CSS-Dateien und Javascripte komprimiert zum Browser übertragen werden. So lassen sich mehr als die Hälfte der Daten einsparen – man muss es nur anweisen!

Leider gibt es für WordPress keine eingebaute Möglichkeit, einfach „alles komprimieren, was geht“ anzuweisen. Ich forschte also weiter in der Welt der Plugins und Beschleunigungstipps und kam vom Hölzchen aufs Stöckchen. Mittlerweile war ich voll in der Technik versackt, fasziniert vom Reich der algorithmischen Möglichkeiten, die „Welt“ zumindest auf Code-Basis unabweisbar zu beherrschen – wow! Stunde um Stunde verging, ich lernte ‚was über Caching, verschiedene serverseitige Komprimierungen, entsprechende Methoden in PHP, Änderungen in der .htaccess-Datei und wie ich den Server meines Providers checke: was darf ich da und was nicht?

Wieder einmal merkte ich, dass aus mir auch ein richtiger Nerd hätte werden können: so ein Sonderling, der mit den Bits und Bytes tanzt und seine Adrenalin-Schübe bei jedem Testlauf des gerade bearbeiteten Programms bekommt. Hach, was für ein Erfolgsgefühl, wenn das Testtool dann in fast allen Bereichen GRÜN anzeigt und seinen Kommentar mit „Congratulations!“ beginnt!

Die kleine, aber sichere Lösung

Faktisch hab‘ ich es dann vorsichtshalber bei zwei Zeilen in der .htaccess belassen:

php_flag zlib.output_compression on
php_value zlib.output_compression_level 5

und für die Komprimierung der Style-Datei das Plugin CSS-Kompress genutzt. Alles andere hätte deutlich mehr Studium erfordert: ich weiß gerne, was ich tue, wenn ich was ausprobiere – und schließlich will ich das Diary nicht versehentlich „zerschießen“.

Natürlich geht noch MEHR

Als nächstes könnte ich noch diverse kleine Grafiken (Twitter, das Auge-Icon, RSS-Icon, etc.) zu einer zusammen fassen und dann per CSS-Positionierung Ausschnitte davon als Hintergründe nutzen. Das würde auch wieder einige Bilder-Ladevorgänge ersparen.

Weiter denke ich dran, die Gravatar-Unterstützung wieder zu entfernen und lieber die Namen der Kommentierer prägnant 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ässig programmiert, dass das immerselbe graue Platzhalterbildchen nicht etwa als EIN Bild kommt, sondern zigmal mit unterschiedlichen Namen!

Dann könnte ich mich noch ins Thema „Caching“ einarbeiten, mit Datenbank-Optimierungstools experimentieren, die CSS-Dateien „händisch“ besser packen, und – das kommt sicher – das Blog auf PHP5/MySQL5 umstellen, mit denen ein aktuelles WordPress schneller läuft.

Ach ja: wenn man erstmal unter die Haube gekrochen ist, kommt man nur schwer wieder hoch… .:-)

Diesem Blog per E-Mail folgen…

Diskussion

Kommentare abonnieren (RSS)
9 Kommentare zu „Blog-Ladezeiten verbessern: ein Nachmittag als Nerd“.

  1. […] den zweiten Weihnachtsfeiertag hab’ ich damit zugebracht, in meinem “Haupt-Blog” die Ladezeiten von WordPress zu verbessern. Es dauerte mittlerweile nämlich ganz schön lange, bis die Seiten tatsächlich […]

  2. Liebe Claudia,

    naja für so etwas muß man ein Händchen haben. Dann kann es auch richtig Spaß machen.
    Jedenfalls bewundere ich Deine Geduld hier.

    Guten Rutsch ins neue Jahr

    Gerhard

  3. Ein gutes Tool – nicht nur für diesen Zweck (insbesondere nicht JavaScript-bezogen: CSS bearbeiten und sofort die Auswirkungen sehen) – ist das Plugin Firebug https://addons.mozilla.org/de/firefox/addon/1843 das unter „Netzwerk > Alle“ genau anzeigt was wie lange ludt. Durch die grafische Darstellung der Ladezeiten sind die „Hotspots“ schnell gefunden (Tipp: Mit Mauszeiger auf Link zeigen und Grafiken hinter dem Link werden in einem Popup angezeigt).

    Auch interessant https://addons.mozilla.org/de/firefox/addon/1743 das in der Statusbar anzeigt, wieviele Anfragen für eine Seite erforderlich waren (Content, CSS, Bilder, JavaScript, …), wieviele KB insgesamt geladen wurden und wie lange das Laden dauerte.

    Mein WordPress-Blog, das ich nur für Notizen bestimmter Art nutze, habe ich sehr beschleunigt durch einen eigenen Style, der auf alle JavaScripts verzichtet sowie auf Dekorationsgrafiken. Diese wirken ohnehin nur gut, falls der Gestalter Wissen und Gespür für gutes Layout besitzt und dies umsetzen kann unter Berücksichtigung der Eigenheiten von Webseiten.

    Beim Laden deiner Seite werden mir von Firebug als Zeitfresser 2 externe Links angezeigt und zwar von gravatar.com und stats.blogoscoop.net: Für zwei winzige GIF-Dateien (Twitter + blogo scoop) jeweils mehr als 5 Sekunden (parallel, sodass die Gesamtzeit zum Laden beider etwa 5,26 Sekunden betrug). Der Rest ist ok und bedarf keiner Beschleunigung. D.h.: Diese zwei GIFs ersetzen durch statische Kopien auf deinem Site.

    Kurz: Deine Seite wäre in 1,33 Sekunden da gewesen ohne die beiden GIFs, die die Ladezeit auf 7,7 Sekunden verlängern.

    P.S. Beim Testen von Ladezeiten habe ich nicht zum ersten Mal Links auf externe Grafiken (z.B. „RSS“) als *den* entscheidenden Zeitfresser identifiziert und nach Ersetzen durch statischen Content auf dem eigenen Site das Laden beschleunigt.

    Wichtig: Vor dem Test den Browser-Cache komplett leeren, da die Grafiken sonst von diesem geladen werden. Auch andere „Zeitsparer“ Erlaubnis zum Laden des gesamten Contents erteilen, z.B. NoScript und Adblock Plus, deren Einschreiten ich deaktiviere für Seiten, die mich nicht nerven mit Hintergrund-Sound ohne Inhaltsbezug, Dauerwerbegeblinke, das den Blick ständig wegzieht vom Inhalt und JavaScripts alleine für animierte Werbung.

  4. Arbeiten unter der Motorhaube…

    Im Digital Diary gibt sie dazu ein paar nützliche Tipps und Hinweise auf interessante Werkzeuge, mit denen man die Geschwindigkeit des eigenen Blogs messen kann. …

  5. Danke Elmar! Gravatare sind jetzt weg und damit auch der zeitfressende Link – Blogoscoop muss bleiben, das ist ja ein Statistik-Tool, das sonst nicht funktioniert. Die Twitter-Grafik ist jetzt lokal gespeichert.

    Die Javacripts hier sind ziemlich unentbehrlich, aber vielleicht finde ich noch eine Möglichkeit, sie ebenfalls zu „gzippen“, wie ich es ja schon mit der HTML-Seite und der Style-Datei mache.
    Viel Ladezeit frisst hier das Edit-Comments-Plugin mit all seinen Bildchen und Scripts, das will ich aber behalten, da ich es selbst doof finde, bei langen Kommentaren nichts korrigieren zu können.

    Lieben Gruß – Claudia

  6. Statistiken lassen sich automatisch erzeugen aus der Logdatei des Webservers ohne dass dies Ladezeit kostet: http://awstats.sourceforge.net/ Diese sind exakter, da Browser-Plugins verhindern können, dass ein Link z.B. zu blogoscoop aufgerufen wird (zum Beschleunigen des Ladens).

    Früher interessierten mich die Statistiken mehr, heute schaue ich sie vielleicht einmal im Monat an, damit ich 404er-Links, die ich vergaß sinnvoll umzuleiten, nun sinnvoll umleite.

    P.S. Vielleicht kennst du folgendes Buch: Steve Sourders: High Performance Websites – 14 Profi-Regln zur Optimierung Ihrer Website, O’Reilly.

  7. Also auf die Google Ads ließe sich ja nun als erstes und am leichtesten verzichten, um die Ladezeiten zu reduzieren. :-)

    Auf ein interessantes (reklamefreies) 2010,
    viele Grüße,
    Peter

  8. @Elmar: ja klar, ich könnte auch Statistiken aus Serverlogs erstellen – aber das ist NICHT dasselbe! Erstens macht das extra Arbeit, wenn man mal gucken will, zweitens bedeutet Blogoscoop MEHR als bloßes Wissen über Zugriffe etc. (da schau ich eh kaum je hin), sondern eine Vernetzung mit der Blogosphäre, die mir gut gefällt.
    Ich werde aber im Januar noch auf Php5 Upgraden – das bringt nochmal einen Schub. Und das Buch hab ich auch schon in Betracht gezogen…

    @Peter: na wow! In den nun bald 11 Jahren Digital Diary bist DU der erste, der hier wegen Werbung mäkelt! :-)) Ich halte das auf einem für meine geschätzten Leser und Diskussionsgäste nicht nervigen Level – aber darauf verzichten werde ich NICHT. Und ladezeittechnisch sind diese Scripts marginal – evtl. kann ich aber die Plugin-Scripts und CSS noch gzippen.

  9. […] Blog-Ladezeiten verbessern: ein Nachmittag als Nerd von Claudia Klinger […]