Webseitenoptimierung – Code optimieren
Im Regelfall bestehen Webseiten aus HTML-Quellcode und CSS (Cascading StyleSheets), oft wird auch Java-Script eingesetzt. Aus Performancegründen empfiehlt es sich CSS und Java-Script in externe Dateien auszulagern, da diese im Browsercache abgelegt werden können und dann jeweils nur einmal für eine Website geladen werden müssen, egal wie viel Unterseiten aufgerufen werden. Dies hat darüber hinaus noch den Vorteil, Änderungen müssen nur in den externen Dateien durchgeführt werden und nicht auf jeder betroffenen Webseite. Da für jede nachzuladende Datei ein http-Request durchgeführt werden muss, empfiehlt es sich, nicht zu viele kleine CSS- oder Java-Script-Dateien einzubinden, denn jeder Request kostet wiederum Zeit, meist mehr als das eigentliche Laden der betreffenden Dateien. Auf das Thema http-Request wird in einem späteren Beitrag noch einmal genau eingegangen.
Tabellen waren bis vor ein paar Jahren eine beliebte Möglichkeit, Elemente und Inhalte auf Webseiten passgenau zu positionieren. Der Quelltest von mehrfach verschachtelten Tabellen wird allerdings nicht nur schnell unübersichtlich sondern bläht sich auch nicht ganz unerheblich auf. Grundsätzlich sollten die Formateigenschaften einzelner HTML-Elemente nur noch über CSS festgelegt werden. HTML-Elemente wie z.B. das Font-Tag sind als deprecated eingestuft, das heißt, sie sollen in Zukunft aus dem HTML-Standard entfernt werden. Richtig eingesetzt, kann man durch CSS eine ganze Menge Quelltext sparen. Besonders ältere WYSIWYG-Editoren sind wahre Quelltextsünder und einige von ihnen sind in der Lage, den Quelltext einer Webseite um ein vielfaches völlig unnötig aufzublähen. Aber auch neuere Editoren sind meist nicht in der Lage, einen optimierten Quellcode zu erzeugen.
Problematisch sind hierbei nicht unbedingt unnötige Leer- und Einrückzeichen oder Kommentare, die meist für eine Verbesserung der Lesbarkeit im Quelltexte eingesetzt werden, denn diese können sehr leicht mit entsprechenden Tools automatisch entfernt werden, vielmehr ist es ein unnötig komplizierter Aufbau der CSS-Anweisung. So lässt sich z.B. das Aussehen von Links in einem als „menu“ definierten Bereich ohne zusätzliche CSS-Anweisungen im Quelltext der Webseite definieren. Voraussetzung ist lediglich die Definition des Bereichs mit z.B.:
<div id="menu">
<a href="/">Startseite</a>
</div>
In einer externen CSS-Datei lässt sich nun sehr Einfach der Bereich selber definieren und kann Angaben über Größe, Position, Hintergrund etc. enthalten :
#menu {
width: 200px;
height:600px;
margin:27px 0 0 17px;
float: left;
}
Für die Darstellung der Links benötigt man jetzt nur noch weitere CSS-Anweisungen, welche durch „#menu a“ angesprochen werden und sich auf alle a-Elemente im Bereich auswirken :
#menu a {
font: 12px arial, verdana;
margin:0;
padding:8px 0 5px 0;
text-decoration:none;
}
Auch bei den CSS-Anweisungen selber lässt sich durch die Verwendung von Shorthand-Properties noch Quelltext einsparen. Hierbei werden Eigenschaften zusammengefasst, die zu einer Kategorie gehören (font, padding, margin, border usw.).
Beispiel:
#menu {
font-style:italic;
font-variant: small-caps;
font-weight:bold;
font-size:12px;
line-height:120%;
font-family: arial;
}
lässt sich so zusammenfassen:
#menu {
font: italic small-caps bold 12px/120% arial;
}
Darüber hinaus ist es clever, die Vererbung von Elternelementen, also in der Hierarchie höher angesiedelten Elementen, zu nutzen und dort Definitionen abzulegen, die sich auf alle nachfolgenden Elemente auswirken (Stichwort Kaskadierung) . So kann z.B. die font-Definition für das body-Tag definiert werden, welche sich dann auch auf den Menü-Bereich hier im Beispiel auswirkt. Sollten in einem Bereich geänderte Anweisungen verwendet werden, so lassen sich die durch Vererbung definierten Anweisungen in den einzelnen Elementen ganz einfach wieder überschreiben.
Wird z.B. für die gesamte Webseite die Verdana Schriftart in 14 px definiert, so kann im Menü trotzdem Arial mit 12px genutzt werden, ohne dass im Quelltest der Seite zusätzliche Angaben benötigt werden, außer der schon erwähnten Bereichsdefinition.
body {
font:14px verdana;
}
#menu {
font:12px arial;
}
Nicht immer ist es sinnvoll, auf Kommentare oder eingerückte Bereich zu verzichten. Wer diese allerdings nicht benötigt, kann sie automatisch von entsprechenden Tools entfernen lassen. In PageSpeed ist hierzu eine entsprechende Funktion integriert, die auch für Java-Script verwendet werden kann. Außerdem gibt PageSpeed Hinweise auf in der CSS-Datei verwendete aber auf der aktuell geprüften Webseite nicht benötigte CSS-Anweisungen. Bevor man allerdings Anweisungen löscht, sollte sichergestellt werden, dass diese auch auf den anderen Webseiten der Präsenz nicht benötigt werden. Zwar ließen sich diese in eine zweite CSS-Datei packen, welche dann nur auf den benötigten Webseiten eingebunden werden müsste, allerdings würde dies einen zusätzlichen http-Request zur Folge haben, der die eingesparte Zeit um ein vielfaches übersteigen kann. Dieser Schritt sollte also genau überlegt werden.
Noch etwas mehr kann man mit CSSTidy herausholen. Neben dem Entfernen von Kommentaren und unnötigen Leerzeichen bietet CSSTidy die Möglichkeit, Farbangaben zu kürzen oder auch z.B. Selektoren zusammenzufassen oder Shorthands zu generieren, soweit dies möglich ist. CSSTidy gibt es als Komandozeilen-Tool zum Runterladen oder auch als Onlineanwendung. Tipp: Wer seinen CSS-Code gerne optimiert haben möchte aber die Lesbarkeit beibehalten will, sollte sich einfach die Originalversion der CSS-Datei speichern. So können auch spätere Änderungen leicht vorgenommen werden.
Tags: css, css-datei, optimieren, optimierung