Beim TYPO3camp 2010 in München hielt ich eine Vortrag zum Thema „CSS & Performance“. Im Teil 1 ging es überwiegend um das Optimieren von CSS. Im 2. Teil geht es um die Frontend-Performance, also die Optimierung der Ladezeit.
Teil 2: Performance
Seit einiger Zeit bezieht Google die Ladezeit der Website in die Berechnung der Suchergebnisposition mit ein. Auch wenn es nur ein kleiner Teil der vielen Faktoren ist, sieht Google den Grund dafür, dass schnelle Webseiten dem User nützlich sind.
Um die Ladezeit zu verbessern kann man nicht nur serverseitig Optimierung, wie Optimierung der Datenbank-Abfragen, verbesserte Funktionsaufrufe der jeweiligen Programmiersprache oder die Serverleistung durch Hardware-Optimierung durchführen, sondern man kann viel mehr beim Laden von Bilder, CSS und Javascript optimieren.
Bilder optimieren
Für Grafiken sollte man das Bildformat PNG vor GIF bevorzugen, da man PNG besser komprimieren kann und zudem das vielseitigere Format ist. Für Logo-Grafiken oder andere grafische Elemente ist das Format PNG8 mit bis zu 256 Farben (ähnlich GIF) zu verwenden. Möchte man Transparenzen (z.B. weiche Schatten) in Bildern verwenden, ist PNG24 das übliche Format für weboptimierte Bilder. Diese Grafiken werden problemlos in allen modernen Browsern
CSS Sprites
CSS Sprite bedeutet in der englischen Sprache Kobold oder Geistwesen und ist der Begriff für eine Grafik, die aus mehreren einzelnen Grafiken zu einer einzigen Grafik zusammengefügt wird. Diese Technik ist nicht neu, denn sie wurde bereits früher beim Erstellen von Computerspielen verwenden, da Grafikspeicher damals noch klein waren und das Nachladen lange dauerte. Auch im Webdesign sind CSS Sprites keine „brandneue“ Technik, sondern wurde bereits im Jahr 2004 von Dave Shea bei A List Apart vorgestellt. Allerdings erst in den letzten Jahren fand man mehr und mehr Websites, die diese Technik nicht zuletzt auch aufgrund der daraus resultierenden verbesserten Ladezeit anwenden. Denn der größte Vorteil von CSS Sprites liegt in der Einsparung von HTTP-Requests, der Reduzierung der Gesamtgröße der Bilder und somit in der Verkürzung der Ladezeit von Webseiten.
Einen umfassenden Artikel von mir gibt es dazu im Webstandard-Blog „CSS Sprite – Ladegeschwindigkeit optimieren und HTTP-Requests verringern“.
Webseiten die CSS-Sprites einsetzen:
Google, Amazon und selbst TYPO3 setzt seit der Version 4.4 auf Sprites für das Backend
Rendering optimieren
Grundsätzlich sind hier die „Performance Rules“ von Yahoo zu nennen. Regeln, die man leicht und ohne zusätzliche Serverstruktur umsetzen kann, sind:
– CSS mit <link> in den <head> einbinden
– @import vermeiden (http://www.stevesouders.com/blog/2009/04/09/dont-use-import/)
– Javascript vorm schließenden </body> wenn nicht onload-relevant
– Wenn JS im Head, dann nach CSS, weil Javascript das Rendering blockiert
– Javascript und CSS extern einbinden (sind dann vom Browser cachebar)
– Komprimieren und Zusammenfügen
– Max 4 Dateien mit < 10kb gleichzeitig, sind schneller als eine große Datei
– Mit GZIP komprimiert ausliefern
Tools
Standard-Tools für Firebug sind Yslow oder Pagespeed die ähnliche Punkte der aktuellen Webseite prüfen.
Webpagetest ist ein Online-Service mit dem man die Performance der Website an unterschiedlichen Server-Standorten der Welt und mit unterschiedlichen Verbindungsgeschwindigkeiten testen kann. Ein weiteres Highlight ist die visuelle Gegenüberstellung eines Aufrufs mehrerer Webseiten. Ein Beispiel wäre der Test für ein Relaunch-Projekt. Ist die aktuelle Entwicklungswebsite online erreichbar, kann man die mit der bestehenden in Puncto Ladegeschwindigkeit gleichzeitig testet. Dabei wird ein Video generiert, dass deutliche Unterschiede zeigt (sofern vorhanden).
Weitere Spielwiesen:
http://websiteoptimization.com/services/analyze/
http://tools.pingdom.com/
http://www.httpwatch.com/
http://stevesouders.com/cuzillion/
empfohlene Bücher
