Ganz abgesehen von Optimierungen in den Datenbank-Abfragen, einsetzen von File- und Ram-Caches ging es auch um das setzen von Cache-Direktiven für statische Dateien sowie eine Subdomain zur Auslieferung dieser und der damit verbundenen Erhöhung der parallelen Anfragen durch den Browser.

Wir haben zur Analyse Tools wie YSlow! von Yahoo oder Page Speed von Google genommen (wir berichteten), um damit Dinge zu finden, die es zu verbessern gab.

Schritt 1: Fasse zusammen und komprimiere

Als ersten Schritt haben wurden dazu die Stylesheets und Javascript-Dateien zusammengefasst und anschließend komprimiert (Entfernen von Kommentaren, Zeilenumbrüchen, doppelten Leerzeichen etc.). Dieser Vorgang geschieht komplett automatisiert, die dadurch erzeugten Dateien werden gecached und mit einer versionierten URL ausgegeben (z.B. http://becks.de/media/201104/js/…). Diese URL ändert sich, je nachdem wann eine der eingebundenen Dateien das letzte mal verändert wurden ist, selbstständig.

Schritt 2: Komprimiere erneut. Bitte was? Ja, nochmal!

Ein weiterer Schritt war die erneute Kompression der Inhalte. Das mag jetzt erstmal verwirrend sein, hat aber seinen Grund. Zwar haben wir im vorhergehenden Schritt bereits die Dateien komprimiert, wir haben die jedoch nur von unnötigen Zeichen entfernt. In diesem Schritt jedoch komprimieren wir Dateien selbst mittels dem gzip-Verfahren. Dadurch können wir die Dateigrößen teils bis zu 80% verkleinern, was dazu führt, dass der Server (Traffic) und der Browser (Ladezeiten) weniger Daten übertragen müssen. Jedoch ist dabei zu beachten, dass nicht alle Daten komprimiert übertragen werden dürfen. PDF’s, Filme, Flashdateien – um nur mal drei zu nennen – dürfen beispielsweise nicht komprimiert werden, da die Datei ansonsten nicht mehr korrekt gelesen werden können. Unproblematisch ist das Komprimieren hingegen bei der Ausgabe von HTML, bei Bildern, Stylesheets, Javascript, XML, JSON und und und. Kurzum, bei eigentlich allen Dokumenten die als Textform übertragen werden. Diese komprimierten Daten werden vom Browser anschließend wieder dekomprimiert und verwendet.

Schritt 3: Ablauf-Datum in Zukunft und Vergangenheit

Dieser Schritt befasst sich mit den Expires- und Last-Modified-Headern von statischen Dateien. Diese werden verwendet um den Browser zu sagen, wann eine Datei verändert wurde oder abläuft. Anders formuliert, wann eine Datei vom Browser neu geladen muss. Diese Header-Angaben kann man sich zu nutze machen um den Browser somit Direktiven zu vermitteln, damit dieser statische Inhalte länger im Cache behält und die Seite beim erneuten Besuch um ein vielfachen schneller lädt. Beispielsweise wurden auf der Startseite von becks.de, mit leerem Browser-Cache, Daten in der Größe von 1.3 MB geladen. Mit gefüllten Cache, also bei erneutem Besuch, wurden nur noch Daten von 43 KB geladen. Diese 43 KB waren lediglich das HTML selbst, dem wir als Ablaufs-Datum ein Datum aus der Vergangenheit gegeben haben. Damit suggerieren wir dem Browser, dass diese Datei längst überfällig ist und er sie erneut laden soll und gehen damit auf Nummer sicher, dass alle Änderungen auf der (dynamischen) Startseite auch so beim User dargestellt werden.

Schritt 4: die Andere

Zu guter Letzt haben wir unser Ausgabe-System so angepasst, dass alle Bilder von einer Subdomain (http://static.becks.de) ausgegeben werden. Damit ermöglichen wir dem Browser, mehr parallel ablaufende Anfragen durchzuführen als er es bei nur einer Domain könnte und können somit den Seitenaufbau beim User nochmal etwas beschleunigen.

Damit dieser Artikel nicht arg so theoretisch ist, haben wir euch hier unsere .htaccess als Beispiel eingefügt.

# rewrites
# +++++++++++++++++++++++++++++++++++++++++++++++++

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    RewriteCond %{HTTP_HOST} !www.becks.de [NC]
    RewriteCond %{HTTP_HOST} !static.becks.de [NC]
    RewriteRule ^(.*)$ http://www.becks.de/$1 [L,R=301]

    RewriteCond %{REQUEST_URI} ^system.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]

    RewriteRule ^media/([0-9]+)/(.*)$ /application/cache/$2 [L]

    RewriteRule ^sitemap_becks.xml$ /searches/sitemap [L]

    RewriteRule ^index.php/(.*)$ /$1 [R=301,L]

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php?/$1 [L]
</IfModule>

# media caching
# +++++++++++++++++++++++++++++++++++++++++++++++++

Header unset ETag
FileETag None
<FilesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css)$">
    Header set Last-Modified "Fri, 11 Mar 2022 10:10:36 GMT"
    Header set Cache-Control "public, no-transform"
