Problematisch bei mehreren Servern oder einem CDN sind ETags. Mit ihnen wird geprüft, ob die Version einer Datei im Cache des Besuchers der Version auf dem Server entspricht. Ist die Datei identisch, wird sie aus dem Cache genutzt, falls nicht, wird sie neu gesendet. Wird mehr als ein Server zur Inhaltsauslieferung genutzt, so können ETags, die auch den jeweiligen Ursprungsserver beinhalten, nicht korrekt funktionieren und es werden viele Daten übertragen, die schon im Cache vorliegen. In diesem Fall sollte man ETags deaktivieren. Die Cache-Überprüfung fällt dann zurück auf den „Last modified“-Check, der für ein solches Setup ausreicht.

Google hat einen neuen kostenlosen Ansatz für die Last-Verteilung und optimale Cache-Ausnutzung: die Google AJAX Libraries API. Google hostet auf eigenen Servern beliebte JavaScript-Libraries und ermutigt Website-Betreiber, diese einzubinden. Hat ein Benutzer bereits Websites besucht, die Google-Server für JavaScript-Libraries nutzen, so kann die Library im Cache des Benutzers genutzt werden. Dies erhöht die Performance [13].

Auch der kommende HTML5-Standard ist für Performance interessant: HTML5 bringt erstmals feste Parsing-Regeln für Browser mit sich. Durch dieses standardisierte Parsing verarbeiten Browser-Engines HTML5 bis zu 5 Prozent schneller [14].

CSS – Stylish und performant

Die Verarbeitungszeit von CSS-Selektoren steigt mit deren Komplexität.

Auch bei CSS gibt es signifikante Performance-Unterschiede: Die performantesten CSS-Selektoren sind das klassische ID (#) und Class (.). Der Einsatz komplexerer CSS-Selektoren wie Wildcard-Selector (*), Descendant-Selector (>) oder CSS3-Selector geht zu Lasten der Performance, denn die Browser-Engines brauchen wesentlich länger, um sie zu verarbeiten. Daher sollte man für eine High-Performance-Website auf komplexe CSS-Selektoren verzichten und modulares CSS mit wiederverwendbaren Klassen schreiben [15].

JavaScript-Expressions in CSS, wie man sie zum Beispiel zur Simulation von „min-width“ im IE nutzen kann (expression(document.body.clientWidth > 960)?"960px" : "auto";), sind ebenfalls ein Performance-Problem. Die Verarbeitung solcher Expressions kostet bei jedem Seitenaufruf erneut Zeit.

Auch „@import“ für die Referenzierung von CSS sollte man meiden, denn es blockiert je nach Browser-Engine den Ladevorgang, bis die referenzierte Datei vollständig geladen und geparst wurde. „@import“ sollte man also weder im Header eines HTML-Dokuments noch innerhalb eines Stylesheets verwenden, um ein anderes Stylesheet zu laden.

JavaScript

Der Aufruf des idealerweise bereits zu einer einzelnen Library zusammengefassten JavaScripts sollte aus dem Header an das Ende des HTML-Dokuments verschoben werden: Die ideale Position ist direkt vor dem schließenden </body>. Dadurch wird das gesamte HTML-Grundgerüst vor den Skripten geladen.

Außerdem kann man das „defer“-Attribut einsetzen: Das JavaScript wird so als nicht direkt relevant für die Anzeige von Inhalten gekennzeichnet und erst zum Ende des Seitenaufrufs hin ausgeführt [16]. Das „defer“-Attribut wird derzeit zwar nur vom Internet Explorer ab Version 4 und von Firefox 3.5 unterstützt, eine breitere Browserunterstützung ist aber absehbar.

Grafiken

Grafiken bieten viel Potenzial zur Reduktion der zu übertragenen Datenmenge: Ein 300-KB-Foto kann ohne erkennbaren Qualitätsverlust auf 40 KB komprimiert werden. Zur Bildoptimierung gibt es verschiedene Methoden: manuelle Bildoptimierung via Photoshop/GIMP, halbautomatische Optimierung via Web-Apps wie PunyPNG oder serverseitige Optimierung und Caching mit dem Apache-Modul „moddims“ oder mit Chronjobs (z. B. für „optipng“).

Jetzt aber los!

Mit den aufgezeigten Methoden lassen sich Ladezeitverbesserungen von bis zu 75 Prozent erreichen. Das reduziert nicht nur die Betriebskosten und die Serverlast, sondern sorgt auch für mehr Umsatz, mehr Besucher und wirkt vertrauensbildend.

Der Autor

Tobias Baldauf entwickelt seit 1999 begeistert Websites und Interfaces für Hochschul- und Forschungseinrichtungen, IT-Konferenzen und Embedded-Systeme. Als Interaction-Designer steht er verschiedenen Open-Source-Projekten beratend zur Seite und hält Vorträge zu High-Performance-Websites und Webstandards.