Da ich gestern den Artikel “Warum Webseiten langsam sind und warum die Geschwindigkeit wichtig ist” gepostet hatte, kommt heute ein kleines Tutorial.
Die Verwendung von CSS wirkt sich auf die Schnelligkeit einer Internetseite aus. Worauf geachtet werden sollte, wird dir in diesem Tutorial erklärt.
Die Anzahl der CSS-Dateien auf maximal 3 verringern
Werden alle CSS-Deklarationen in einer Datei zusammengefasst, kann die jeweilige Internetseite sehr schnell laden. Das geht jedoch auf Kosten des sogenannten Cachings. Unter Caching versteht man das Speichern von Dateien auf der Festplatte, die sich nicht verändern und daher nicht erneut angefordert werden müssen. Je nach Seitengröße sollte die Zahl der CSS-Dateien variieren:
Datei 1: Die allgemeingültigen Styles
CSS-Dateien sollten allgemeingültige Definitionen beinhalten, die auch für alle Unterseiten gelten. Das können z.B. generelle Vorder- und Hintergrundfarben oder Schriftarten sein.
Datei 2: Die Styles einer bestimmten Kategorie
Die nächste Datei sollte für eine spezielle Kategorie von Internetseiten gelten. Möglicherweise haben Bilder-Galerien ein anderes Layout als einfache Artikel. Mit zwei verschiedenartigen Kategorien können die Unterschiede gut abgedeckt werden.
Datei 3: Die Styles einer speziellen Unterseite
Zuletzt bleibt noch eine Datei für eine spezielle Unterseite übrig. So müssen Deklarationen, die nur auf wenigen Unterseiten der Webseite gelten, nicht bei allen anderen Seiten mitgeladen werden. Bei kleinen Internetseiten gibt es möglicherweise nur eine Kategorie von Unterseiten. Eine zweite Datei entfällt somit komplett. Bei Internetprojekten, die nur aus einer einzigen Seite bestehen, reicht auch eine einzige Datei aus. Nach Umfang und Größe der Internetseite sollte die Anzahl der Dateien ausgewählt werden, dabei sollten jedoch nicht mehr als 3 Dateien verwendet werden.
Selektoren vereinfachen und CSS effizienter schreiben
Die Verarbeitung der Selektoren muss zu aller erst verstanden werden, um CSS effizienter schreiben zu können.
Selektor-Verarbeitung
Damit verstanden wird, wie Selektoren vereinfacht werden können, muss man zuerst wissen, wie ein Browser CSS verarbeitet. Vor allem in unseren westlichen Kulturkreisen ist man es gewohnt, von links nach rechts zu lesen. Deshalb erwartet man automatisch, dass ein Browser #meine_id a auch von links nach rechts verarbeitet.
Das Verfahren würde dabei für Menschen ungefähr folgendermaßen aussehen: Suche das Element mit der ID meine_id und danach alle Elemente, die ein Kind-Element davon haben.
Browser funktionieren leider etwas anders. Sie lesen die Selektoren in umgekehrter Richtung, also von rechts nach links. Somit sucht der Browser zu erst alle Elemente und schaut erst danach, ob es ein dazugehöriges Eltern-Element mit der ID meine_id gibt.
Die Schlüsselelemente optimieren
Das Schlüsselelement, das optimiert werden soll, ist also der Selektor-Teil, der ganz rechts steht. Je ungenauer er ist, desto mehr Zeit wird benötigt. Im ungünstigsten Fall ist es der Stern-Selektor. Dieser passt auf alle Elemente. Selektoren wie #meine_id * sollten deshalb vermieden werden.
Problematisch, aber schon etwas besser sind Tag-Selektoren. Wenn nur die reine Verarbeitungsgeschwindigkeit der CSS-Selektoren betrachtet wird, wäre es besser, alle Tag-Selektoren durch Klassen zu ersetzen. Dadurch wird jedoch die Datei-Größe erhöht, was wiederum dazu führt, dass die Seiten schlecht gepflegt werden können. Viele Google-Seiten benutzen allerdings genau dieses Verfahren, um auch das letzte Quäntchen an Geschwindigkeit zu erhalten.
In der Praxis wird die ausdrückliche Vermeidung von Tag-Selektoren oft übertrieben. Der Stern-Selektor sollte dagegen nicht als Schlüsselelement in schwierigen Selektor-Ausdrücken verwendet werden. Um die Innen- und Außenabstände auf 0 zu setzen, bleibt dir aber eigentlich keine andere Wahl als den Stern-Selektor zu verwenden. Das ist aber nicht so schlimm, da der Browser nicht für jedes Element prüfen muss, ob es das passende Eltern-Element sein könnte.
Die Selektor-Ausdrücke vereinfachen
Elemente, die mit einer Klasse oder ID ausgezeichnet sind, kann der Browser direkt identifiziert. Der folgende Selektor ist also unnötig über-spezifiziert:
Das entsprechende Element hätte man auch mit #meine_id erreichen können. Manchmal stößt man dabei allerdings auf Spezifitätsprobleme. Es bleibt einem dann meistens nichts anderes übrig, als die Selektoren weiter zu differenzieren. Den Geschwindigkeitsunterschied zwischen einer Klasse und einer ID kann man übrigens fast nicht messen. Aus Performance-Sicht macht es deshalb keinen Sinn, alle Klassen durch IDs und umgekehrt zu ersetzen.
CSS komprimieren
Dem Browser ist es völlig egal, ob eine CSS-Datei Lesezeichen oder Kommentare enthält. Für Mensch ist eine Variante mit Lesezeichen und Kommentaren aber wesentlich leichter lesbar. Leider nehmen sie natürlich einen bestimmten Platz ein. Das Entfernen von nicht benötigten Zeichen bei CSS-Dateien, die an den Browser geliefert werden, kann Dateien um mehrere Kilobyte verkleinern.
Online-Dienste
Ein geeigneter Online-Dienst ist beispielsweise CSS Compressor http://www.csscompressor.com. Er optimiert jedoch weiter und schreibt z.B. 0.5em zu .5em um. Außerdem komprimiert er Farbangaben, aus #112233 wird anschließend #123.
Bibliotheken
Bibliotheken, sind deutlich komfortabler zu verwenden. Sie erledigen die Aufgaben automatisch. Eine bekannte Bibliothek ist zum Beispiel der CSS-JS-Booster von Christian Schäfer. Viele kennen ihn aus dem Podcast Working Draft.
Wie man seine PHP-Bibliothek für das eigene Internetprojekt nutzen kann, zeigt eine Anleitung auf Github https://github.com/Schepp/CSS-JS-Booster.
Noch mal alles Wichtige auf einen Blick:
- Verwende je nach Größe deiner Internetseite bis zu 3 CSS-Dateien.
- Vermeide den Stern-Selektor als Schlüsselelement in komplizierten Ausdrücken.
- Verwende eher spezifische und vermeide überspezifizierte Selektoren.
- Komprimiere deine CSS-Dateien.
