Hol Dir jetzt die neue kino.de App     Deutschland geht ins kino.de

yellowTAB Tipp: CSS Dateien optimieren

Bernd Korz

Kaum ist eine Webseite programmiert soll sie auch online ihren Dienst tun. Wer seine ersten Projekte dabei hinter sich hat wird auch schon davon gehört haben, dass man auch “banalen” HTML/CSS Code optimieren kann. Die Optimierungen liegen zum einen in den unnötigen Leerzeichen und neuen Zeilen, aber auch in unnötigen Definitionen, die man aus einer CSS Datei herauslöschen kann.

Ein Beispiel: Wir haben in der #sub_containter Klasse eine Definition “color: black;”. Die übergeordnete Klasse hat diese Definition jedoch auch schon, wir haben das aber durch all den Code nicht mehr  gesehen. Aber auch die <div>-Verschachtelungen können es unübersichtlich machen. Nun können wir natürlich per Hand all diese doppelten Definitionen heraussuchen und löschen, was sich aber teilweise als zum einen sehr mühselig und zum anderen Fehleranfällig erweisen kann.

Hierfür gibt es Onlinewerkzeuge die keinerlei Installation bedürfen oder abhängig von einem Betriebssystem sind. Ein solches Werkzeug ist der CSSOptimizer. Der CSSOptimzer bietet zwei Optionen an, zum Einen kann man eine vorhandene CSS Datei hochladen und zum Anderen kann man seinen Code auch in ein dafür vorgesehen Textbox einfügen. Anschließend gibt man an, ob man die Zeilenumbrüche behalten möchte oder nicht.

Zu letzterem einen Tipp, die CSS Datei (meist style.css) kopieren um ein lesbares Original zu behalten, und anschließend die Optimierung nebst dem Entfernen der Zeilenumbrüche durchführen.

Die Datei wird nun zwischen 30% und 50% kleiner als vorher was schnellere Ladezeiten der Webseite zur Folge haben sollte.

Neue Artikel von GIGA GAMES

GIGA Marktplatz