</FilesMatch>

# expires header
# +++++++++++++++++++++++++++++++++++++++++++++++++

<IfModule mod_expires.c>
    # turn on the module for this directory
    ExpiresActive on

    # set default - not active due caching of pages
    #ExpiresDefault "access plus 24 hours"

    # cache common graphics
    ExpiresByType image/jpg "access plus 1 months"
    ExpiresByType image/gif "access plus 1 months"
    ExpiresByType image/jpeg "access plus 1 months"
    ExpiresByType image/png "access plus 1 months"

    # cache CSS
    ExpiresByType text/css "access plus 1 months"

    # cache other filetypes
    ExpiresByType text/javascript "access plus 1 months"
    ExpiresByType application/javascript "access plus 1 months"
    ExpiresByType application/x-shockwave-flash "access plus 1 months"
</IfModule>

# compressing header
# +++++++++++++++++++++++++++++++++++++++++++++++++

<IfModule mod_deflate.c>

    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/x-javascript application/x-httpd-php application/rss+xml application/atom_xml

</IfModule>

Wer mehr zu diesem Thema wissen möchte dem sei die Seite askapache.com empfohlen, welche sehr ausführliche Artikel, Anleitungen und Beispiele enthält und auch uns als Hilfe diente.

Um dieses Problem zu beheben und euch an der Lösung teilhaben zu lassen, beschreiben wir, wir ihr das Layout selt in wenigen Schritten ändern könnt.

Schritt 1:
Als erstes öffnet bitte die index.php im Order typo3conf/ext/templavoila/mod1.

Schritt 2:
Geht dann zu Zeile 1408. Dort ersetzt ihr folgenden Inhalt:

foreach ($cells as $cell) {
	$headerCells[] = vsprintf('<td width="%4$d%%" class="bgColor6 tpm-title-cell">%3$s</td>', $cell);
	$contentCells[] = vsprintf('<td %2$s width="%4$d%%" class="tpm-content-cell">%5$s</td>', $cell);
}

$output = '
<table border="0" cellpadding="2" cellspacing="2" width="100%" class="tpm-subelement-table">
	<tr>' . (count($headerCells) ? implode('', $headerCells) : '<td>&nbsp;</td>') . '</tr>
	<tr>' . (count($contentCells) ? implode('', $contentCells) : '<td>&nbsp;</td>') . '</tr>
</table>
';

durch diesen hier:

foreach ($cells as $cell) {
	//$headerCells[] = vsprintf('<td width="%4$d%%" class="bgColor6 tpm-title-cell">%3$s</td>', $cell);
	//$contentCells[] = vsprintf('<td %2$s width="%4$d%%" class="tpm-content-cell">%5$s</td>', $cell);
	$contentCells[] = '<tr>' . vsprintf('<td width="100%%" class="bgColor6 tpm-title-cell">%3$s</td>', $cell) . '</tr>'; // header cell
	$contentCells[] = '<tr>' . vsprintf('<td %2$s width="100%%" class="tpm-content-cell">%5$s</td>', $cell) . '</tr>'; // content cell
}

