EfA-Laborbericht № 4
Need for Speed
So ein Relaunch ist auch immer wieder die Gelegenheit, sich über die Performance der Seiten Gedanken zu machen. Die Flaschenhälse sind hier in der Regel nicht die Server und Clients, sondern der Transport zwischen den beiden. Heutige Desktop-Computer und Laptops haben mittlerweile so viel überschüssige Rechenleistung und auch Web-Server sind im Normalfall ausreichend dimensioniert, dass man sich im Gegensatz zu den Anfangstagen des Webs keine Gedanken mehr machen muss, ob ein Client vielleicht mit einem bestimmten Seitengewicht überfordert sein könnte.
Moderne Browser sind zudem mittlerweile so schnell mit der Verarbeitung von HTML & CSS & JavaScript (ok, mit Ausnahme von Firefox 2), dass man diesen ruhig ein wenig Rechenleistung in Form von aufwändigeren Layouts und Client-seitigen Funktionen abverlangen kann.
Was aber nach wie vor gilt ist, dass die Dateien für den Versand möglichst klein und die Anzahl der Pakete möglichst gering gehalten werden sollte. Viel mehr als ein zusätzliches div hier und da im HTML fallen ausschweifende Formatierungen im Quelltext und unnötige Kommentare ins Gewicht. Ähnliches gilt auch für unsere Style Sheets: in der Entwicklungsversion sind die Formatierungsanweiungen auf fünf Dateien verteilt, die zusammengenommen über 90 Kilobyte wiegen – klar dass sowas nicht im Live-Betrieb auf den Server gehört. Die fünf einzelnen Anfragen an den Server würden schon alleine eine messbare Verzögerung ergeben, und die gesamten Kommentare und Formatierungen interessieren den Browser bei der Verarbeitung der Style Sheets nicht im geringsten – sie sind also unnötiger Ballast.
Daher gibt es im Live-Betrieb nur noch drei Style Sheets – eines für die Monitor-Darstellung, ein Print-Style Sheet und eine Datei mit den leider nach wie vor notwendigen Hacks Extrawürsten für Internet Explorer Version 5-7. Bereinigt um Kommentare, Einrückungen etc. wiegt das Screen-CSS auf einmal nur noch 24 Kilobyte, und wenn Server und Client sich auf einen Datenaustausch in gezippter Form verständigen können (die weitaus meisten Browser beherrschen dies), dann ist das CSS am Ende nur noch 6 Kilobyte groß.
Bei einem aktuellen Rechner an einer DSL-Leitung macht das den Unterschied zwischen 2 und 3 Sekunden bis zur fertig dargestellten Seite – immerhin ein Drittel, aber nichts weltbewegendes. Für das knappe Viertel aller Besucher, die wir immer noch per Modem oder ISDN begrüssen dürfen fällt dieser Unterschied aber umso mehr ins Gewicht.
Geblitzt
Handelsübliche Browser (zumindest solche, die man als Webentwickler auf der Platte haben sollte) haben mittlerweile eingebaute oder per Erweiterung nachrüstbare Tools, mit denen man die Performance der eigenen Seiten testen kann (und sollte). Im Safari ist dies der Web Inspector, der sämtliche Dateien die zur Darstellung einer Seite benötigt werden mitsamt ihren Dateigrößen und Ladezeiten in einem Wasserfall-Diagramm darstellt.
Für Firefox-User gibt es etwas vergleichbares in Form von Firebug in Verbindung mit der YSlow-Erweiterung. Ebenfalls hilfreich ist hier das Pagetest-Tool von AOL, das unterschiedliche Geschwindigkeiten von fetten 20 Mbit bis zu einem langsamen 56k-Modem simulieren kann.
Ganz zum Schluss der Entwicklung durchlaufen die Style Sheets dann noch die geniale Firefox-Erweiterung Dust-Me Selectors von James ›Brothercake‹ Edwards, um unbenutzte CSS-Regeln aufzuspüren. Diese haben die Eigenschaft, sich im Laufe der Entwicklung anzusammeln und können in der Regel gefahrlos entsorgt werden. Besonders hilfreich bei großen Angeboten ist die Funktion, die gesamte Website anhand einer sitemap.xml automatisch abzugrasen:
P.S.: Was unsere heutige Folge mit der Barrierefreiheit zu tun hat? Nichts, aber auch das gehört zu einem professionell gemachten Webangebot.