High Performance Websites

Kapitel 5
Regel 5: Stellen Sie Stylesheets an den Anfang (S. 39-40)

Ein Team, das ein wichtiges Portal bei Yahoo! betrieb, band verschiedene DHTML-Features in seine Seiten ein, während es gleichzeitig sicherzustellen versuchte, negative Einflüsse auf die Response-Zeiten zu vermeiden. Eines der etwas komplexeren DHTML-Features, ein Popup-DIV zum Senden von E-Mails, war nicht Teil des eigentlichen Renderings der Seite – es war erst verfügbar, nachdem die Seite geladen war und der Benutzer den Button zum Senden einer E-Mail angeklickt hatte. Da es zum Rendering der Seite nicht verwendet wurde, legten die Frontend-Ingenieure das CSS für das Popup-DIV in einem externen Stylesheet ab und fügten den entsprechenden LINK-Tag am Ende der Seite ein, in der Annahme, dass das Einbinden am Ende das Laden der Seite beschleunigen würde.

Die Logik dahinter ist durchaus nachvollziehbar. Viele andere Komponenten (Images, Stylesheets, Skripten etc.) waren zum Rendering der Seite notwendig. Da die Komponenten (im Allgemeinen) in der Reihenfolge abgerufen werden, in der sie im Dokument stehen, würden die kritischeren Komponenten zuerst heruntergeladen, was zum schnelleren Laden der Seite führen würde, wenn das Stylesheet des DHTML-Features am Schluss der Datei eingefügt wird. Oder doch nicht?

Beim Internet Explorer (immer noch der am weitesten verbreitete Browser) war die neue Seite deutlich langsamer als mit dem alten Aufbau. Auf der Suche nach Möglichkeiten, die Geschwindigkeit der Seite zu erhöhen, entdeckten wir, dass die Verschiebung des Stylesheets an den Anfang des Dokuments (in den HEAD) die Seite schneller laden ließ. Das stand im Widerspruch zu dem, was wir erwarteten. Wie konnte das Einbinden des Stylesheets zu Beginn der Seite, was ja das Laden der kritischen Komponenten verzögerte, die Seitenladezeiten verbessern? Weiterführende Untersuchungen führten zur Entwicklung von Regel 5.

Progressives Rendering

Frontend-Ingenieure, die sich um die Performance Gedanken machen, wünschen sich ein progressives Laden der Seite, d.h. der Browser soll jeglichen Inhalt darstellen, sobald er ihm zur Verfügung steht. Das ist besonders wichtig bei Seiten mit vielen Inhalten und bei Benutzern mit langsamen Internetverbindungen. Die Bedeutung eines visuellen Feedbacks für den Benutzer wurde umfassend erforscht und dokumentiert. In seinem Webartikel1 hebt Jakob Nielson, Usability-Pionier, hervor, wie wichtig ein visuelles Feedback in Form einer Fortschrittsanzeige ist. Fortschrittsanzeigen haben drei wesentliche Vorteile: Sie versichern dem Benutzer, dass das System nicht abgestürzt ist, sondern an seinem Problem arbeitet, sie zeigen an, wie lang der Benutzer ungefähr warten muss, so dass der Benutzer bei langen Wartezeiten andere Dinge tun kann, und schließlich bieten sie dem Benutzer etwas, das er sich ansehen kann, was das Warten weniger quälend macht. Dieser letzte Vorteil sollte nicht unterschätzt werden und ist der Grund dafür, dass wir eine grafische Fortschrittsanzeige empfehlen, statt die verbleibende Dauer einfach in Zahlen auszudrücken. In unserem Fall ist die HTML-Seite die Fortschrittsanzeige. Lädt der Browser die Seite progressiv, dienen die Kopfzeile, die Navigationsleiste, das Logo zu Beginn etc. alle als visuelle Rückmeldung für den Benutzer, der auf die Seite wartet. Das verbessert das Gesamterlebnis des Benutzers.