//$output = '
//	<table border="0" cellpadding="2" cellspacing="2" width="100%" class="tpm-subelement-table">
//		<tr>' . (count($headerCells) ? implode('', $headerCells) : '<td>&nbsp;</td>') . '</tr>
//		<tr>' . (count($contentCells) ? implode('', $contentCells) : '<td>&nbsp;</td>') . '</tr>
//	</table>
//';

$output = '
	<table border="0" cellpadding="2" cellspacing="2" width="100%" class="tpm-subelement-table">
		' . (count($contentCells) ? implode('', $contentCells) : '<tr><td>&nbsp;</td></tr>') . '
	</table>
';

Schritt 3:
Fertig! Nun braucht ihr nur noch die entsprechende Seite im Backend anschauen und euch davon zu überzeugen

Bleibt nur abzuwarten wann ich endlich meine Sonnenbrille habe, manche Leute und Dinge einfach ausblenden zu können wäre möglicherweise keine schlechte idee…

Beispiele was mit CSS3 möglich ist, hat das smashingmagazine in einem Beitrag zusammengetragen.

Viele Beispiele sind inspirierend bis beeindruckend, jedoch sollte man immer bedenken, dass manche Browser (also eigentlich der IE) teilweise etwas andere Ansichten von der Realität haben. Ein schönes Beispiel dafür ist der komplett mit CSS3 nachgebaute Fail Whale. Je nach Browser wird man hier sogar mit flatternden Vögelchen und wogenden Wellen belohnt. Was der IE jedoch davon hält, ist im verlinkten Beitrag als Screenshot zu sehen. Schade eigentlich.

10 / GUI – User Interface von Clayton Miller

Bei der Flashconference 2010 hat Clayton Miller seine bemerkenswerte Vision eines neuartigen Bedienkonzeptes für die Nutzung von Desktop PC´s vorgestellt. Das 10/GUI funktioniert durch Multitouchinteraktion mit beiden Händen und bis zu zehn Fingern. So ist es dem Benutzer möglich mehrere interaktionen gleichzeitig auszuführen.

10 / GUI VIDEO

ERGONOMIE

Bei Touchscreens ist – wie der Name schon sagt – der Screen und das Touchpad zusammengefasst. Das ist schön und gut, aber für längere Arbeiten nicht geeignet, da entweder der Nacken oder der Touch-Arm belastet wird.

Das 10/GUI ist vom Screen getrennt und ermöglicht dadurch dem User die Hände bequem auf dem Tisch in einer Ruhehaltung abzulegen. So wie wir es bei der Mouse kennen.

SOFTWARE

Da es in den gängigen Betriebssystemen noch schwierig ist mit einem Touchpad zu navigieren hat sich Miller auch Gedanken über eine benutzerfreundliche Benutzeroberfläche gemacht die auf das 10/GUI abgestimmt ist. “Con10uum” genannt. Dabei gestaltet er das Windowverhalten von Desktopapplikationen um.

Fenster werden nicht mehr unordentlich übereinander, sondern horizontal nebeneinander angeordnet. Die fenster nehmen sich Kontextabhängig ihren Raum und verdrängen andere Fenster nach links und rechts.

Die Fenster lassen sich dann mit drei Fingern verschieben und skalieren. Mit vier Fingern kann man durch alle Anwendungen scrollen und aus der Reihe der Anwendungen herauszoomen und hineinzoomen. Natürlich ist es dann auch möglich mit beiden händen gleichzeitig zu arbeiten. Also z.B. mit der einen Hand aus allen Anwendungen rauszoomen und gleichzeitig Fenster verschieben oder skalieren.

Zoomt man aus den Anwendungen komplett heraus, bekommt man eine Thumbnailansicht aller Anwendungen.

Für den Aufruf des Startmenüs und des Menüs der aktiven Anwendung dienen zwei Tasten, die seitlich neben dem Touchpad angebracht sind.

Das Konzept ist noch nicht ganz ausgereift und fraglich ob es in der Form je auf den Markt kommt.

Ich bin ja mal gespannt

Quellen:

http://www.10gui.com

Japan + Social = Mobile

