HomeKontaktImpressum
Sie sind hier: Home

Stylesheet extern auslagern

Gerade bei Suchdiensten ist die Performance von Seitenanfragen extrem wichtig. Um die Nutzer möglichst schnell mit den geforderten Suchergebnissen zu versorgen, betten die Betreiber derartiger Dienste Stylesheets und Scripte direkt in die Ergebnisseiten ein. Aber es gibt auch Anwendungen, bei denen dies eher kontraproduktiv ist.

Das Einbetten von Stylesheets wird gerade von Websites mit außergewöhnlich hohem Traffic intensiv genutzt. So liefert beispielsweise auch die Suchmaschine Google ihre Suchergebnisse bei jeder Anfrage stets samt Stylesheet erneut aus. Aber auch die auf deren Seiten verwendeten JavaScript-Komponenten werden bei jeder Seitenanfrage mit übertragen.

Neben der Qualität der gelieferten Suchergebnisse, ist bei Suchmaschinen die Latenzzeit von Suchanfragen von essenzieller Bedeutung. Durch schnelle Abarbeitung der Requests wird eine gröstmögliche Benutzerzufriedenheit erreicht. Wartet der Besucher dagegen zu lange auf die Ergebnisse seiner Suche, so wird er sich schnell anderen Anbietern zuwenden. Spezielle Suchdienste und ähnlich stark frequentierte Websites zeichnen sich aber auch dadurch aus, dass deren Internetseiten seitens der Gestaltung relativ spartanisch sind. In derartigen Fällen liegt das Einbetten von externen Komponenten nahe.

Allerdings gibt es gelegentlich auch Anwendungsszenarien, bei denen eine Einbettung der CSS-Informationen eher unangebracht ist. Sind beispielsweise die für das Layout benötigten Stylesheets aufgrund unterschiedlicher Formatierungsvorgaben in diversen Seitenbereichen sehr umfangreich und benötigen deshalb einige Kilobyte Speicherplatz, so sollte die Auslagerung in eine externe Datei vorgezogen werden.

Ein weiterer Grund für eine Auslagerung liegt vor, wenn – etwa bei Communities oder Foren – die Seitenbesucher normalerweise viele einzelne Seitenaufrufe auf der Website tätigen. Bei derartigen Websites sollte ebenfalls die Auslagerung in eine externe CSS-Datei erfolgen. Hier kommt der Browsercache zum Zuge und die Styles werden nur beim ersten Seitenaufruf an den Browser übertragen. Bei allen folgenden Seitenaufrufen wird das Stylesheet aus dem Cache gelesen und der Webserver wird gegenüber der Einbettung weniger Traffic versenden.

Auf jeden Fall sollten Cascading Stylesheets in einer externen Datei landen, wenn diese graphische Elemente enthalten. Der Vorteil ist hier, dass sich der Browser das Nachladen vieler einzelner Bilder, die ohnehin auf jeder Seite benötigt werden, sparen kann – letzlich ersetzt ein einziger HTTP-Request diejenigen, die nötig wären, um die einzelnen Bilder nachzuladen. Werden Bilder mittels Base64-Kodierung Inline – also direkt im Cascading Stylesheet unter Verwendung einer Background-Angabe von Style-Eigenschaften bestimmter HTML-Elemente – verbaut, so wächst die CSS-Datei schnell zu einer stattlichen Größe heran.

Dennoch gilt auch bei einer Auslagerung: Auch wenn die CSS-Informationen in eine externe Datei ausgelagert sind, sollten wieder alle überflüssigen Kommentaren und unnötigen Zeichen aus dem Stylesheet entfernt werden, bevor dieses auf dem Produktivssystem landet. Werden Cascading Stylesheets zudem noch als statische Dateien angeboten, so macht es Sinn vorkomprimierte Dateiversionen vorzuhalten. Diese können gezielt an Browser versendet werden, die komprimierte Dateien verarbeiten können. Hierzu muss der Webserver nicht einmal viel Rechenleistung verschwenden.

Im Dateisystem des Webservers werden einfach zwei Versionen des Stylesheets abgelegt. Die eine Datei enthält das unkomprimierte und von unnötigem Balast befreite Stylesheet – eine solche sollte zur Wahrung der Abwärtskompabilität sicherheitshalber hinterlegt sein. In einer zweiten Dateiversion wird diese Datei nocheinmal in Form einer ZIP-Datei gespeichert. Mittels .htaccess wird – abhängig von den Fähigkeiten des Webbrowsers – entschieden, welche der beiden Versionen ausgeliefert wird. Da mittlerweile nahezu alle Webbrowser den Abruf komprimierter Dateien beherschen, wird normalerweise die gepackte Dateiversion versendet.

  
© 2009-2024 Möglichkeiten zur Steigerung von Geschwindigkeit und Usability Ihrer eigenen Website