Kapitel 5. Regel 5: Stellen Sie Stylesheets an den Anfang

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.