Webstandard & Webdesign - CSS, HTML

 

CSS Code organisieren und Ladegeschwindigkeit optimieren

CSS Code organisieren - Wer Webseiten wie Blogs oder auch Online-Shops erstellt, egal ob im Frontend- oder Backend-Bereich wird unabhängig von den vorherrschenden Standards und Vorgaben durch die Aufgabenstellung seinen Stil haben, Code zu schreiben und zu bearbeiten. Ein ausschlaggebender Grund hierfür ist die Übersicht des Codes und selbst die empfindet nicht jeder Entwickler gleichermaßen. Neben der eigentlichen Strukturierung von CSS-Code steht hierbei oftmals die Frage der Darstellung der einzelnen CSS-Regeln im Vordergrund der Diskussion. Genauer gesagt, die beiden Varianten die hierbei Anwendung finden können - Einzeilig- & Mehrzeiligkeit.

Dank CSS-Komprimierung zu einer schnelleren Ladegeschwindigkeit von Webseiten

Übersichtlicher und besser wartbar ist der mehrzeilig geschriebene CSS-Code. Je nach steigender Dateigröße ist allerdings die mögliche Einsparung aufgrund einer Optimierung der CSS-Datei bei einer solchen Schreibweise bspw. durch eine Komprimierung durch ein Online-Tool entsprechend hoch. Diese kann dann unter Umständen, auch zu schnelleren Ladezeiten führen, einen "Nebeneffekt" den jeder Webseitenbesitzer sicherlich gerne mitnimmt. Und auch die Suchmaschinen haben garantiert nichts gegen diesbezüglich optimierte Webseiten.

Ein Argument welches bei der einzeiligen Schreibweise von CSS-Code genannt wird, ist die schlechte Übersicht und Lesbarkeit der CSS-Eigenschaften und ihrer Werte. Allerdings frage ich mich, warum dieses Argument in entsprechenden Diskussionen oder Kommentaren in Blogs zu diesem Thema überhaupt erst fällt? Denn ein komprimiert vorliegender CSS-Code sollte nicht Grundlage für Weiterentwicklungen sein, es sei denn man ändert lediglich den ein oder anderen Wert, den man im Code trotz Komprimierung auch ohne Probleme ausfindig machen kann.

Abb.1 - CSS Code organisieren - Mehrzeilig (oben) und Einzeilig (unten)

Komprimierter CSS-Code, wie im unteren Teil der Abbildung 1, ist für die Webseitenbesucher die die entsprechenden Dateien beim Laden der Webanwendung aufrufen und somit für die Darstellung des hoffentlich fehlerfreien Designs und nicht zum Arbeiten gedacht! Schon gar nicht, wenn mehr als eine Person an den entsprechenden Dateien arbeiten sollte. Das Argument der schlechten Übersicht und Wartbarkeit von komprimierten Dateien, kann man somit getrost ad acta legen.

Die empfohlene Herangehensweise

Auch wenn, wie Vladimir "Perun" Simovic in einem aktuellen Beitrag schreibt, unterschiedliche Vorgehensweisen auf einer Reihe verschiedener Entwicklungsumgebungen existieren, ist es wesentlich komfortabler für diejenigen die mit den CSS-Dateien arbeiten müssen, an mehrzeiligen CSS-Code ( wie im oberen Teil der Abbildung 1) Änderungen oder Neuerungen vornehmen zu können als an einzeiligen CSS-Code. Die so den Anforderungen entsprechend umgesetzten Dateien, können dann getrost je nach Komprimierungsverfahren optimiert werden und diese Dateien dann auf die entsprechenden Server geladen werden.

Achtung! Traue niemals einem (Online-)Komprimierungstool oder einem Script zur Komprimierung blind. Das heißt, erst die Anwendung mit der komprimierten Version testen, bevor es live geht! Somit dürfte auch die Frage ob Kommentare bspw. zu CSS-Hacks in CSS-Dateien vorhanden sein sollten, geklärt sein. In nicht komprimierten CSS-Dateien die bspw. auf einer Entwicklungsumgebung liegen ( bspw. zu noch ausstehenden Weiterentwicklungen ), können bzw. sollten sie sogar im Sinne einer effektiven Zusammenarbeit mit Kollegen sogar enthalten sein. In den CSS-Dateien mit Kommentaren die sich hingegen auf einer "Live-Umgebung" befinden, machen keinen Sinn. So manch unachtsamer Entwickler hat hiermit bereits unbeabsichtigterweise für den ein oder anderen Schmunzler gesorgt. Ihr glaubt nicht, was teilweise fü Kommentare in CSS-Dateien stehen ;o)

Top-10 der Lesercharts für deutschsprachige Blogs

Soweit die Theorie, aber wie sieht es in der Praxis aus? Genauer gesagt, wie gehen bspw. die Top-10 der dt. Blogger mit diesem Thema um. OK, die Schreibweisen innerhalb der CSS-Dateien interessieren die Betreiber garantiert wenig, aber die bereits angesprochene und daraus mögliche resultierende Optimierung der Ladezeiten, dürfte vor allem aufgrund des hohen Traffic-Aufkommens bei diesen Seiten nicht ganz uninteressant sein. Auch wenn die einzelnen Blogs aufgrund ihrer Zielgruppe und damit der thematischen Ausrichtung unterschiedliche Ansprüche an das Design der Webseiten bzw. Blogs haben, wurden in einem kleinen Vergleich die Anzahl der verwendeten CSS-Dateien, deren gesamte Dateigröße und die Schreibweisen der CSS-Eigenschaften ( einzeilig und oder mehrzeilig ) mittels der CSS-Extension YSlow etwas genauer unter die Lupe genommen.

Abb.2 - CSS Code Analyse mit YSlow-Firefox Extension

Aus den ermittelten Daten wird dann am Ende geschlussfolgert, ob Einsparpotential bei der Dateigröße der CSS-Dateien vorhanden ist oder nicht. Und soviel vorweg, bei einzelnen Dateien dieser Blogs beträgt das Einsparpotential bis zu 30% und mehr.

∗ Keine Verwendung von CSS Shorthand Properties innerhalb der CSS-Dateien

∗∗ Der gesamte CSS-Code wird in einer Zeile zusammengefasst! Wenn man einen Gewinner küren müsste, wäre dies der GoogleWatchBlog

∗∗∗ Der bis zu Hälfte einzeilige CSS-Anweisungen fü die Eigenschaften verfasste Code, wird ab der Hälfte mehrzeilig. Hier ist ein Update des CSS-Codes erkennbar, ebenso wie die im Anschluss daran fehlende Komprimierung dieses.

Fazit zur Organisation bzw. zur Schreibweise von CSS Code

Mehrzeiligkeit ist für diejenigen die den CSS-Code bearbeiten und der komprimierte einzeilige CSS-Code für die Webseitenbesucher. Wie ist Eure Meinung zu dieser immer noch oder wieder aktuell werdenden Diskussion?

Ähnliche Artikel zu diesem Thema:

• CSS Shorthand Properties
• Die Organisation und Strukturierung von CSS Dateien
• Conditional Comments und CSS für den Internet Explorer
• CSS Optimizer im Vergleich