Gumbos Blog

Auch wenn der Anteil der Hochgeschwindigkeitsanschlüsse steigt, sind vermeidbare Ladezeiten bei Webseiten unnötig. Doch wie lassen sich die Nadelöhre entdecken und weiten?

Ziele und Methoden

Yahoo! hat eine Liste mit Regeln aufgestellt, die zu einer Verbesserung der Ladegeschwindigkeit führen soll:

1. Make Fewer HTTP Requests: Je weniger zu laden ist, desto kürzer sind auch die Ladezeiten. Deswegen sollten ausgelagerte JavaScript- und CSS-Dateien zusammengelegt werden, so dass jeweils nur noch eine JavaScript- beziehungsweise CSS-Datei geladen werden muss. Geschickte CSS-Techniken erlauben das sogar auch bei einigen Grafiken (siehe etwa Dave Shea – CSS Sprites: Image Slicing’s Kiss of Death).
2. Use a Content Delivery Network: Je größer der Umfang einer Website, desto eher sollte über eine physische Trennung von statischen und dynamisch Inhalten nachgedacht werden, so dass sich beispielsweise ein Webserver für die statischen und einer für die dynamischen Inhalte sorgt, wobei beide jeweils für ihre Aufgaben optimiert sind.
3. Add an Expires Header: Das Verfallsdatum einer Ressource ist für das Caching wichtig. Ohne diese Angabe wird jedes mal die Ressource erneut angefordert, auch wenn sie das gar nicht müsste, da sie sich bereits in einem Cache befindet.
4. Gzip Components: Transferkompressionen wie Gzip können bei nur etwa 5% mehr Rechenleistung bis zu 70% an zu übertragenden Daten einsparen.
5. Put CSS at the Top: Je eher das anzuwendende Stylesheet geladen ist, desto eher kann auch der Browser mit der (endgültigen) Darstellung der Webseite beginnen.
6. Move Scripts to the Bottom: Bei externe Skriptdateien hingegen ist Gegenteiliges besser. Diese sollten am Ende des Dokuments notiert werden damit das Rendern durch sie nicht beeinflusst wird.
7. Avoid CSS Expressions: Dies betrifft zwar nur den Internet Explorer, da andere dies nicht unterstützten, doch es sollte vermieden werden, da die Ausdrücke mitunter bei jeder Zustandsveränderung neu ausgewertet werden müssen. Unter Umständen ist das sogar bei jeder Positionsveränderung des Mauszeigers der Fall!
8. Make JavaScript and CSS External: Alles was mehrmals verwendet wird, sollte extern ausgelagert werden, damit es im Cache gespeichert werden kann. Dies betrifft insbesondere JavaScript- und CSS-Dateien, die sich ja für fast jede Webseite nicht unterscheiden.
9. Reduce DNS Lookups: Je weniger Host-Namen verwendet werden, desto besser. Denn auch das Nachschlagen der zugehörigen IP-Adresse, die ja entgültig zur Übertragung benötigt wird, kostet Zeit.
10. Minify JavaScript: JavaScript-Dateien sind meist die größten Brocken, die es zu laden gilt. Deshalb ist es sinnvoll diese von unnötigem Ballast (Kommentare, überflüssiger Leerraum) zu befreien. Gleiches gilt übrigens auch für CSS.
11. Avoid Redirects: Standard-HTTP-Weiterleitungen sind den „Meta-Refresh“- oder JavaScript-Weiterleitungen vorzuziehen, da diese keinen zusätzlichen HTML-Ballast haben und sogar gecached werden können.
12. Remove Duplicate Scripts: Zumindest der Internet Explorer fragt mehrfach vorkommende Ressourcen auch mehrfach an. So kann eine versehentlich doppelt vorkommende externe JavaScript-Datei auch zu doppelter Ladezeit führen.
13. Configure ETags: Das HTTP-Header-Feld „ETag“ ist eine Art Fingerabdruck der angefragten Ressource und dient wie das Verfallsdatum beim Caching ebenfalls als Identifizierungsmerkmal und kann die Ladezeite verringern. Dieser ist allerdings auf einen bestimmten Server beschränkt und kann auf einem anderen Server in einem Serververbund, in dem beispielsweise die Last untereinander aufgeteilt wird, völlig anders sein. Deshalb sollte dies mit Vorsicht genutzt werden.

Werkzeuge

Web Page Analyzer
Der Web Page Analyzer war wohl der erste Web-Dienst dieser Art – zumindest ist es der erste, auf den ich gestoßen bin. Er analysiert die Webseite und gibt eine Übersicht der zu ladenden Bestandteile, ihrer Anzahl sowie ihrer Größe, gruppiert sie nach Typ und gibt Empfehlungen zur Verbesserung.

Pingdom Full Page Test
Der Pingdom Full Page Test hingegen ist ein sehr junger Dienst. Dort werden allerdings nur die zu ladenden Bestandteile, ihre Ladezeiten und -größen sowie ein Ladeverlauf grafisch dargestellt. Dies erlaubt jedoch einen schnellen Überblick und kann die Problemstellen schnell entlarven.

Firebug
Firebug hat sich mittlerweile zu dem Standardwerkzeug für Web-Designer entwickelt. Unter anderem bietet er eine Funktion, mit der die Ladeaktivität des Browsers detailliert überwachen lässt. Sie gibt nicht nur Auskunft über die sämtlicher Bestandteile einer Webseite, sondern auch über die Größen und Ladezeiten jeder einzelnen Ressource. Sogar Ajax-Interaktionen können damit überwacht werden.

YSlow
YSlow ist eine von Yahoo! entwickelte Firefox-Erweiterung, die sich nahtlos in Firebug integriert. Mit YSlow bewertet wie der Web-Page-Analyzer-Dienst das Ladeverhalten eine Webseite anhand der Art, der Anzahl und der Größe der Ressourcen einer Webseite. Dabei wird jedoch direkt das Verhalten des Browsers berücksichtigt, etwa das gleichzeitige Anfordern mehrerer Ressourcen oder das Cache-Verhalten, so dass auch gleich Verbesserungstipps gegeben werden können.

Web Inspector (Safari)
Seit der Beta-Version besitzt Safari den Web Inspector, der bisher nur in den Nightly-Build-Versionen der internen Render-Engine WebKit zur Verfügung stand. Neben ähnlichen, aber dennoch nicht so umfangreichen Funktionen wie Firebug besitzt Web Inspector ebenfalls ein Übersicht zur Analyse geladenen Bestandteile einer Webseite. Dort können sogar Anfragen der einzelnen Ressourcen und die Antworten darauf eingesehen werden.

Literatur

• Nate Koechley – High Performance Web Pages