HTML-/CSS-Performance Optimierung – Teil 1
Ja, ihr habt richtig gelesen: es geht um HTML und CSS Performance! Ein Thema über das sich die Wenigsten Gedanken machen. Leider.
Über Serverseitige Optimierung von PHP-Scripts, MySQL-Queries, Webserver etc. liest man ja mehr als genug. Leider aber kaum über die Client-Seitige Optimierung. Aber was bringt es dem User, wenn das PHP-Script in 0,09 statt in 0,25 Sekunden ausgeführt wird, wenn das Übertragen der Daten un das clientseitige Rendern der Seite 15 Sekunden dauert? Klar, hauptsache das PHP-Skript ist flott. Glückwunsch. Super. Gut gemacht!
Die Performance-Optimierung von Websiten betrifft längst nicht nur die serverseitige Abarbeitung des Requests, sondern auch das was mit den Daten passiert nachdem sie den Webserver verlassen haben. Aus diesem Grunde möchte ich euch heute (und im Teil 2, Teil 3, …) ein paar Tricks und Praktiken zeigen, die euch dabei helfen können, euere Websites effizient und sinnvoll auf Performance zu optimieren.
Der ganze Spaß hat natürlich auch einen Usability- und Marketing-Faktor. Seiten, die lange laden, wirken unsymphatisch und qualikativ minderwertig. Und kein User bleibt gern länger als nötig auf einer solchen Präsenz.
[PHP] Fiese PHP Skripte: Obscurity Code
Nils hat zum Verfassen von fiesen PHP Skripten aufgerufen. Dem bin ich natürlich gefolgt.
Zuerst die Frage: Was meint er denn überhaupt? Da ich mir nicht ganz im Klaren war, was Nils mit "fies" meint, habe ich mir überlegt ..
- … das Skript könnte etwas fieses mit dem System anstellen: na ja find ich persönlich jetzt nicht so spannend. Fork Bombs gibts zu genüge und das geht mit Perl sowieso schöner …
- … das Skript könnte einfach extrem schlecht programmiert sein: Lustig ist es ja. Aber auf Kommando schlechten Code zu produzieren ist schwerer als man glaubt *g*
- … das Skript könnte sehr unsicher sein: Na gut, das ist nicht schwer, das sieht man oft genug.
- … das Skript könnte interessante Syntax-Features verwenden und am Ende aussehen wie ein zusammengehacktes, unleserliches PERL-Script: Das klingt doch lustig
Also habe ich mir angesehen, was man in PHP exotisches mit der Syntax anstellen kann und bin auch fündig geworden. Außerdem habe ich selbst noch ein wenig rumporbiert. Ergebnis ist folgender Code.
Wobei ich mir hier auch das Prinzip der "security by obscurity" zu Nutze gemacht habe und das Skript einfach extrem unleserlich geschrieben habe. Fies eben
Hier ein paar Merkmale des Codes:
- Keine ordentliche Kapselung
- "€" als Namen für Methoden und Funktionen funktioniert
- "_" als Klassenname
- Sehr unleserlich, da die Methoden namen in einem Array abgelegt ist und die Methoden dann dynamisch aufgerufen werden
- Es is auch ein Singleton-Pattern implementiert *g*
So würde das in der Praxis natürlich niemand machen. Aber es geht.
Keine Angst vor dem Ausführen: Das Script gibt einfach nur Zahlen von 0-10 mit Einrückung aus.
<?php
$f=_::€0();for(;_::$i->c<_::$f[4]();){_::$i->$f[3]()||_::$f[1]((_::$i->c<10?' '._::$i->c:_::$i->c));}
class _{var $c;static $i;
static function €0(){self::$i = new _;return array('€0','€1', '€2', '€3', '€4');}
static function €1($t){echo $t."\n";}
function €3(){$this->c++;}
static function €4(){return 10;}}
[CSS] CSS-Hacks: Der zoom-Hack
Und weiter geht es in der Reihe der Artikel über CSS Praxis!
Heute gibt es wieder einen CSS-Hack: den zoom-Hack, welchen ich euch gleich genauer erklären werde.
Jeder kennt die Unzulänglichkeiten des Internet Explorers. Zum Glück kann man Vieles mithilfe der Internet Explorer CSS-Weichen beheben, aber manchmal kommt es in der Engine des "Browsers" zu Render-Bugs: Elemente werden an einer falschen Position dargestellt, nur zur Hälfte dargestellt, gar nicht dargestellt oder Ähnliches.
Diese Render-Bugs kann man umgehen, indem man die Browser-Engine dazu zwingt, das betroffene Element "anders" zu rendern. Am Besten eignet sich hierfür die zoom-Definition. Die Zoom-Definition dient (überraschungsarm) zum Zoomen von Elementen im Internet Explorer und ab CSS3.
Ein Nebeneffekt der Definition ist, dass das Element im Internet Explorer die hasLayout Eigenschaft erhält, welche dem "Browser" auf mysteriöse Art und Weise mitteilt, dass dieses eine Element ein wichtiger Bestandteil des Layouts ist und er aufgrund dessen keine Render-Bugs mehr produziert. Wie das intern geregelt ist weiß niemand, aber es klappt und allein diese Tatsache reicht uns vollkommen aus.
Bei meiner Arbeit mit CSS hilft mir die zoom-Definition 90% aller Probleme im IE zu beheben! IE8 ausgeschlossen.
Hier ein Beispiel der zoom-Definition auf alle Elemente der Klasse "fixMe".
.fixMe {
zoom: 1;
}
[Nitescape.de] Google AdSense Performance
Ich habe ein paar Performance-Tests an Nitescape.de durchgeführt und dabei bemerkt, dass der Google AdSense Banner über 7 Sekunden Ladezeit benötigt. Das ist mir definitv zu viel. Nachdem ich den Banner entfernt habe, benötigt die Seite nur noch 2 Sekunden zum Laden mit Cache sogar weniger (auf localhost). Wenn ich jetzt noch das Logo komprimiere, die CSS-Dateien optimiere und ein bisschen Schrott rauswerfe, is die Seite richtig flott =)
Die Banner werden in Zukunft per AJAX nachgeladen um den User nicht beim Surfen zu hindern. Aus diesem Grund wird kein AdSense mehr auf Nitescape.de eingesetzt. Es ist nicht möglich AdSense-Banner per AJAX zu laden, da diese anhand des Contents auf der Seite erstellt werden und sich per JavaScript an die entsprechende Stelle des DOM-Trees schreiben. Das Einbinden per AJAX würde keine Content-Relevanten Anzeigen mehr liefern und das Skript würde den DOM-Tree komplett zerschießen (ich habs ausprobiert, is nich’ gut *gg*).
Lasst euch da mal was einfallen, Google.
[CSS] Horizontale Navigationen
Heute mal etwas für diejenigen, die weniger Erfahrung mit dem Webdesign haben =)
Horizontale Navigationsleisten sind total in und sind leichter umzusetzen, als man denkt. Ich möchte euch hier kurz die saubere Variante vorstellen, wie man ein horizontales Menü mithilfe von CSS gestaltet.
Früher hat man für sowas Tabellen verwendet, das ist aber mittlerweile ziemlich unprofessionel. Schöner ist die Umsetzung mit Listen (UL-Tags) und wie das funktioniert, zeige ich euch jetzt.
Das Ergebnis des How-Tos wird wie folgt aussehen:

