cmff.de

keyboard_arrow_right Menü

Allgemein (33)


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.



Improvisation, Chatroulette, Flip Mino HD und Caschy

Eigentlich wollte ich mich gegen den Rummel um Chatroulette wehren.

1. Finde ich chatten mit Unbekannten ohne ein Thema doof.
2. Habe ich in meinem 5-minütigem Test mehr gesehen, als ich wollte
3. ist es Zeitverschwendung (IMHO)

Ich bin ein Mensch, der beruflich eine Menge mit dem Web zu tun hat und privat möchte ich die Vorzüge des Internets nicht missen.
Mal eben was Googlen, bei Wikipedia Dinge nachgucken, oder auf IMDB herausfinden, woher ich den Schauspieler kenne, den ich gerade 90 Minuten in einem Film gesehen habe.

Aber Chatroulette? Was soll ich damit anfangen? Eigentlich hatte ich auch nicht vor darüber zu bloggen.
Aber ein Gewinnspiel bei Caschy hat mich letztendlich doch dazu gebracht.
Das Ding könnte ich ganz gut gebrauchen, wenn ich mal wieder zum Nürburgring fahre um Erlkönige zu beobachten.

Dabei geht es mir aber weniger um die Applikation an sich, sondern um den Typen im Video.
Bei Chatroulette, werden die Chat-Partner per Zufallsgenerator zusammengewürfelt. Man kann über einen Button zum nächsten Partner weiterspringen.
Der Kollege in dem hier geposteten Video sitzt am Klavier und singt Songs, die zu dem Gegenüber passen und reagiert auf Eingaben im Chat-Fenster oder auf Gestiken, Mimiken im Video-Fenster.
Er spielt sogar gewünschte Lieder des Gegenübers. Finde ich einfach grossartig.

Also, zieht Euch das rein und bewundert diese Improvisation:



Putpat – Musikvideos

Vor einiger Zeit bin ich über einen Blogpost gestolpert, der Putpat anpries.

Putpat ist momentan in der Beta-Phase und bietet quasi personalisiertes Musikfernsehen.
Man meldet sich dort an, verknüpft sein last.fm Profil und los geht’s.

Ãœber den sogenannten Veequalizer kann man bestimmen, welche der 5 Lieblingsbands am häufigsten gespielt werden.
Ausserdem werden einem ähnliche Künstler vorgeschlagen. Diese kann man als Favoriten markieren oder verbannen.
Hat man einmal seinen eigenen Channel aufgesetzt, werden nonstop Musik-Videos gespielt.
Und das sogar in extrem guter Qualität.
Wird dort ein Lied gespielt, das einem nicht gefällt, dann kann man zum nächsten Track skippen.
Wenn man möchte, dann kann man natürlich vorher den Track verbannen.

Eine coole Geschichte. Auch wenn ich mir mehr als 5 Top-Artists wünschen würde.
Aber dennoch wird mein Musik-Geschmack in der Regel getroffen.
Ganz klar „Daumen hoch“ für diesen kostenlosen und zum großen Teil werbefreien Service.

Ich habe noch 6 Invites. Also wer möchte soll sich einfach per Mail oder Twitter melden.
First come, first serve.



Google Wave – Mein Eindruck

Der erste Post für dieses Jahr.
Von Google Wave haben einige von Euch bereits gehört, vielleicht sogar mal ausprobiert.

Wie viele Andere die sich bereits zu Google Wave geäussert haben, war auch ich anfangs überhaupt nicht davon überzeugt.
Zugegeben, im Moment bin im Moment immer noch nicht ganz überzeugt.
Zumindest sehe ich Google Wave definitiv noch nicht als vollständigen E-Mail Ersatz an.

Es gibt allerdings ein (für mich) großes „aber“.
Nämlich dann, wann immer man sich mit 2 bis n Personen für einen Termin, ein Event etc. absprechen möchte.

