Google Page Speed - Teil 3: "above the fold" oder CSS

Für alle Webmaster die sich mit dem Thema JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten "above the fold" (ohne Scrollen sichtbar) beseitigen herumschlagen, hier ein paar Fakten dazu.

Gegenüberstellung CSS Datei oder Styles im Code

Styles im Code

Laut Google Page Speed die schnellste und entsprechend bevorzugte Methode von Google. Das mag für Google selber und ein paar statische Seiten ohne Design und Aktualität zutreffen. Für die anderen 99% der Websites im Netz wohl nicht.

CSS im Header

Laut mir immer noch die schnellste und beste Methode. Sinnvoll ist (und da gebe ich wieder Google recht), im Header braucht es maximal eine CSS Datei, und die muss minimalisiert sein. Natürlich sollte man auch darauf achten, dass wirklich nur benötigte Styles in der CSS hinterlegt sind.

Vergleich Google.ch / Webliste.ch

Google.ch Webliste.ch
1. Aufruf 149 kb | 1. Aufruf 150 kb (113 CSS)
2. Aufruf (Google hat ein neues Bild) 149 kb | 2. Aufruf (viele Änderungen auf der Seite) 37 kb
3. Aufruf (Google hat ein neues Bild) 149 kb | 3. Aufruf (viele Änderungen auf der Seite) 37 kb

Mein Fazit

Da die CSS Datei nur einmal für die ganze Website heruntergeladen werden muss, spart man bei diesem Vergleich bei jedem Seitenaufruf 112 kb! Nimmt man noch den Vorteil der globalen Anpassung über eine CSS Datei gebenüber individuellen Styles in einzelnen Seiten, bleibt wohl nicht mehr viel zu sagen als:

Vergesst diesen Tipp von Google - auch wenn es dann nicht ganz für 100 Punkte reicht :-)