Los gehts!
Folgende HTML-Sturktur benötigen wir für unsere Navigation
<ul id="navi"> <li><a href="index.html">Home</a></li> <li><a href="about.html">Über mich</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="contact.html">Kontakt</a></li> <li><a href="impress.html">Impressum</a></li> </ul>
Dieser HTML-Code definiert eine ungeordnete Liste mit 5 Punkten, jeder dieser Punkte beinhaltet einen Link, welcher einem Menüpunkt entspricht. Um das UL-Element besser über CSS selektieren zu können, haben wir ihn die ID "navi" zugewiesen.
Das Ergebnis sieht wie folgt aus:

Nun geht es an das Layouten der Liste.
[Projekte] Serendipity Plugin: HTML Rotate
Ich habe eben mal mein erstes S9y Plugin geschrieben: HTML Rotate.
Dieses kleine Plugin ermöglicht es mehrere HTML-Blöcke zu definieren. Auf der Vorderseite wird dann bei jedem Aufruf einer dieser Blöcke nach dem Zufallsprinzip ausgewählt und dargestellt.
Sehr nützlich um eine Werbebanner-Rotation zu erstellen
Ihr könnt das Plugin hier herunterladen. Viel Spaß.
(Das Plugin benötigt Serendipity 1.4.1 oder höher und PHP 5.0 oder höher)
[CSS] Internet Explorer Hacks