Ein paar Freunde und ich planen beispielsweise eine kleine LAN-Party im Februar.
Dafür müssen natürlich einige Dinge organisiert werden.
Essen, Spiele, Location, Teilnehmer etc. können über Google Wave prima geplant werden.
Man kann ganz easy Bezug auf diverse Aussagen nehmen und alle Beteiligten sind sofort auf dem gleichen Stand.

So muss man nicht im E-Mail Client nach der Nachricht mit dem Betreff „Re: Re: Re: Aw: Re: LAN-Party“ suchen.
Man öffnet die Wave in Google Wave und hat alle relevanten Infos sofort zur Hand.
Mit anderen Google Services wie dem Kalender oder Maps hat so Google Wave auf jeden Fall die Nase vorn.

Finde ich für solche Zwecke echt knorke.
Auch wenn ich mich jetzt wiederhole. Als Ersatz für die E-Mail-Kommunikation sehe ich es noch nicht.



Mein neuer Kalender 2010?

Mal wieder eine coole Aktion, die ich gerne unterstütze.
Vor einiger Zeit konnte man bei united-domains eine Domain-Weltkarte bekommen.
Nun gibt es eine feine Aktion von Druckerei.de.

Man kann nun diesen Kalender gewinnen:

Kalender 2010

Die Voraussetzungen dafür sind entweder den Jungs über @druckerei_de auf Twitter zu folgen, oder darüber zu bloggen.
Der Vorteil, wenn man bloggt ist, dass man direkt 3 Kalender bekommt.

Auf die Aktion aufmerksam wurde ich übrigens über Caschy.



Spiegel Online Design-Relaunch

Woran merkt man das man älter wird?
Man fängt an sich für Politik, Nachrichten etc. zu interessieren.
Seit drei oder vier Jahren konsultiere ich regelmäßig Websites, die Nachrichten aus aller Welt und aus dem Rheinland veröffentlichen.
Das Nachrichtenportal Nummer eins für mich ist hier Spiegel Online.
Spiegel Online bietet sachliche Nachrichten, twittert, facebookt und hat einen eigenen Youtube Channel

Jetzt hat Spiegel das Design der Website geändert.
Für mich ist das neben dem Content natürlich auch als Web Developer interessant.
Das grobe Layout ist ziemlich gleich geblieben.
Trotzdem wirkt die Seite auf mich schlicht, übersichtlich, aber frischer als zuvor.
Jede Rubrik ist klar abgegrenzt vom restlichen Inhalt.

Schön sind auch die AJAX oder Web 2.0 Elemente, die man betrachten kann, wenn man sich für weitere Inhalte der einzelnen Rubriken interessiert.

Damit verteidigt Spiegel Online aus meiner Sicht die Anlaufstelle Nummer eins für Nachrichten im Netz. Zumindest für mich…



Rayman Raving Rabbids TV Party – Groove On – Toxic

Ich habe vor einiger Zeit bereits Rayman Raving Rabbids TV Party empfohlen. Bei mir zu Hause wird relativ oft das Mini-Game „Groove On“ gespielt.
Neben Rock-Hits wie „Another one bites the dust“ oder „Born to be wild“ haben natürlich auch Pop-Songs wie „Toxic“ von Britney Spears ihren Platz in dem Spiel gefunden.

Ich bin zwar ein sehr Musik affiner Mensch, mit dem Taktgefühl hapert es aber trotzdem hier und da.
Besonders stolz war ich daher auf die Leistung, die ich bei Toxic erreicht habe.

Wobei es mir hier weniger um die erreichten Punkte geht.
Ich fand es einfach nur grandios, dass ich 133 mal in Folge den Takt exakt getroffen habe.

Wer mir nacheifern möchte, aber RRR – TV Party noch nicht besitzt, dem sei der unten stehende Link ans Herz gelegt.



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.


Tuts+ Translator

Neueste Beiträge

Neueste Kommentare

Blogroll

cmff.de, 2024. Theme Material for Coders