Google Page Speed – CSS Optimierung (Teil 1)

Teil 1 unserer Serie – Page Speed Optimierung:
Seit der Veröffentlichung vom Firebug-Addon Page-Speed arbeitet Google ständig an der Verbesserung seines Analyse-Tools. Bereits im August dieses Jahres berichteten wir von dem immer wichtiger werdenden Faktor der Optimierung der Ladezeit von Webseiten für eine bessere Platzierung im Suchergebnis von Google. Ein zweiter Faktor rückt aber immer mehr in den Fokus von Webshop-Betreibern.
Möchte man sich doch von seinen Konkurrenten abheben und dem Kunden einen einfachen und vor allem schnellen Einkauf ermöglichen. Die dafür immer origineller werdenden Module für große Shop-Systeme bieten zwar verbesserte Produktdarstellungen, erhöhen aber die Ladezeit durch die enthaltenen JavaScript- und CSS – Dateien zuweilen enorm.

Deshalb schlägt Google zur Optimierung der Ladezeit (Page Speed) bei Verwendung von CSS – Dateien folgende Punkte vor:

„Vermeiden Sie @import“

Per @import kann über eine in die Website eingebundene CSS – Datei eine zweite CSS – Datei aufgerufen und geladen werden. Mit diesem Verfahren kann der Webbrowser die beiden Dateien aber nicht parallel vom Server laden. Erst nach dem Download und der Abarbeitung der ersten Datei wird die zweite Datei aufgerufen. Somit erhöht sich die Ladezeit ihrer Website.

Man sollte von der Verwendung von @import absehen und die betreffenden CSS – Dateien über einen Title- Tag in die Website einfügen.

[html] <link rel=“stylesheet“ type=“text/css“ href=“Beispiel/beispiel.css“ />
[/html]

„Binden Sie CSS – Dateien im Head – Bereich der Website ein“

CSS – Dateien können in fast jeden Bereich des Quellcodes in eine Website eingefügt werden. Webbrowser beginnen allerdings erst mit der Darstellung der Website, wenn alle externen CSS – Dateien geladen sind. Sind diese also nicht im Head – Bereich einer Website eingebunden braucht der Webbrowser länger für das Auffinden und die Darstellung.

Man sollte daher alle im Quellcode vorhandenen CSS – Dateien per Link – Tag in den Head – Bereich der Website einfügen.

[html] <!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“
„http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=“http://www.w3.org/1999/xhtml“ xml:lang=“de“ dir=“ltr“ lang=“de“>

<head>

</head>
.
.

[/html]

„Kombinieren Sie externe CSS – Dateien“

Oftmals werden für unterschiedliche Websitebereiche auch unterschiedliche CSS – Dateien verwendet. Wie bereits erwähnt bringen ebenfalls viele Shop-Module die dazugehörigen Style Sheet Informationen gleich mit. Durch die Verwendung von mehreren externen CSS – Dateien erhöhen sich aber die Anfragen, die ein Webbrowser an den Server stellen muss – Round-trip time (RTT).

Google empfiehlt hier die Verwendung von zwei bis maximal drei externen CSS-Dateien.

„Machen Sie CSS – Dateien möglichst klein“

Um während und nach der Erstellung einer Website eine gute Übersicht über die Formateigenschaften der einzelnen HTML-Elemente zu haben, werden die jeweiligen Stilinformationen in den CSS – Dateien zumeist untereinander positioniert. Dadurch erhöht sich die Größe der CSS – Datei und somit die Zeit, die der Browser zum Auslesen der Datei benötigt.

Eine gute Lösung hat Google Page Speed hier selbst im Gepäck. Nach der Abfrage können Sie die minimierte CSS – Datei abspeichern und mit der Datei auf Ihrem Server einfach austauschen.

„Fazit & Tipp:“

Es gibt zwei wichtige Kernaussagen zur Verwendung von CSS – Dateien.

„So wenig wie möglich“ und „so klein wie möglich“.

Fügen Sie daher alle zur Darstellung Ihrer Website nötigen CSS – Dateien zu einer Datei zusammen, binden Sie die Datei über einen Link – Tag in den Head – Bereich der Website ein und minimieren Sie diese. Die übrigen noch bestehenden CSS – Dateien können anschließend aus dem Quellcode entfernt werden.

Verfasst von Christian Grzeschik, Key Account SEO Consultant