“CSS & Performance” Artikel Teil 2

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

JPG sollte man ausschließlich für Fotografien verwenden. Hier muss man abwägen, wie stark die Komprimierung sein soll, je stärker, desto kleiner die Bildgröße.

Nach Erstellung der weboptimieren Grafiken durch Photoshop’s Export oder Fireworks sollte man die PNG-Bilder mit einem zusätzlichen Programm optimieren. Crushing PNG heißt die Methode und entfernt unnötige Bilddaten, bzw. komprimiert diese. Das für die Kommandozeile von Linux entwickelte Tool, gibt es mittlerweile auch als Progrämmchen für Mac oder PC .

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


flattr this!