Performance-Optimierung am Beispiel: betamode.de
Veröffentlicht am 22.3.2012, 20:07 Uhr
Ich habe mich ein wenig mit Performance Optimierung von Webseiten beschäftigt. In den nächsten Tagen und Wochen werde ich einige Beiträge dazu veröffentlichen. Den Anfang macht diese Beschreibung des Optimierungsvorgangs von betamode.de:
Beispielseiten für Optimierung
Ausgangssituation
- http://www.webpagetest.org/result/120318_NC_3MJ57/
- http://www.webpagetest.org/result/120318_GB_3MJ59/
Erste Beobachtungen und Auswertung
- urchin.js – uralter Google Analytics Code?
- Mehrere kleine GIFs, sollten sich einfach spriten lassen
- First Byte Time ist sehr hoch
- Kein Caching der statischen Ressourcen
- Kein CDN
Optimierung
Anwendbare Regeln aus High Performance Website Sites:
Rule 1 – Make Fewer HTTP Requests
Folgende Bilder können zusammengefasst werden:
- http://betamode.de/wp-content/themes/betamode/images/suche.gif
- http://betamode.de/wp-content/themes/betamode/images/clock.gif
- http://betamode.de/wp-content/themes/betamode/images/comments.gif
- http://betamode.de/wp-content/themes/betamode/images/xml.gif
Schritte:
- Bilder von <img> auf background-images umbauen
- Bilder als Sprite zusammenfassen: http://betamode.de/wp-content/themes/betamode/images/sprite.gif
- Sprite als background-image einbauen
- Da sich bg.gif nicht mitspriten lässt wird es als data-base64 direkt ins CSS eingebunden
Ergebnis
- http://www.webpagetest.org/result/120318_NM_3MJST/
- http://www.webpagetest.org/result/120318_C2_3MJSV/
Rule 3 – Add an Expires Header
Mit W3 Total Cache lässt sich sich das wunderbar erschlagen.
Ergebnis
- http://www.webpagetest.org/result/120318_0K_3MJY7/
- http://www.webpagetest.org/result/120318_4C_3MJZ0/
Rule 6 – Put Scripts at the Bottom
Das Analytics-Script ist zwar schon ganz unten, aber noch das alte synchrone. Also mal das neue besorgen und einbauen.
Ergebnis
- http://www.webpagetest.org/result/120318_B3_3MJZY/
- http://www.webpagetest.org/result/120318_TS_3MJZZ/
Rule 10 – Minify JavaScript (+ HTML + CSS)
Javascript gibt es keines, aber für Minify von HTML und CSS kann einfach W3 Total Cache konfiguriert werden, fertig.
Ergebnis
- http://www.webpagetest.org/result/120318_C4_3MK1C/
- http://www.webpagetest.org/result/120318_6G_3MK1D/
Dann zum Abschluss noch ein bisschen serverseitiges Caching um DB-Anfragen und so weiter zu minimieren mit W3 Total Cache.
End-Ergebnis
- http://www.webpagetest.org/result/120318_57_3MK1Z/
- http://www.webpagetest.org/result/120318_XM_3MK22/
Tadaa, schnell.
Google-Wunsch-Funktion: Timestamp-Umrechnung
Veröffentlicht am 7.3.2007, 17:52 Uhr
Ich gebe einen Timestamp ein, Google gibt mir ein korrektes Datum zurück.
Ich gebe Google “timestamp:” und Datum, Google gibt mir den Timestamp zurück.
Das wäre doch mal ein nützliches Feature.
Know your enemy: XSS, SQL Injection etc.
Veröffentlicht am 27.2.2007, 01:51 Uhr
Auch wenn Betamode nun wohl absolut zum Linkblog verkommt:
http://www.honeynet.org/papers/webapp/
Automatisierte MySQL-Backups auf mehreren Servern: phpMyBackupPro
Veröffentlicht am 25.2.2007, 16:11 Uhr
http://www.phpmybackuppro.net/
wordwrap
Veröffentlicht am 17.12.2006, 14:38 Uhr
PHP-Funktion, die man kennen muss: wordwrap()
StudiVZ: Ich studiere an der Array
Veröffentlicht am 8.11.2006, 18:20 Uhr
Immer wieder lustig…
Nachtrag: Da mittlerweile von einigen Blogs auf diesen Beitrag verlinkt wird möchte ich doch gerne klarstellen, dass ich hier keineswegs nur auf StudiVZ draufhauen möchte und diesen Beitrag als Fehlerreport an die Jungs hinter StudiVZ gesendet habe. Konstruktive Kritik statt Neid-Blabla…
CommentsTrack light: x-ter Versuch
Veröffentlicht am 14.9.2006, 14:33 Uhr
Fast 1 Jahr hat sich bei meiner kleinen Idee CommentsTrack light nichts mehr getan. In den letzten Tagen habe ich jedoch wieder verstärkt in Kommentarthreads mitgeschrieben, die ich durchaus nochmal anschauen und bei denen ich auf Antworten reagieren wollte.
Cocomment, co.mments und Co funktionieren weiterhin nur mit Firefox oder Internet Explorer mit Bookmarkleiste, da mein Feedreader of choise jedoch IE als Anzeigecontainer nutzt und eben keine Bookmarkleiste einblendet kommen diese Service alle nicht in Frage.
Also altes Script hervorgeholt, abgestaubt, ein wenig aufgemöbelt und wieder eingebaut. Ergebnis; Meine letzten 10 getrackten Kommentare:
< ?php include("commentstrack_10.php"); ?>
Fehlt nur noch ein Modul, das sich den Seitentitel des Beitrags abholt und eine Erweiterung, die zählt, wie oft ich in dem Thread kommentiert habe. Aber das sind ja Kleinigkeiten.
PHP: Trinitäts-Operator
Veröffentlicht am 11.9.2006, 00:54 Uhr
oder: Diese komischen Dinger mit Doppelpunkten, die ich noch nie kapiert habe…
Das kommt davon, wenn man sich PHP über learning by doing aneignet, logisch, auf jeden Fall konnte ich lange Zeit mit folgendem Code nicht wirklich etwas anfangen:
echo $success ? ‘+’ : ‘-’;
Es ging auch ohne.
Auf phpbar bin ich nun über eine vernünftige Erklärung gestolpert: http://www.phpbar.de/w/Trinit%C3%A4ts-Operator
PHP: Tagcloud? Wortwolke!
Veröffentlicht am 6.9.2006, 14:31 Uhr
Eine Wortwolke (englisch Tag cloud) ist die Methode zur Informationsvisualisierung bei der eine Wortliste zweidimensional alphabetisch sortiert angezeigt wird, wobei einzelne Worte unterschiedlich gewichtet größer oder auf andere Weise hervorgehoben dargestellt werden.
Wie generiere ich eine Tagcloud?
1. http://www.15tags.com/blog/tagcloud-demo-with-source/ besuchen
2. Sourcecode herunterladen und verstehen
3. Klasse mit Tags und Häufigkeit füttern
4. Fertig!
Wie verlinke ich nun die Tags mit den Tagseiten?
Übergebe der Klasse einfach direkt HTML-Code, der die Links schon enthält.
Statt
$tc_a_tags = array( 'some' => 1,
'random' => 4,
'tags' => 5,
'with' => 2,
'different' => 5,
'weight' => 3);
zum Beispiel einfach
$tc_a_tags = array(' <a href="tag/some">some</a>' => 1,
'<a href="tag/random">random</a> ' => 4,
'<a href="tag/tags">tags</a>' => 5,
'<a href="tag/with">with</a> ' => 2,
'<a href="tag/different">different</a> ' => 5,
'<a href="tag/weight">weight</a> ' => 3);
übergeben. So einfach.
Ist die Klasse von 15tags optimal?
Öhm keine Ahnung. Sie funktioniert und hilft zu verstehen, wie eine Tagcloud gebastelt wird. Um alles andere muss man sich dann schon selbst kümmern.
Weitere Links zum Thema
http://www.technologyevangelist.com/2006/03/how_to_make_a_tag_cl.html
http://www.codeprofessor.com/journal/2006/03/15/building-a-tag-cloud-in-wordpress/
http://w.astronote.jp/index.php?TagCloud.php
http://www.hawkee.com/snippet.php?snippet_id=1485
Pingfix 0.4b gleich hinterher
Veröffentlicht am 6.9.2006, 00:17 Uhr
Für Eilige: Neue Version 0.4b unter http://betamode.de/wp-pingfix/
Mein gestern veröffentlichtes Plugin Pingfix kam eigentlich ganz gut an. Dummerweise hatte ich jedoch einen kleineren Bug übersehen, der das Löschen alter Entwürfe teilweise mit einer unschönen Fehlermeldung quittierte. Dieser wurde nun behoben.
Zudem äußerte Boris Bedenken gegenüber einem voll beschreibbaren (chmod 777) “wp-content”-Verzeichnis. Zurecht. Ich hatte die Funktion ohne großes Nachdenken aus einem anderen Plugin übernommen.
Deshalb hat Pingfix nun einen eigenen Ordner für die Logfiles, der bei der Installation jedoch von Hand erstellt werden muss. Der Name des Logfiles ist ab sofort auch vom (verschlüsselten und gekürzten) Datenbankpasswort abhängig, so dass der Dateiname des Logfiles nicht mehr erraten werden kann. Dadurch wird es vor Zugriffen von außen geschützt.
Die nun aktuelle Version 0.4b, und die aktualisierte Installationsanleitung, gibt es wieder unter: http://betamode.de/wp-pingfix/
Aktuelles zu Pingfix: http://betamode.de/kategorie/projekte/pingfix/ 