Social Games

Arten von Social Games

Ein paar Grundtypen von SGs sind auszumachen, wobei gerade bei extrem verrückten japanischen Games die Grenzen oft verfließen:

• RPGs (Rollenspiele)
• Sportspiele (Fussballmanager, Tanzspiele… )
• Dekorations-/Shopping-/Bau-spiele  (Farm, Garten, Planet, Aquarium, Laden… etc)
• Kasino/Glücksspiel
• Reine Spass-Spiele wie z.B. “Hirntrainer”

Interaktionen

Social Games basieren auf Interaktionen zwischen Spielern. Viele verschiedene Arten der Interaktion sind denkbar und existieren in Spielen;

• Freundliche Interaktionen:  Schenken eines Gegenstandes, Einladen, Anwerben von Freunden
• Nachrichten; persönliche oder Wall-Posts über Spiel-Ereignisse, Spiel-Fortschritt
• Feindliche Interaktionen: Angreifen, Zerstören etc… (Beispiel: Jemandem einen Hai ins Aquarium setzen)

Diese Interaktionen finden wie erwähnt offline statt. D.h. der andere Spieler muss nicht gerade eingeloggt sein damit ich mit ihm interagieren kann. Dies ist entspricht dem Prinzip, dass man an einem Social Game eher ein- bis mehrmals am Tag für 5 Minuten spielt, statt am Stück 2 Stunden.  So reagiert man auf Ereignisse und Interaktionen anderer Spieler, z.B. wenn man durch eine Nachricht darauf aufmerksam gemacht wird und man gerade Zeit hat, sich kurz einzuloggen.

Technik

Die vorgestellten Games waren alle in Flash(Lite) entwickelt, warum mir auch dieses Thema am Herzen liegt und was es interessant für mich macht. FlashLite wird von vielen Handys unterstützt, “richtiges Flash” (was nicht unbedingt benötigt wird für einfache Spiele) wird ab Version 2.2 von Android unterstützt. Android Handys gibt es im Augenblick nur zwei in Deutschland, diese Zahl wird sich aber im Lauf des Jahres vervielfachen.

Monetarisierung

Wie in der Einleitung erwähnt, ist (auf jeden Fall in Japan) hier Goldgräberstimmung und es werden zweistellige Millionenumsätze gemacht. Im Prinzip haben Spieler der Games die Möglichkeit, mit kleinen Beträgen zusätzliche Gegenstände zu Kaufen. Diese sind entweder dekorativer Natur oder bringen bei einem Entsprechenden Spielprinzip Vorteile, bessere Fähigkeiten für Spieler. Nachdem in Japan eben die Social Networks überwiegend von mobilen Geräten bedient werden, ist hier eine Bezahlung via Handy extrem unkompliziert. Manche Plattformen bieten  eine eigene virtuelle Währung, soz. ein Konto, das man mittels Handy aufladen kann; in einem Game kann der User dann mit dieser spielübergreifenden Währung einkaufen.

Fazit

Auch wenn bei uns der Hype noch nicht komplett ausgebrochen ist, geht auf jeden Fall langsam immer mehr im mobilem Internet. Die nicht-ganz-so-technophilen-wie -die-Japaner Bürger der westlichen Welt fangen langsam an zu verstehen, dass das Internet viel mehr Sinn macht wenn man mobil ist. Dann machen auch soziale Spiele mehr (Un-)Sinn. Und weil Facebook ja nun echt jeder hat, kann man dort im Augenblick schon seine Spielideen testen.

Florian Mühlegg und Stefan Kolbe, zwei Studenten Interaktiver Medien der Filmakademie Baden-Württemberg haben diese Installation auf der FMX 2010 in Stuttgart vorgestellt:

“THE GAP ist ein Augmented Virtuality Adventure Game. In einer interaktiven Rauminszenierung verbindet das Spiel real erfahrbare Objekte mit einem virtuellen Raumerlebnis.
Dabei schlüpft der Spieler in die Rolle eines Forschers, der auf der Suche nach dem magischen Schatz der Xiong-Indianer ein gefährliches Hindernis überwinden muss.”

