Website Performance - Mehr Speed im Netz

CSS Performance Optimierung
Kommentare

CSS bietet eine Vielzahl an Optimierungsmöglichkeiten. Diese beginnen bei der richtigen Art des Einbindens von CSS-Dateien, setzen sich über die Wahl der schnellsten Selektoren fort und reichen bis zu einer echten CSS-gesteuerten Hardware-Beschleunigung. Diese und weitere Möglichkeiten werden in dem nun folgenden Kapitel vorgestellt.

CSS perfekt einbinden

Für das Einbinden von CSS-Dateien gibt es verschiedene Möglichkeiten. Da wäre zunächst die reine CSS-Syntax, bei der auf @import gesetzt wird.

<style type="text/css">
@import url("1.css");
@import url("2.css");
</style>

Innerhalb der Klammern gibt man die einzubindende Datei an. Die Syntax selbst ist in dieser Form in Ordnung. (Syntaktisch stimmt alles, aus Performance-Sicht hat diese Form allerdings Nachteile. Mehr dazu später.) Allerdings sollte man darauf achten, nicht wie im vorherigen Beispiel mehrere Dateien auf diese Weise einzubinden. Bündeln Sie die Dateien also am besten zu einer einzigen. (Ausführliche Informationen zu dieser Bündelung finden Sie in Kapitel 2.)

<style type="text/css">
@import url("gesamt.css");
</style>

Problematisch wird @import vor allem, wenn es im Zusammenspiel mit Skripten auftaucht.

<style type="text/css">
@import url("1.css");
@import url("2.css");
@import url("3.css");
@import url("4.css");
@import url("5.css");
@import url("6.css");
</style>
<script src='one.js' type='text/javascript' />


In diesem Fall werden zunächst einige CSS-Dateien eingebunden. Daran schließt sich eine JavaScript-Datei an. Sieht man sich diesen Dateibereich an, müsste man von folgender Ladereihenfolge ausgehen:

  • 1.css
  • 2.css
  • 3.css
  • 4.css
  • 5.css
  • 6.css
  • one.js

Das funktioniert in dieser Form allerdings nicht immer. So greift beispielsweise der Internet Explorer zuerst auf die JavaScript-Datei zu. Nun könnte man natürlich meinen, dass dies nicht problematisch sei. Tatsächlich wird es aber zum Problem, wenn im Skript auf CSS-Elemente zugegriffen werden soll. Denn diese sind dann tatsächlich noch nicht verfügbar, da eben noch nicht geladen.

Eine weitere typische Kombination ist link und @import.

...
<link rel="stylesheet" type="text/css" href="1.css" />
<style>
@import url ("2.css");
...
</style>


In diesem Beispiel soll zunächst die 1.css mittels link-Element geladen und anschließend mit @import die 2.css eingebunden werden. Das Problem dabei: Es wird zunächst die 1.css heruntergeladen, da link im Internet Explorer immer @import blockiert. Je nach Umfang der 1.css kann es somit natürlich dauern, bis die 2.css geladen wird. Auch diese Variante ist somit nicht ideal.

Eine weitere Möglichkeit stellt die Integration von @import in einer externen CSS-Datei dar. Auch hierzu wieder ein Beispiel.

<link rel="stylesheet" type="text/css" href="1.css" />
<link rel="stylesheet" type="text/css" href="2.css" />
<link rel="stylesheet" type="text/css" href="3.css" />


Es werden drei CSS-Dateien mittels link-Element eingebunden. Innerhalb der 3.css befindet sich eine @import-Regel. Mit dieser Regel wird zusätzlich die 4.css geladen.

@import url ("4.css");

Auch das sollte normalerweise verhindert werden, da im Internet Explorer wieder das Blockierproblem durch @import auftritt.

Was also ist die beste Variante zum Einbinden von CSS-Dateien? Auch wenn es wenig spektakulär erscheint: Nach wie vor ist das link-Element zu bevorzugen.

<link rel="stylesheet" type="text/css" href="1.css" />
<link rel="stylesheet" type="text/css" href="2.css" />
<link rel="stylesheet" type="text/css" href="3.css" />

Aufmacherbild: Turbocharger. Turbine for auto von Shutterstock / Urheberrecht: Palto