Jeder der schonmal mit CSS in Berührung kam, durfte sich bereits mit den Darstellungs-Unterschieden zwischen den verschiedenen Browsern herumschlagen. Firefox und Opera geben sich nicht viel, aber der Internet Explorer macht eigentlich generell nie das, was man von ihm verlangt.
Zum Glück gibt es CSS-Hacks mit deren Hilfen man dafür sorgen kann, dass Selektoren oder Definitionen nur in bestimmen Browsern ausgeführt werden.
Hier eine Übersicht meiner CSS-Hacks für den IE6, IE7 und IE8.
Ich demonstriere die Hacks immer anhand folgenden Beispiels:
Wir möchten das Padding des Elements div#content auf 5px setzen. Außer für den IE natürlich
div#main {
padding: 5px;
}
Internet Explorer 6
* html div#main {
padding: 4px;
}
Durch das Voraussetzen von “* html” wird dieser Selektor und damit alle Definitionen in diesem Block nur vom IE6 interpretiert.
Internet Explorer 7
*+html div#main {
padding: 4px;
}
Ähnlich wie der IE6-Hack funktioniert auch der IE7-Hack. Einziger unterschied: Das “+“.
Internet Explorer 8
div#main {
padding: 5px;
padding /*\**/: 4px\9
}
Der IE8-Hack unterscheidet sich stark von den beiden Anderen. Hier wird nicht der Selektor gehacked, sondern die Definition innerhalb des Blocks. “padding: 5px;” wird wie gewohnt von allen Browsern interpretiert. Die darauffolgende Zeile jedoch versteht nur der IE8 (womit er auch der einzige bleibt *g*).
[Symfony] sfDoctrine meldet “Couldn’t locate driver named mysql”
Was tun, wenn das sfDoctrine-Plugin bei dem Task build-sql folgende Meldung zurückgibt?
Couldn’t locate driver named mysql
Die Meldung entsteht, wenn dem sfDoctrine-Plugin das PDO nicht zur Verfügung steht. Einfach in der php.ini (für die CLI, nicht für den apache!) “pdo_mysql” aktivieren
Unter Debian befindet sich die Datei unter “/etc/php5/cli/php.ini“. Zumindest bei mir *g*
[PHP] Was ist eigentlich … Late Static Binding?

Was Namespaces sind, hat uns Manuel in seinem Beitrag über PHP 5.3 schon sehr gut erklärt, aber was hat es mit dem neuen Feature Late Static Binding auf sich?
Genau das möchte ich euch hier kurz etwas näher bringen.
Sehen wir uns zunächst folgendes Beispiel an:
<?
class ParentClass {
public static function whoAmI() {
echo __CLASS__;
}
public static function foo() {
self::whoAmI();
}
}
class ChildClass extends ParentClass {
public static function whoAmI() {
echo __CLASS__;
}
}
ChildClass::foo(); // Gibt "ParentClass" aus
?>
Da der PHP Interpreter bei statischen Aufrufen die Referenz zur aktuellen Klasse erst beim Kompilieren des Skripts bestimmt, verweisen __CLASS__ und self auf die Klasse, in der sich die entsprechende Methode befindet. Das heißt aus self::whoAmI() wird ParentClass::whoAmI(). Das ist leider ziemlich hinderlich und wurde nun endlich in PHP 5.3 gefixed.
Die Lösung lautet: Late Static Binding oder kurz “lsb“.
[Symfony] Saubere Installation des Framworks

Heute möchte ich euch kurz zeigen, wie man symfony sauber auf einem Linux-System installiert und integriert. Außerdem erkläre ich noch kurz, wie man dann Projekte anlegt.
Zuerst die Installation und Integration:
Wir legen das PHP-Framework unter /usr/local/lib ab:
$ sudo mkdir -p /usr/local/lib/symfony/1.2 $ cd /usr/local/lib/symfony/ $ sudo svn co http://svn.symfony-project.com/branches/1.2 1.2
Anschließend stellen wir das CLI-Skript zur verfügung, damit wir auch mit symfony arbeiten können. Nach diesem Schritt kann man das Skript direkt über den Befehl symfony ansprechen und muss nicht den absoluten Pfad mitangeben. Dies erreichen wir indem wir eine symbolische Verknüpfung des Skripts unter /usr/bin anlegen.
$ sudo ln -s /usr/local/lib/symfony/1.2/data/bin/symfony /usr/bin/symfony
Weiter gehts mit der Apache-Konfiguration. Um die Grafiken, JavaScripts und Stylesheets von Symfony verfügbar zu machen muss der Apache noch angepasst werden:
Alias /sf /usr/local/lib/symfony/1.2/data/bin/symfony/data/web/sf
<Directory "/usr/local/lib/symfony/1.2/data/bin/symfony/data/web/sf">
AllowOverride All
Allow from All
</Directory>
Projekte anlegen:
$ mkdir /var/www/newProject $ cd /var/www/newProject/ $ symfony generate:project newProject
Das war’s. Auf diese Art und Weise ist es auch möglich mehrere symfony-Versionen paralell zu installieren. Siehe dazu den Beitrag Your complete guide to running multiple Symfony Versions on the same environment auf symfonynerds.com