Das Hindernis, von dem die Rede ist, ist eine 5m lange Hängebrücke, über die es zu balancieren gilt.

Klingt einfach, ist es aber nicht!

Der Spieler trägt eine VR-Brille mit einer Webcam, welche das Sichtfleld des Spielers erfasst und in den Computer einspeist. Dieser ersetzt dann das grün in der Greenbox durch ein 3D-Szenario. Alles, was nicht grün ist, wird nicht ersetzt. Die Position und Blickrichtung des Spielers wird anhand eines Helms mit Infrarot-LEDs und einer Wii-Sensorik erfasst und damit das 3D-Szenario gesteuert.

Somit kann sich der Spieler in dem 3D-Szenario umschauen und seine Sinne werden genial manipuliert.

“Realraum und virtuelle Elemente verschmelzen zu einer “Realität” und schaffen dadurch ein ganz neues Raumempfinden, das auch auf der auditiven Ebene durch ein interaktives Sounddesign spürbar wird – eine neue, immersive Welt entsteht.

Mit einem Head-Mounted-Display, in dem Livebild mit Echtzeit-3D-Bildern kombiniert werden, wird das Abenteuer hautnah erlebbar. Durch das Display kann man die realen Objekte und die virtuelle Umgebung als Einheit wahrnehmen.”

Ich bekam bei dem Anblick jedenfalls ganz schön Höhenangst.

Zuerst gab es einen Vortrag zu Heavy Rain. “How art was used to Create a Movie Experience” hieß es dort in einem Vortrag von Chrisoph Brusseaux (Art & Graphic Director, Quantic Dream). Hier ging es vor allem um den benötigten Aufwand um ein atmosphärisches Spielerlebnis zu erschaffen. Angefangen bei ausgedehnter Recherche über die Erstellung der “visual grammer” und “moodboards” zu einzelnen Szenen bis hin zum fertigen Produkt.

Todd Masters von MasterFX zeigte uns anschließend den Fortschritt von MakeupFX im Filmgeschäft. Hierbei fiel vorallem der nachwievor häufige Gebrauch traditioneller Maskenbildnerei auf, der Dank neuer Materialien und Einfallsreichtum nicht komplett durch digitale Effekte vertrieben wird. In einer Reise durch die Filmgeschichte durften wir Zeuge der Entwicklung der Effektschmiede werden. Ein Bild kann davon kann man sich am Besten auf der MasterFX Webseite machen.

Florian Feilers Vortrag “iPhone Apps with Flash CS5″ wurde kurzerhand in “Mobile Apps with Flash CS5″ umgetauft. Auf der einen Seite beschließt zwar Flash von ihren Geräten zu verbannen, jedoch geschieht im Android Lager eher gegenteiliges. Zwar wird der iPhone Support Seitens Adobe eingestellt jedoch wird vermutlich ein Flash Packer für CS5 nachgereicht mit dem es möglich wird von Flash aus Android Apps zu exportieren. (Anmeldung zum Beta Test ist derzeit hier möglich: AndroidAir, AndroidFlash).

Raúl Escolano von Nikodemo zeigte dann noch den Produktionsablauf von Almorria, einer in Flash erstellten Trickfilmserie. Hier zahlt sich die Skalierbarkeit der Flashgrafiken aus die einem Export nach 1080p mit nichts im Wege stehen.

Nebenbei gab es noch Screenings wie zum Beispiel “The Animation Show of Shows” der acmefilmworks und die Vorführung der Gewinner der Siggraph 2009.

Vor einigen Wochen hat Google die schockierende Nachricht publiziert, dass Webseitengeschwindigkeit einen Einfluss auf die Position der Ergebnisse nehmen soll.

Vorerst ist der Parameter für die Geschwindigkeit nicht wesentlich relevant, da dieser bisher nur auf google.com und auch nur für weniger als 1% der Suchabfragen angewandt wird. Doch hat Google auch angekündigt den Parameter in allen Google-Suchmaschinen anzuwenden. Daher bietet die beliebteste Suchmaschine Webseitenentwicklern an, Tools zuverwenden, die Seiten auf ihre Geschwindigkeit testen und zur Optimierung verhelfen sollen.