[ header = Vorsicht bei den Selektoren! ]

Vorsicht bei den Selektoren

Über Selektoren wird der Zugriff auf Elemente im DOM geregelt. Angenommen, man möchte als Erstes auf das Element mit der ID zugreifen, sähe der CSS-Selektor folgendermaßen aus:

#erstes{
…
}

Um das Optimierungspotenzial zu verstehen, muss man sich zunächst vor Augen führen, wie Browser mit Selektoren intern umgehen. Browser werten CSS-Selektoren immer von rechts nach links aus. Was einfach klingt und so auch von jedem Web-Entwickler genutzt wird, birgt ebenfalls ein gewisses Optimierungspotenzial. Denn tatsächlich können falsch definierte Selektoren die Performance der Seite herabsetzen.

Es stellt sich nun natürlich die Frage, welche Selektoren tatsächlich die schnellsten sind. Hier die Reihenfolge der effektivsten Selektoren:

  1. Element-Selektoren – z.B. h1
  2. Klassen-Selektoren – z.B. .erster
  3. ID-Selektoren – z.B. #erster

Üblicherweise verwendet man immer die schnellsten Selektoren. In vielen CSS-Dateien sind solche „einfachen“ Selektoren allerdings eher die Ausnahme. Stattdessen sind dort Definitionen folgender Art zu finden:

ul li a {color: #000;}

Warum sollte man so etwas nach Möglichkeit vermeiden? Der Browser ermittelt zunächst sämtliche a-Elemente des Dokuments. Anschließend wird die Trefferliste nach solchen a-Elementen untersucht, die ein li-Element besitzen. Abschließend wird nach den ul-Elementen der Trefferliste gesucht. Erst jetzt wird den Elementen eine schwarze Farbe zugewiesen. Sie können sich vorstellen, was passiert, wenn die Selektorenliste noch länger wird. Der Browser braucht dann auch dementsprechend länger, um die Elemente in der gewünschten Art darzustellen. Man sollte daher Selektoren immer so einfach wie möglich halten. Vor allem gilt es unnötige Selektoren zu vermeiden. Dazu einige Beispiele.

ul#top


Hierüber wird eine ungeordnete Liste mit der ID top angesprochen.

<ul id="top">
...
</ul>

So etwas findet man auf sehr vielen Seiten. Dennoch ist das natürlich überflüssig, schließlich ist eine ID dateiweit immer eindeutig. Normalerweise genügt daher Folgendes:

#top


Bei Klassen hingegen ist der Fall nicht ganz eindeutig. So könnte es beispielsweise die Klasse blue geben, über die eine blaue Farbe definiert wird. Und diese Klasse könnte dann tatsächlich an unterschiedlichen Stellen verwendet werden.

ul.blue


Ein entscheidendes Prinzip von CSS wird gerne vergessen: die Kaskadierung, also die Vererbung von Eigenschaften. Das ist auch der Grund, warum auf vielen Webseiten sehr lange und überflüssige CSS-Definitionen zu finden sind.

#news, #top, li.first, a.home, a{
   color:#eee;
}

Hier soll den folgenden Elementen die Farbe Grau zugewiesen werden:

  • #news
  • #top
  • li.first
  • a.home
  • a

Im gezeigten Beispiel ist der Bereich mit der ID #news allerdings das Elternelement. Und dieses Elternelement vererbt die Eigenschaften an alle Kindelemente.

Profitipp               

An dieser Stelle kann es keine Einführung in das Kaskadenprinzip geben, da dies den Rahmen sprengen würde. Eine gute Anleitung zu diesem Thema finden Sie aber beispielsweise auf der Seite http://jendryschik.de/wsdev/einfuehrung/css/kaskade. Tatsächlich sind bei der Definition von Selektoren nämlich noch einige andere Dinge wie beispielsweise !important usw. zu berücksichtigen. Entscheidend für eine gute Performance ist lediglich, die Selektoren so kurz wie möglich zu halten.

Somit lässt sich durch die folgende Definition die Farbe Grau auf alle Kindelemente von #news vererben.

#news{
   color:#eee;
}

Soll eines der Kindelemente nicht in Grau angezeigt werden, definiert man für dieses Element dann die gewünschte Farbe.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -