blog (6)


WordPress – Frontend Performance verbessern

Egal ob Google, Yahoo oder Bing.
Suchmaschinen setzen neben Keywords und anderen SEO-Maßnahmen auch auf die Performance einer Website.
Um die Performance (der eigenen Website) zu ermitteln gibt es mittlerweile eine Menge Tools.
Sei es als Plugin für den Browser oder als Web-Applikation.
Nur um ein paar zu nennen:

Die letzten zwei Tage habe ich mich damit beschäftigt, die Performance in meinem Blog zu verbessern.
Seit ein paar Wochen habe ich meinen Blog von Serendipity auf WordPress umgestellt.
Da ich ein recht einfaches Hosting Angebot von 1&1 nutze, kann ich leider nicht alle Register ziehen, die ich ziehen wollte 😉
Hier liste ich mal einige Maßnahmen auf, die auf jeden Fall die Ladezeit meines Blogs reduziert haben.

.htaccess Einträge – ETags und Expires Headers

#Remove ETags
Header unset ETag
FileETag None

#Expire Header
ExpiresActive On
ExpiresDefault „access plus 2 months“
ExpiresByType text/html „access plus 1 day“

style.css

In meinem Theme wird die style.css verwendet.
Für die Entwicklung binde ich sie als style_dev.css ein.
Diese CSS-Datei lasse ich vom YUI Compressor minifzieren und in style.css umbenennen.
Das mache ich per Ant-Task. Ist für eine Datei etwas überkandidelt, aber so kann ich mich mehr mit
Ant als Automatisierungs-Tool beschäftigen.

CSS-Sprites

Ich bin kein Designer, von daher nutze ich ein fertiges HTML5-Theme namens Absolum.
Das Problem ist, dass einige Hintergrundbilder zusammen gefasst werden könnten, aber nicht zusammen gefasst wurden.
Daher habe ich das Bookmarklet SpriteMe von Steve Souders verwendet.
Damit habe ich schon einmal eine Menge der Hintergrundbilder in ein Hintergrundbild vereint.
Das Bookmarklet sagt mir sogar, welche Styles ich anpassen muss.
Dadurch habe ich wieder ein paar HTTP-Requests gespart.

Bild-Optimierung

Trotzdem ich Wert darauf lege, dass Bilder bereits optimiert abgelegt werden, lasse ich im Zweifel Bilder von Smush.it optimieren.
Hiermit werden noch einmal ein paar Bytes verlustfrei entfernt.

Allein durch diese Maßnahmen habe ich den Performance-Index meines Blogs von 72 auf 81 angehoben.
Könnte ich CSS und JS Dateien noch per .htaccess gzip-komprimiert ausliefern, dann würde sicher noch mehr gehen.
Eine weitere Möglichkeit, die ich die nächsten Tage noch prüfen werde, ist die, dass ich teilweise Bilder unter anderen Subdomains ausliefere.
Das hat den Vorteil, dass der Browser die Dateien parallel herunterlädt.

Weitere Performance-Maßnahmen sind noch in Planung und werden vermutlich in den nächsten Tagen umgesetzt.
Je nachdem, wie ich Zeit finde. Dazu wird es aber auch nochmal einen gesonderten Artikel geben. Stay tuned.




Mehr Performance – Teil 3

Vielleicht haben es einige meiner Leser gemerkt.
Nach anfänglichen Problemen mit der Zeichenkodierung und der Performance habe mit Hilfe von Manuel eine Möglichkeit gefunden meinen Blog in Sachen Performance ein Stück nach Vorne zu bringen.

Manuel hat ein Skript geschrieben, dass das Caching-Verhalten von S9Y übernimmt und konfigurierbar macht.
Das Skript checkt, ob es die Seite bereits in einem Cache-Ordner gibt.
Wenn ja, dann liefert es eine statische HTML-Seite aus und jagt die Seite nicht mehr durch sämtliche Plugins.
Darüber hinaus ist das Skript in der Lage zu checken, ob es sich um das Backend oder einen Trackback handelt.
Das steigert nach einigen Tests um einiges die Performance.
Gibt es keine Cache-Files, so hat der erste Besucher die „Arschkarte“, da er derjenige ist, der die Cache-Files generiert, danach rennt das Blog allerdings wie Bolle.
Zeiten von unter zwei Sekunden sind mit entsprechend schneller Internet-Verbindung kein Problem mehr.

Vielen Dank an dieser Stelle noch einmal an Manuel, der mir mit seinem Know-How einen großen Dienst erwiesen hat.

Einziges Manko ist, dass man mit diesem Skript nach einem neuen Blog-Eintrag den Cache-Ordner löschen muss.
Finde ich aber nicht so schlimm. Nach einem neuen Eintrag kann ich auch eben den Cache-Ordner löschen…




Mehr Performance – Teil 2 [Update]

Nachdem ich hier bereits über die Performance meines Blogs geschrieben habe, bekam ich diverse Rückmeldungen, die ich allerdings selber fühlen musste 😉
Die angesprochenen 4 Sekunden kamen leider nur im Idealfall vor. Davon hatte ich während des Schreibens ein wenig blenden lassen.

Am Wochenende bin ich erfolgreich vor dem gemeinen Karneval geflohen und habe nochmal an einigen Schrauben gedreht.
Um das Ergebnis bereits vorweg zu nehmen: Mit mäßigem Erfolg.
Der Flaschenhals ist und bleibt mein Hoster. Ich habe hier nur ein etwas besseres Angebot gewählt, was meinen Geldbeutel nicht zu sehr belastet.
Also teile ich mir mit n Kunden ein und dieselbe Hardware.
Hätte ich einen root-Server, dann würde die Sache schon ein wenig anders aussehen.

Naja. Was habe ich getan, um doch noch ein wenig mehr aus dem Server zu kitzeln?




Mehr Performance

Als ich das erste jQuery-Tutorial veröffentlichte wollte ich meinen Lesern natürlich auch die Möglichkeit bieten, den Quelltext mit Syntax-Highlighting zur Verfügung zu stellen.
Ich wählte damals das dp.SyntaxHighlighter-Plugin. Das sieht zwar nett aus und bietet allerhand Vorteile. Man kann sich den Quelltext als Plain-Text ansehen, ihn über das Plugin in die Zwischenablage kopieren, Zeilennummern an-/ausschalten.
Soweit, sogut. Allerdings benutzt dieses Plugin viele JavaScripts. Diese sind auch nicht komprimiert. Das heißt, jede Seite, auf der das Plugin läuft, zieht sich die JavaScripts, die für die entsprechende Sprache(n) gebraucht werden.
Ein weiteres Manko für mich war, das es auch die JavaScripts lädt, die man beispielsweise per src-Attribut einbindet.
Das alles (in Kombination mit weiteren JavaScripts für Seitenleisten-Plugins) zieht natürlich an der Performance.
So waren 8-12 Sekunden notwendig, bis mein Blog vollständig geladen war. Ok, das liegt sicherlich auch an der Performance von meinem Hoster.

Deshalb habe ich nun ein anderes Plugin im Einsatz.
Ich benutze nun das GeSHi-Plugin, welches sich auch im Ãœbrigen für jede PHP-Anwendung verwenden lässt.

Das Plugin bedeutete für meinen Blog zwar mehr gefrickel, wirkt sich aber durchaus positiv auf die Performance aus.
Mittlerweile liegt die Ladezeit bei unter 4 Sekunden.

Mal sehen, wenn ich Zeit und Muße finde werde ich da mal ein wenig CSS für stricken.




Gravatar Plugin

Ich habe es gerade eben schon per Twitter angekündigt.
Das Gravatar-Plugin, welches ich am Wochenende installiert habe tut endlich.

Dazu war es notwendig, das comments.tpl auszutauschen.
Alles weitere dazu erklärt Don Chambers in einem entsprechenden Eintrag in seinem Blog.
Dort gibt es auch das veränderte Template inkl. CSS-Datei zum Download.
Hat den schönen Nebeneffekt, dass das Kommentar-Formular nochmals aufgehübscht wird.
Wer also nun im Besitz eines Gravatars ist, oder ein Avatar bei einem ähnlichen Dienst besitzt kann es nun auch hier nutzen.

Ich habe Gravatars zum ersten Mal bei Caschy und auf Nettuts.com gesehen und muss sagen:

Ich find’s schick…




Tapetenwechsel

Die regelmäßigen Leser unter Euche werden es sofort erkannt haben.
Der „grüne Tunnel“ musste einem MAC OS ähnlichen Template weichen…
Ich persönlich habe mich ein wenig satt gesehen an dem alten Layout.

Dennoch hege ich den Wunsch nach einem komplett eigenen Layout.
Das wird auch früher oder später noch kommen. Sofern mir mal ein wenig Zeit bleibt ein solches zu konzipieren und umzusetzen.
Bis dahin bleibt wohl erstmal dieses Design das Mittel der Wahl.
Ich hoffe es gefällt euch 😉