{"id":1957,"date":"2013-11-15T01:01:56","date_gmt":"2013-11-15T00:01:56","guid":{"rendered":"https:\/\/wolkenhart.com\/webdesignblog\/?p=1957"},"modified":"2014-06-28T03:51:12","modified_gmt":"2014-06-28T01:51:12","slug":"schnellere-internetseiten-mit-verbessertem-css-code","status":"publish","type":"post","link":"https:\/\/wolkenhart.com\/webdesignblog\/schnellere-internetseiten-mit-verbessertem-css-code","title":{"rendered":"Schnellere Internetseiten mit verbessertem CSS-Code"},"content":{"rendered":"

Da ich gestern den Artikel „Warum Webseiten langsam sind und warum die Geschwindigkeit wichtig ist“<\/a> gepostet hatte, kommt heute ein kleines Tutorial.<\/p>\n

Die Verwendung von CSS wirkt sich auf die Schnelligkeit einer Internetseite aus.<\/strong> Worauf geachtet werden sollte, wird dir in diesem Tutorial erkl\u00e4rt.<\/p>\n

\"CSS-Code\"<\/p>\n

Die Anzahl der CSS-Dateien auf maximal 3 verringern<\/h2>\n

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\u00e4ndern und daher nicht erneut angefordert werden m\u00fcssen. Je nach Seitengr\u00f6\u00dfe sollte die Zahl der CSS-Dateien variieren:<\/p>\n

Datei 1: Die allgemeing\u00fcltigen Styles<\/strong><\/p>\n

CSS-Dateien sollten allgemeing\u00fcltige Definitionen beinhalten, die auch f\u00fcr alle Unterseiten gelten. Das k\u00f6nnen z.B. generelle Vorder- und Hintergrundfarben oder Schriftarten sein.<\/p>\n

Datei 2: Die Styles einer bestimmten Kategorie<\/strong><\/p>\n

Die n\u00e4chste Datei sollte f\u00fcr eine spezielle Kategorie von Internetseiten gelten. M\u00f6glicherweise haben Bilder-Galerien ein anderes Layout als einfache Artikel. Mit zwei verschiedenartigen Kategorien k\u00f6nnen die Unterschiede gut abgedeckt werden.<\/p>\n

Datei 3: Die Styles einer speziellen Unterseite<\/strong><\/p>\n

Zuletzt bleibt noch eine Datei f\u00fcr eine spezielle Unterseite \u00fcbrig. So m\u00fcssen Deklarationen, die nur auf wenigen Unterseiten der Webseite gelten, nicht bei allen anderen Seiten mitgeladen werden. Bei kleinen Internetseiten gibt es m\u00f6glicherweise nur eine Kategorie von Unterseiten. Eine zweite Datei entf\u00e4llt somit komplett. Bei Internetprojekten, die nur aus einer einzigen Seite bestehen, reicht auch eine einzige Datei aus. Nach Umfang und Gr\u00f6\u00dfe der Internetseite sollte die Anzahl der Dateien ausgew\u00e4hlt werden, dabei sollten jedoch nicht mehr als 3 Dateien verwendet werden.<\/p>\n

Selektoren vereinfachen und CSS effizienter schreiben<\/strong><\/p>\n

Die Verarbeitung der Selektoren muss zu aller erst verstanden werden, um CSS effizienter schreiben zu k\u00f6nnen.<\/p>\n

Selektor-Verarbeitung<\/h3>\n

Damit verstanden wird, wie Selektoren vereinfacht werden k\u00f6nnen, 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.<\/p>\n

Das Verfahren w\u00fcrde dabei f\u00fcr Menschen ungef\u00e4hr folgenderma\u00dfen aussehen: Suche das Element mit der ID meine_id und danach alle Elemente, die ein Kind-Element davon haben.<\/p>\n

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\u00f6riges Eltern-Element mit der ID meine_id gibt.<\/p>\n

Die Schl\u00fcsselelemente optimieren<\/h4>\n

Das Schl\u00fcsselelement, das optimiert werden soll, ist also der Selektor-Teil, der ganz rechts steht. Je ungenauer er ist, desto mehr Zeit wird ben\u00f6tigt. Im ung\u00fcnstigsten Fall ist es der Stern-Selektor. Dieser passt auf alle Elemente. Selektoren wie #meine_id * sollten deshalb vermieden werden.<\/p>\n

Problematisch, aber schon etwas besser sind Tag-Selektoren. Wenn nur die reine Verarbeitungsgeschwindigkeit der CSS-Selektoren betrachtet wird, w\u00e4re es besser, alle Tag-Selektoren durch Klassen zu ersetzen. Dadurch wird jedoch die Datei-Gr\u00f6\u00dfe erh\u00f6ht, was wiederum dazu f\u00fchrt, dass die Seiten schlecht gepflegt werden k\u00f6nnen. Viele Google-Seiten benutzen allerdings genau dieses Verfahren, um auch das letzte Qu\u00e4ntchen an Geschwindigkeit zu erhalten.<\/p>\n

In der Praxis wird die ausdr\u00fcckliche Vermeidung von Tag-Selektoren oft \u00fcbertrieben. Der Stern-Selektor sollte dagegen nicht als Schl\u00fcsselelement in schwierigen Selektor-Ausdr\u00fccken verwendet werden. Um die Innen- und Au\u00dfenabst\u00e4nde 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\u00fcr jedes Element pr\u00fcfen muss, ob es das passende Eltern-Element sein k\u00f6nnte.<\/p>\n

Die Selektor-Ausdr\u00fccke vereinfachen<\/h5>\n

Elemente, die mit einer Klasse oder ID ausgezeichnet sind, kann der Browser direkt identifiziert. Der folgende Selektor ist also unn\u00f6tig \u00fcber-spezifiziert:<\/p>\n

\"Selektorausdr\u00fccke\"<\/p>\n

Das entsprechende Element h\u00e4tte man auch mit #meine_id erreichen k\u00f6nnen. Manchmal st\u00f6\u00dft man dabei allerdings auf Spezifit\u00e4tsprobleme. Es bleibt einem dann meistens nichts anderes \u00fcbrig, als die Selektoren weiter zu differenzieren. Den Geschwindigkeitsunterschied zwischen einer Klasse und einer ID kann man \u00fcbrigens fast nicht messen. Aus Performance-Sicht macht es deshalb keinen Sinn, alle Klassen durch IDs und umgekehrt zu ersetzen.<\/p>\n

CSS komprimieren<\/h6>\n

Dem Browser ist es v\u00f6llig egal, ob eine CSS-Datei Lesezeichen oder Kommentare enth\u00e4lt. F\u00fcr Mensch ist eine Variante mit Lesezeichen und Kommentaren aber wesentlich leichter lesbar. Leider nehmen sie nat\u00fcrlich einen bestimmten Platz ein. Das Entfernen von nicht ben\u00f6tigten Zeichen bei CSS-Dateien, die an den Browser geliefert werden, kann Dateien um mehrere Kilobyte verkleinern.<\/p>\n

Online-Dienste<\/h6>\n

Ein geeigneter Online-Dienst ist beispielsweise CSS Compressor http:\/\/www.csscompressor.com<\/a>. Er optimiert jedoch weiter und schreibt z.B. 0.5em zu .5em um. Au\u00dferdem komprimiert er Farbangaben, aus #112233 wird anschlie\u00dfend #123.<\/p>\n

Bibliotheken<\/h6>\n

Bibliotheken, sind deutlich komfortabler zu verwenden. Sie erledigen die Aufgaben automatisch. Eine bekannte Bibliothek ist zum Beispiel der CSS-JS-Booster von Christian Sch\u00e4fer. Viele kennen ihn aus dem Podcast Working Draft.<\/p>\n

Wie man seine PHP-Bibliothek f\u00fcr das eigene Internetprojekt nutzen kann, zeigt eine Anleitung auf Github https:\/\/github.com\/Schepp\/CSS-JS-Booster<\/a>.<\/p>\n

Noch mal alles Wichtige auf einen Blick:<\/strong><\/p>\n