Google Page Speed – CSS Optimierung (Teil 1)

Wir nutzen Cookies & das Facebook Besucheraktions-Pixel für statistische Zwecke. Einverständnis bestätigen: OK

Mehr Infos: Datenschutzbestimmungen

Google Adwords Premier Google Partner Badge
 

Google Page Speed – CSS Optimierung (Teil 1)

page speedTeil 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>

<link rel="stylesheet" type="text/css" href="Beispiel/beispiel1.css" />
<link rel="stylesheet" type="text/css" href="Beispiel/beispiel2.css" />
<link rel="stylesheet" type="text/css" href="Beispiel/beispiel3.css" />

</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.

Minify CSS

„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

Hat dir dieser Beitrag gefallen?

Über den Autor

Christian
Christian ist Senior Consultant SEO/SEA bei der Online Marketing Solutions AG und ist zuständig für die ganzheitliche Projekt- sowie Strategieplanung bis hin zur technischen Umsetzung (On- sowie Offsite). Er betreut Key Account-Kunden der OMSAG aus unterschiedlichsten Branchen bzw. Marktsegmenten und kann dabei auf die Erfahrung von über 50 erfolgreichen Projekten zurückgreifen. Außerdem ist er Google AdWords Professional und verfügt über das Google Analytics Individual Zertifikat

Hinterlasse einen Kommentar