Page Speed:
Das erste Tool, dass nun vorgestellt wird, ist das von Google empfohlene Page Speed. Dieses Tool ist ein Open Source Add-on für Mozilla Firefox – Firebug. Es dient zur Evaluierung der Performance.

Mit einem Klick auf den Button “Analyze Performance” werden die einzelnen Performancetests durchgeführt und nach kurzer Zeit dargestellt. Schon erhält man den Page Speed Score: xxx / 100. Wenn die Zahl hoch ist und einen grünen Hacken als Kennzeichen trägt, ist die Seite optimiert. Zusätzlich zu der allgemeinen Score-Bewertung erhält man eine Liste der 25 durchlaufenen Tests, die von schlechtester bis zur besten Bewertung sortiert ist. Die Faktoren, die ein Ausrufezeichen als Symbol neben sich stehen haben, besitzen das meiste Potential zur Verbesserung der Seite. Fährt man mit der Maus über das Symbol, erhält man für den einzelnen Test eine Bewertung. Klickt man nun auf dieses, erscheint ein Verbesserungsvorschlag.

Unter dem Menüpunkt “Ressources” lassen sich die Antworten des Servers der angeforderten Dateien (doc, js, css, images, cssimages, iframe, objects usw.) beobachten und vergleichen. Somit erkennt man sofort, ob eine JavaScript Datei zu groß ist oder welcher Status-Code der Server zurückliefert. Zusätzlich wird die File Size und die Transfer Size angezeigt. Leider hat Page Speed bei unseren Tests keine File Size anzeigen können (Stand: 19.04.2010).

Das Ergebnis lässt sich unter “Exportieren” auch als .json-Format auf den eigenen Desktop speichern.

Als Page Speed Installiert wurde, wurden zwei neue Menüpunkte im Firebug angelegt. Neben dem bereits erläutertem Punkt “Page Speed” existiert ein weiterer: “Page Speed Activity”.
Dieser Punkt zeichnet sämtliche Aktivitäten der jeweiligen Seite auf und unterteilt diese durch entsprechende Farben. So kann ein Administrator sofort erkennen an welchem Punkt die Abfrage zu Verzögerungen kam.

Fazit:
Page Speed hat seine Vorteile und Nachteile. Für Page Speed spricht auf alle Fälle die schnelldurchgeführten Tests und die Tatsache, dass es einfach als Add-on von Firebug schnell aufrufbar ist. Da Page Speed von Google empfohlen wird, könnte der Score dem Ranking-Faktor für die Geschwindigkeit ähnlich sein. Doch Leider bietet Page Speed keine Statistik oder eine druckbare übersichtliche Anzeige an.

YSlow:
YSlow ist eine ältere Variante von Yahoo. YSlow ist ebenfalls ein Firebug – Add-on und nutzt das amerikanische Notensystem von A(1) bis F(6). Zusätzlich bietet YSlow eine strukturiertere Oberfläche und ebenfalls einen Score Wert.

Der Vorteil an YSlow ist der Filter, der die einzelnen Testergebnisse in unterschiedliche Spaten ein ordnet. So erkennt man leichter an welchen Bereichen man nochmal Hand anlegen sollte. Durch die 6-stufige Bewertung des Notensystems sind die Test genauer dargestellt, wie das von Page Speed benutzte Ampel System. Das Tool bietet weitere Menüpunkte (Grade, Components, Statistics und Tools) an.

Unter dem Reiter “Components” sind sämtliche Komponenten der aktuellen Seite aufgelistet. In der ersten Zeile steht die Gesamtanzahl der angeforderten Komponenten und dessen Gesamtgröße. Zusätzlich zeigt dieser auch für jede einzelne Datei die “File Size” “GZIP Size”, “Cookie Received”, “Cookie Sent”, “Headers”, “URL”, “Expires”, “Response Time”, “ETAG” und “Action” an. Somit lässt sich am schnellsten herrauslesen an welcher Datei man noch schnellere Ladezeiten erreichen kann.

