Archive for September, 2009
CSS Sprites
In einem meiner letzten Artikel zum Thema „ Externe Javascript Dateien zusammenfassen“ haben wir bereits gemerkt, dass man HTTP-Requests verringern sollte, um die Performance auf dem Client und die Benutzererfahrung zu verbessern. Dies kann im Falle von CSS-Dateien weniger effektiv sein als beispielsweise bei Javascript-Dateien.
Bei Bildern in großer Anzahl muss der Browser diese auch nacheinander laden, was zu Verzögerungen bei der Anzeige führen kann. Nehmen wir an, wir haben eine Webseite mit vielen Grafiken. Das Menu besteht aus 10 Bildern, jedes davon hat einen Mouseover-Effekt, und es gibt noch einige weitere Bilder. Es resultiert also in >25 Bildern, die der Browser einzeln laden muss. Außerdem stehen dann die Mouseover-Bilder bereits von Anfang an zur Verfügung, und müssen nicht erst geladen werden, wenn die Maus darüber bewegt wird, wir haben also eine Art eingebauten Preload.
Um die Anzahl von HTTP-Requests zu verringern, kann man alle Bilder in ein großes Bild packen, und mit Hilfe von CSS dann den richtigen Abschnitt anzeigen. In diesem Schritt kann man auch nochmal diese Bilder etwas komprimieren, um noch Bandbreite zu sparen, denn häufig sehen die Bilder auch mit weniger Farben genausogut aus.
Ein solches Bild könnte zB. so aussehen:
Wir haben also viele kleine Bilder in einem Bild untergebracht. Um diese Bildchen dann nutzen zu können und nur einen kleinen Ausschnitt dieses großen Bildes anzeigen zu können, nutzen wir die CSS-Funktion „background-position“.
Beispielsweise könnte der HTML-Code so aussehen:
<ul id=”navigation”> <li id=”navigation-01"><a href=”#”><span>Blog</span></a></li> <li id=”navigation-02"><a href=”#”><span>Portfolio</span></a></li> <li id=”navigation-03"><a href=”#”><span>Resume</span></a></li> <li id=”navigation-04"><a href=”#”><span>Contact</span></a></li> </ul>
Wir schreiben die einzelnen Menupunkte noch als Text rein, damit Suchmaschinen sie lesen können. Das entsprechende CSS sieht dann so aus:
#navigation {
background:url(”/images/navigation.jpg”) no-repeat;
width:490px;
height:40px;
margin:0;
padding:0;
}
#navigation span {
display: none;
}
#navigation li, #navigation a {
height:40px;
display:block;
}
#navigation li {
float:left;
list-style:none;
display:inline;
}
#navigation-01 {width: 98px;}
#navigation-02 {width: 131px;}
#navigation-03 {width: 123px;}
#navigation-04 {width: 138px;}
#navigation-01 a:hover {background:url(”/images/navigation.jpg”) 0px -40px no-repeat; }
#navigation-02 a:hover {background:url(”/images/navigation.jpg”) -98px -40px no-repeat; }
#navigation-03 a:hover {background:url(”/images/navigation.jpg”) -229px -40px no-repeat; }
#navigation-04 a:hover {background:url(”/images/navigation.jpg”) -352px -40px no-repeat; }
Standardmäßig soll die „erste Zeile“ des Bildes angezeigt werden. Das erreichen wir, indem wir das ganze Bild nehmen, aber nur 490*40 Pixel anzeigen (Zeilen 2-6). Wir blenden die spans aus (Zeile 10), ändern noch das Verhalten der Liste, damit die einzelnen Punkte nicht untereinander, sondern nebeneinander erscheinend (Zeilen 19-21). Wir definieren die Breite der einzelnen Listenelemente, und spezifizieren zum Schluss noch den Hover-Effekt, der einen anderen Ausschnitt anzeigen soll.
Es gibt auch Online CSS Sprite Generatoren, mit deren Hilfe es einfach ist, viele einzelne Bilder zu einem großen Bild zusammenzufassen, und dann die entsprechenden Koordinaten zu erhalten. Schaut euch einfach die folgenden Webseiten an:
Traffic pro eingeloggtem User herausfinden
Den Traffic einer ganzen Seite herauszufinden ist nicht sonderlich schwer in Zeiten von awstats, webalizer und diversen anderen Apache-Log-Analyzern.
Doch ich wollte damals bei meinem eigenen Browsergame den Traffic pro eingeloggtem User messen. Idee war damals, den „Free Accounts“ 100MB pro Monat zu schenken, falls mehr benötigt wird, muss ein Premium-Account her.
Doch wie stellt man das an? Das Apache-Log hilft nicht wirklich, denn dort kann man nicht die einzelnen (eingeloggten) User unterscheiden. Ich habe damals 3 Lösungen gefunden:
- mit dem Output Buffer von PHP arbeiten, Stringlänge bestimmen und mitloggen, dann Seite an den Browser schicken
- Irgendwie die IP-Adressen des Users merken, und dann das Apache-Log durchparsen und rechnen.
- die Apache-Extension mod_log_sql
Möglichkeit 1 sieht dann ungefähr so aus:
<?php ob_start(); // some html content here $trafficbytes = strlen(ob_get_flush()); // insert traffic into database ?>
Habe es nie ausführlich getestet, aber ich denke es ist langsam (da das HTML erst am Ende geflushed wird anstatt zwischendurch schon Häppchen zu verschicken). Außerdem muß man sich noch um Bilder kümmern, denn die sollen ja auch mitgezählt werden. Dazu würde ich eine Rewrite-Rule empfehlen, die bei jedem Bildrequest noch schnell ein php-Script ausführt. Auch das beeinflusst natürlich die Performance des Besuchers und des Webservers.
Die zweite Möglichkeit ist nicht ganz einfach umzusetzen. Die IP-Adresse allein ist nicht sonderlich aussagekräftig, einen Benutzer damit zu verfolgen recht aufwändig. In Zeiten von Proxies (Grüße an AOL), Neueinwahl bei DSL, mehrere Benutzer hinter einem Heimrouter etc reicht das nicht aus, um darüber den Benutzer zu bestimmen, gerade wenn Bruder und Schwester gemeinsam über eine Leitung im Internet sind usw.
Die dritte Alternative ist das Apache-Modul, welches ich dann auch genutzt habe: mod_log_sql. Dieses bindet man einfach in die entsprechene Apache-Config ein, und schon wird ein zusätzliches Log erzeugt, nämlich in der Datenbank. Dies kann man entweder für alle Seiten tun, oder nur für bestimmte VirtualHosts. Welche Spalten dort gefüllt werden sollen, in welcher Reihenfolge und mit welchen Daten, konfiguriert man in der apache-Config. Hier eine Beispielkonfiguration (hier für Linux, für Windows sieht es ähnlich aus: .dll statt .so usw.):
LoadModule log_sql_module modules/mod_log_sql.so LoadModule log_sql_mysql_module modules/mod_log_sql_mysql.so LogSQLLoginInfo mysqli://apacheloguser:apachelogpwd@localhost/apachelogdb LogSQLCreateTables On LogSQLMachineID mylocalmaschine LogSQLTransferLogFormat AbHIhMmpRSstTUuvz LogSQLTransferLogTable ztraffic_access_log #LogSQLNotesLogTable ztraffic_notes LogSQLCookieLogTable ztraffic_cookies #LogSQLHeadersInLogTable ztraffic_headers_in #LogSQLHeadersOutLogTable ztraffic_headers_out LogSQLWhichCookies UserID # hier könnten noch mehr Cookies stehen
Man kann alternativ zur eigenen Cookie-Tabelle auch ein bestimmtes Cookie mit ‚c‘ und „LogSQLWhichCookie“ in die access_log schrieben lassen. Hier eine Liste der Informationen, die man speichern kann.
Damit das Modul funktioniert, muß man noch das Modul „unique“ aktivieren, entweder per
a2enmod unique_id
oder via Einkommentieren von
LoadModule unique_id_module modules/mod_unique_id.so
Apache reload. Wenn man danach eine Seite besucht, liest man folgendes im apache error log:
[Tue Sep 01 19:59:46 2009] [notice] mod_log_sql: child established database connection [Tue Sep 01 19:59:46 2009] [error] mysql_query returned (1) [Tue Sep 01 19:59:46 2009] [error] table does not exist, preserving query [Tue Sep 01 19:59:46 2009] [error] table doesn't exist...creating now [Tue Sep 01 19:59:47 2009] [error] tables successfully created - retrying query [Tue Sep 01 19:59:47 2009] [notice] query successful after table creation
Die Tabelle wurde also erfolgreich angelegt. Das Ergebnis sieht dann so aus:
Der Inhalt der Tabelle (nur 1 Zeile):
Wäre dieser Test-Request kein 304er (Not Modified), hätten wir bei „bytes_sent“ auch eine Traffic-Angabe.
Mit Hilfe der Cookie-Tabelle können wir dann zB einmal täglich den Traffic jeden Users berechnen und in die entsprechende User-Tabelle füllen. Die Log-Tabelle sollte man dann wieder aufräumen und nicht länger benötigte Zeilen löschen.
Übrigens ist das Modul nur für Linux supported. Unter Windows kann man es zwar auch kompilieren, das ist aber mehr hohem Aufwand verbunden. Ich habe damals (2004) durch Zufall eine kompilierte Version gefunden. Die ist aber heute nicht mehr brauchbar, da sie für eine sehr alte Apache-Version kompiliert wurde.
Wenn ihr Fragen habt, fragt! Oder wenn ihr evtl. bessere Lösungen kenn, her damit! Oder was könnte man noch alles anstellen mit diesen Apache-Logs in einer Datenbank?
—————————————————-
Weitere interessante Links zum Thema:
Echo, Print und die Parameter
Wenn man sehr viel mit Strings und Stringausgaben arbeitet, und dabei maximale Performance braucht, gibt es einige Tricks, die dabei helfen, die letzten Prozente rauszuholen.
Bedenkt also: Diese leichten Performance-Unterschiede bringen nur bei sehr großen Scripten etwas. Bei einer kleinen Webseite oder ähnlichem ist der Unterschied zu vernachlässigen, da zählt mehr die persönliche Vorliebe und Lesbarkeit.
Zuerst einmal: in PHP gibt es zur Ausgabe von Daten (das können ja auch Zahlen sein, nicht nur Strings) zwei einfache Funktionen: echo und print.
Diese beiden Funktionen sind etwas besonderes: Es sind Sprachkonstrukte, und keine Funktionen. Man kann sie also auch ohne Klammern benutzen, beispielsweise so:
echo 'Dies ist ein Text';
echo('Dies ist ein Text');
Aber das kann auch zu Problemen führen, beispielsweise in diesem Quelltext:
(1 === $i) ? echo 'gleich' : echo 'ungleich';
Bei dieser trinären Bedingung funktioniert echo nicht, da es keinen Rückgabewert hat. print funktioniert.
echo ist print immer vorzuziehen. Warum? echo ist leicht performanter (aber nur im tausendstel Bereich, siehe unten). Außerdem bietet es die Möglichkeit, mehrere Parameter zu übergeben. Auch das ist minimal schneller als einen String mit Punkten zu verbinden.
In den folgenden Scripten nutze ich jeweils den Output Buffer von PHP, um nur im Speicher zu arbeiten. Wenn man die ob_-Funktionen weglassen würde, würde ein sehr großer Teil der CPU-Belastung (und damit des Tests) auf die eigentliche Ausgabe in der Console (bzw. dem Browser) draufgehen und die Ergebnisse verfälschen.
<?php
$string1 = "_string1_";
$string2 = "_string2_";
$timeStartComma = microtime(true);
for ($i=0; $i<1000000; $i++) {
ob_start();
echo $string1, 'sometexthere', $string2, "\r\n";
ob_get_clean();
}
$timeEndComma = microtime(true);
$timeStartDot = microtime(true);
for ($i=0; $i<1000000; $i++) {
ob_start();
echo $string1 . 'sometexthere' . $string2 . "\r\n";
ob_get_clean();
}
$timeEndDot = microtime(true);
$timeStartPrint = microtime(true);
for ($i=0; $i<1000000; $i++) {
ob_start();
print $string1 . 'sometexthere' . $string2 . "\r\n";
ob_get_clean();
}
$timeEndPrint = microtime(true);
echo "Comma needed " . ($timeEndComma-$timeStartComma) . " seconds\n";
echo "Dot needed " . ($timeEndDot-$timeStartDot) . " seconds\n";
echo "Print needed " . ($timeEndPrint-$timeStartPrint) . " seconds\n";
?>
<?php
$string1 = "_string1_";
$string2 = '_string2_';
$timeStartDouble = microtime(true);
for ($i=0; $i<1000000; $i++) {
ob_start();
echo "_string1__string1__string1__string1_";
ob_get_clean();
}
$timeEndDouble = microtime(true);
$timeStartSingle = microtime(true);
for ($i=0; $i<1000000; $i++) {
ob_start();
echo '_string2__string2__string2__string2_';
ob_get_clean();
}
$timeEndSingle = microtime(true);
echo "Double needed " . ($timeEndDouble-$timeStartDouble) . " seconds\n";
echo "Single needed " . ($timeEndSingle-$timeStartSingle) . " seconds\n";
?>
Es ist übrigens minimal schneller, wenn man keine Klammern nutzt.
<?php
$timeStartWithout = microtime(true);
for ($i=0; $i<1000000; $i++) {
ob_start();
echo '_string1_';
ob_get_clean();
}
$timeEndWithout = microtime(true);
$timeStartWith = microtime(true);
for ($i=0; $i<1000000; $i++) {
ob_start();
echo('_string1_');
ob_get_clean();
}
$timeEndWith = microtime(true);
echo "Without brackets needed " . ($timeEndWithout-$timeStartWithout) . " seconds\n";
echo "With brackets needed " . ($timeEndWith-$timeStartWith) . " seconds\n";
?>
Man beachte wie gesagt, dass wir hier von 1 Million Schleifendurchläufen reden. In 99,9% aller Fälle ist der Unterschied zu vernachlässigen. Wer also hoch performante Riesenscripte bauen möchte, sollte sich das ganze genau anschauen (oder solche Dinge gleich in C schreiben, aber ich will ja keine Werbung für andere Programmiersprachen machen 😉 )