“Statistics” verschafft dem Tester ein Diagramm, an dem er erkennen kann wie groß jeder einzelne Bereich der HTTP – Requests ist. (leerer Cache und befüllter Cache)

“Tools” ist eine weitere Funktion von YSlow und bietet Tools, wie JSLint, dass die JavaScript Qualität der Seite überprüft, oder man hat die Möglichkeit alle JavaScript Dateien als Minified-Version oder normal anzeigen zu lassen.

Als Extras bietet das Tool eine druckbare Version und eine ausführliche Dokumentation an.
Die Rulesets lassen sich neu anlegen und verwalten. Standardmäßig sind bereits drei Rulesets angelegt (YSlow(V2), Classic(V1) und Small Site or Blog).

Fazit:
Als Fazit lässt sich sagen, dass YSlow einige Extras bietet, die man bei Page Speed vermisst. YSlow besitzt nach der Installation neben dem Firebug-Symbol (unten, rechts im Browser) ein eigenes Symbol, dass nach Ablaufen des Tests KB und Sekunden des Ladezeitraums anzeigt.

YSlow und Page Speed im Vergleich:
Es schadet nicht beide Tools zu nutzen, denn beide haben ihre Vorteile und Nachteile.

Beide Tools lassen sich gut auf der Seite gtmetrix.com gegenüber stellen und diese ist auch perfekt für Nutzer, die kein Firebug bzw. Firefox installiert haben. Nur ist uns aufgefallen, dass die Werte, die auf gtmetrix.com, nicht ganz mit den Werten des Add-ons übereinstimmen. Das könnte daran liegen, das die Hosts, mit denen getestet wird ,von unterschiedlichen Orten stammen oder gtmetrix.com eine andere Version nutzt. Doch haben die Werte meist nur +- 2 Scorepunkte Unterschied.

WebPagetest
Zuletzt stellt sich webpagetest.org vor. Diese Seite macht es möglich ohne irgendwelche Installationen Performancetests mit sehr vielen Einstellungsmöglichkeiten durchzuführen.

Diese Seite bietet einen Screenshot, eine Zeitleiste mit allen Zeiten von den geladenen Komponenten, eine Optimierungscheckliste und Details an denen man erkennen kann, wo genau es zu Verzögerungen kommt. Eine Request-Detail-Liste findet man unter den grafisch dargestellten Zeitbereichen. Nachteilig an der Seite ist, dass sie sehr unübersichtlich ist. Aber trotzdem bietet webPagetest die meisten Einstellungsmöglichkeiten an. Man kann zum Beispiel meherere Testdurchläufe eingeben oder den Standort der Tests wählen, doch liegen diese alle außerhalb Europas und sind daher für Seiten, die meist nur in Deutschland besucht werden, nicht optimal.

Allgemeine Tipps zur Webseitenbeschleunigung:

• Statische JavaScript- und CSS-Dateien, die nicht verändert werden, als Minified-Version schreiben. D. h. Alle Kommentare und Funktionen die nicht verwendet werden entfernen und alles in einer Zeile schreiben. Dadurch kann man schon einiges an Datengröße minimieren.
• Möglichst viele Kommentare im Quelltext entfernen.
• Mehrere JavaScript- und CSS-Dateien in eine große Datei zusammenfügen. Dadurch wird nur eine Anfrage für eine Datei gestellt.
• Bilder als CSS-Sprites verwenden. (SpriteMe!, CSS Sprite Generator)
• Viele Datenbankanfragen vermeiden.
• Bilder und Objekte sollten von der Datengröße gering gehalten werden.
• Bilder und Objekte sollten immer eine definierte Breite und Höhe haben.

Google hat eine klare Ansage gemacht und wir sollten dem folgen. Früher lagen die großen Verzögerungen meist an der schlechten Bandbreite, doch heutzutage ist das Internet schneller denn je. Deshalb liegt es an einem selbst, wenn die eigene Seite eine Ewigkeit in Anspruch nimmt um geladen zu werden. Wir können dafür sorgen, ein schnelleres und benutzerfreundliches Internet zu formen.

Alle Links im Überblick:

• Google Tools
• Page Speed
• YSlow
• gtmetrix.com
• webpagetest.org