Quellcode- Optimierung

CSS-Akademie

Von einem verbesserten CSS-Code profitieren Sie doppelt: Sie verkürzen die Ladezeiten Ihrer Seiten und erleichtern die weitere Pflege der gesamten Website.

Webdsign: CSS-Akademie

© Archiv

Webdsign: CSS-Akademie

Quellcode- Optimierung

Von einem verbesserten CSS-Code profitieren Sie doppelt: Sie verkürzen die Ladezeiten Ihrer Seiten und erleichtern die weitere Pflege der gesamten Website.

CSS-Akademie

© Archiv

Per Mausklick eine neue Hintergrundfarbe einfügen, bequem den Rahmen einer Infobox ändern oder auf die Schnelle eine andere Schrift einstellen: Moderne Webeditoren verleiten dazu, sich vorrangig auf die Optik der Seiten zu konzentrieren. Schließlich bietet CSS viel kreativen Spielraum. Es wäre jedoch fatal, im Gestaltungsrausch die Struktur des CSS-Codes außer Acht zu lassen. Optimieren Sie die Stylesheets schon bei der Eingabe des ersten Befehls. Der Quellcode wird so deutlich schlanker, übersichtlicher und damit leichter zu pflegen.

Nehmen Sie sich aber auch die Zeit für einen einheitlichen Aufbau Ihrer CSS-Dateien mit ergänzenden Kommentaren. So verstehen Sie auch nach Wochen noch, welches Format welche Aufgabe im Projekt hat. Wir zeigen Ihnen, was Sie bei der Struktur Ihrer Stylesheets beachten sollten und wie Sie der kostenlose Optimierer CSSTidy auf der Heft-DVD bei der Optimierung unterstützt.

Styleguide erarbeiten

Viele Webentwickler beginnen bei neuen Projekten direkt mit dem Aufbau der Webseiten. Sie investieren kaum Zeit in die Planung, sondern entscheiden sich jeweils durch Ausprobieren für die beste Layoutvariante. Zwar sehen die Seiten im Ergebnis durchaus ansprechend aus, jedoch herrscht unter der Haube häufig Chaos.

Investieren Sie genügend Zeit in die Planung des Layouts und setzen Sie dieses anschließend ruckzuck in die gewünschten Formatbefehle um. Beginnen Sie mit dem Sammeln sämtlicher Inhalte für die geplante Site. Überlegen Sie, nach welchen Rubriken sich die Themen sortieren lassen, und legen Sie die Menüstruktur entsprechend an. Zeichnen Sie auf Basis dieser Vorgaben mit dem Grafikprogramm oder auf dem Papier eine Skizze des neuen Layouts. Bei einem modernen CSSDesign erstellen Sie die Bereiche für die Menüs, den Text und eventuelle Infoboxen mit <div>-Containern. Teilen Sie den Layoutentwurf in solche Container-Bereiche auf.

Schreiben Sie anschließend die Bausteine auf, aus denen sich diese Container zusammensetzen sollen. Benötigen Sie Überschriften, Teaser-Texte oder unterschiedlich gestaltete Listen? Wie möchten Sie die Bilder in den Fließtext einbinden? Im Ergebnis sollten sich die Seiten ausschließlich aus den notierten Bausteinen zusammensetzen. Ordnen Sie in einem so genannten Styleguide nun jedem Baustein Formate wie Farbe, Abstände, Linienstärke und Schriftart zu. Mit dieser gründlichen Vorarbeit erstellen Sie die CSSStile für Ihr Webprojekt im Handumdrehen.

CSS-Akademie

© Archiv

Validator des W3C: Prüfen Sie Ihren CSS-Code immer zuerst gegen die offiziellen Spezifikationen.

CSS-Formate ordnen

Arbeiten Sie den Styleguide nun von oben nach unten ab und ordnen Sie die CSSBefehle systematisch: Fassen Sie sämtliche Formate zusammen, die das Grundlayout der Seite vorgeben. Hierzu zählen beispielsweise die Randeinstellungen des <body>-Bereichs und die Grundschrift. Leiten Sie diesen Abschnitt mit der folgenden Kommentarzeile ein: /* -- Globale Formate -- */

Fassen Sie in einem zweiten Bereich die Formate zur Positionierung der Layoutcontainer zusammen. Eine mögliche Überschrift wäre: /* -- Anordnung der Container -- */

Die Seiten Ihres Webangebots könnten beispielsweise in die folgenden Abschnitte aufgeteilt sein:

<div id="logo">...</div><div id="hauptnavi">...</div><div id="text">...</div>

Mit dem id-Parameter geben Sie jedem Container einen eindeutigen Namen. Beziehen Sie sich in der CSS-Datei mit den folgenden Überschriften auf diese Namen: /* -- Container Logobereich -- */ /* -- Container Hauptnavigation -- */ /* -- Container Textbereich -- */

Notieren Sie jeweils darunter die entsprechenden Formate.

Module erstellen

Grundsätzlich lassen sich CSS-Formate in den Kopf jeder Seite eines Angebotes eingeben. In diesem Fall definieren Sie die Stile zwischen <style type="text/css"> und </style>. Wenn Sie einen Webeditor mit Template-Funktion nutzen, wäre das Einfügen auf allen Seiten noch nicht einmal mit viel Aufwand verbunden. Diese Methode hat jedoch einen entscheidenden Nachteil: Eine lange Liste mit identischen Befehlen würde mit jeder neuen Webseite über die Leitung transportiert. Längere Ladezeiten wären die Folge. Vermeiden Sie diesen unnötigen Overhead und lagern Sie sämtliche Formate in eine externe CSS-Datei aus. Diese Datei binden Sie mit dem Befehl

<link rel="stylesheet" type="text/css"
?href="layout.css" />

in Ihre Seiten ein. Oder verwenden Sie die neuere CSS-Regel @import nach dem folgenden Muster:

<style type="text/css">
@import url('layout.css');</style>

Bei kleineren, gestalterisch nicht so aufwändigen Projekten genügt eine einzelne CSS-Datei für sämtliche Formate. Erstellen Sie jedoch eine größere Website und wollen Sie Ihre Formate eventuell sogar projektübergreifend nutzen, dann arbeiten Sie modular: Fassen Sie zusammengehörige Definitionen in separaten Dateien zusammen und kombinieren Sie diese je nach Bedarf. Legen Sie beispielsweise eine Datei mit dem Namen "standard.css" für Grundformate an, die Sie bei jeder Seite benötigen. Speichern Sie die Stile für Online-Formulare in der Datei "formular.css" und die für Infoboxen in "box.css". Sinnvoll sind außerdem einzelne Dateien für Navigationsleisten, für die Ausrichtung von Grafikobjekten und für klassische Tabellen zur Darstellung von Zahlenreihen. Je nach Ausgabemedium können die Formate der Seitenelemente zudem variieren. Erstellen Sie dann beispielsweise für Bildschirm, Drucker und mobile Geräte unterschiedliche Module. Als Ergebnis erhalten Sie einen Baukasten mit vielen kleinen Layoutbausteinen, die sich individuell zusammensetzen lassen.

CSS-Akademie

© Archiv

CSSTidy: Mit dem komfortablen Optimierer lässt sich je nach Ausgangscode bis zu einem Drittel des Speicherplatzes sparen.

Fügen Sie auf der Hauptebene Ihrer Website beispielsweise die folgenden Zeilen in den <head>-Bereich jeder Seite ein:

<link rel="stylesheet" type="text/css"
?media="screen" href="haupt_
?bildschirm.css" /><link rel="stylesheet" type="text/css"
?media="handheld"
href="haupt_mobil.css" /><link rel="stylesheet" type="text/css"
?media="print" href="haupt_drucken.
?css" />

Tragen Sie in die Datei "haupt_bildschirm.css" lediglich Importbefehle für die tatsächlich benötigten CSS-Bausteine ein:

@import url('standard.css');
@import url('haupt_navi.css');
@import url('box.css');

Kombinieren Sie einige dieser externen Dateien bei der mobilen Version mit anderen CSS-Modulen. Die Datei "haupt_mobil.css" könnte folgenden Inhalt haben:

@import url('standard.css');
@import url('navi_mobil.css');
@import url('box_mobil.css');

Setzen Sie das gleiche Prinzip bei der Druckversion und auf den anderen Ebenen der Website fort. So werden stets nur die CSS-Befehle geladen, die auf der jeweiligen Seite benötigt werden. Der modulare Aufbau erleichtert zudem die Pflege der Website, da Sie die anzupassenden Formate gezielt ansteuern können.

CSS-Akademie

© Archiv

Gründliche Planung: Beschreiben Sie die Elemente, die Sie für Ihre Seiten benötigen, in einem ausführlichen Styleguide.

Kürzere Schreibweise

Mit intelligentem Code lassen sich aber auch bei der Eingabe der Formatbefehle zahlreiche Bytes sparen. So legen Sie beispielsweise die Zeilenhöhe und Farbe für alle Überschriftebenen in einem Schwung fest:

h1, h2, h3, h4, h5 {line-height: 1.2;
?color:#000099;}

Durch Kommata getrennt fassen Sie die ursprünglichen fünf Formatzuweisungen zu einer zusammen. Weisen Sie den einzelnen Überschriften-Tags zusätzlich nur noch die Formate zu, bei denen sie sich unterscheiden. Beim folgenden Beispiel wären dies die Schriftgröße und der untere Abstand:

h1 { font-size: 160%; padding-bottom:
?1.5em;}
h2 { font-size: 140%; padding-bottom:
?1em;}
usw.

Weiteren Quelltext sparen Sie durch eine verkürzte Schreibweise der CSS-Formate. So lässt sich beispielsweise das CSS-Format

body {
font-style: normal;
font-size: 100%;
line-height:1.5;
font-family: Arial,
?Helvetica, Verdana,
?Geneva, sans-serif;
}

eindampfen zu

body {
font: normal 100%/1.5 Arial,
?Helvetica, Verdana, Geneva,
?sans-serif;
}

Diese so genannten Shorthand Properties sparen gleich mehrere Zeilen Code. Ähnliche Verkürzungen sind möglich bei der Definition von Rahmen (border), Außenabständen (margin), Innenabständen (padding), Listenlayouts (list-style) und Hintergründen (background).

Aussagekräftige Klassennamen

Mit Formatklassen lassen sich Seitenelemente individuell formatieren. Möchten Sie beispielsweise Kästen mit externen Links in Ihre Texte einstreuen, dann hilft Ihnen die folgende CSS-Angabe bei der Gestaltung der Abstände, der Hintergrundfarbe und des Textflusses um die Boxen:

.linkbox {
float:right;
background-color: #EECC00;
border: 1px solid #000033;
padding: 10px;
margin:0.3em 0em 0.3em 1em;
}

Mit "float:right" werden die Kästen am rechten Rand ausgerichtet. Der Text fließt links daran vorbei. Beachten Sie bei der Namenswahl für Formatklassen die folgenden Regeln: Beschreiben Sie mit dem Namen nicht die Gestaltung, die eine Klasse bewirkt, sondern deren logische Funktion. Selbst wenn die Verweisboxen gelb sind, sollte der Name nicht "gelbebox" lauten. Ändern Sie die Farben Ihrer Site später einmal grundlegend, dann führt ein solcher Name nur zur Verwirrung. Vermeiden Sie zudem kryptische Abkürzungen. Ein Name wie "linkbox_ueberschrift" sagt Ihnen nach einigen Wochen mehr als die Abkürzung "lbu". Übrigens lassen sich die Farbwerte im vorgenannten Beispiel kürzer angeben: Schreiben Sie an Stelle von #EECC00 die Kurzform #EC0. Dies ist immer dann möglich, wenn die Anteile Rot, Grün und Blau des Codes jeweils aus Paaren mit zwei gleichen Ziffern bestehen.

Doppelte Formate vermeiden

Vermeiden Sie bei Ihren Klassen Doppelungen von Formaten. Bei den beiden Angaben

.einschub {text-indent:1em; font-
?size:1.0em; font-weight:700;
?color:#009;}
.hinweis {font-size:0.8em; font-
?weight:700; color:#009;}

sind Schriftgewicht und auch die Farbe gleich. Sollen diese Attribute nach dem Gestaltungskonzept der Website dauerhaft übereinstimmen, dann ziehen Sie die Formate aus den Klassen heraus und erstellen Sie dafür einen zusätzlichen Stil nach dem nun folgenden Beispiel:

.zusatztexte {font-weight:700;
?color:#009;}

Reduzieren Sie die Formatklassen nach dem folgenden Muster auf die Unterschiede

.einschub {text-indent:1em; font-
?size:1.0em;}
.hinweis {font-size:0.8em;}

Sie formatieren einen Einschub nun, indem Sie dem entsprechenden Absatz parallel zwei Klassen wie folgt zuweisen:

<p class="einschub zusatztexte">...<p>

Gekonnt verschachteln

Formatklassen sind jedoch nicht für jeden Fall die beste Lösung. Möchten Sie beispielsweise die Einträge des Hauptmenüs anders gestalten als die übrigen Links, dann könnten Sie den folgenden Code verwenden:

<div id="haupt_navi"><ul><li><a href="start.htm"
class="navi_item">Startseite</a></li><li><a href="produkte.htm" class=
?"navi_item">Produkte</a></li><li><a href="kontakt.htm" class=
?"navi_item">Kontakt</a></li></div>

Die Angabe der Klasse bei jedem Link, bläht den Quelltext jedoch auf. Mit dem folgenden verschachtelten CSS-Format lösen Sie das Problem eleganter:

#haupt_navi a {text-decoration:none;}

Links, die sich im Container "haupt_navi" befinden, erhalten das angegebene Format. Die "class"-Angaben bei den einzelnen Menüeinträgen benötigen Sie dafür nicht. Nutzen Sie diese Technik konsequent für Ihre Seiten. So kommen Sie beispielsweise bei einer Infobox komplett ohne Klassen aus. Legen Sie die Box an mit

<div id="infobox"><h1>Boxtitel</h1><p>Text</p><ul><li>Listenpunkt</li><li>Listenpunkt</li><li>Listenpunkt</li></ul></div>

Verwenden Sie zur Gestaltung der Box selbst, des Boxtitels, der Textabsätze und möglicher Listenpunkte die folgenden CSS-Selektoren:

#infobox {...}
#infobox h1 {...}
#infobox p {...}
#infobox li {...}

Optimieren mit CSSTidy

Nutzen Sie den kostenlosen Optimierer CSSTidy (csstidy.sourceforge.net), um die Größe Ihrer CSS-Dateien weiter zu reduzieren. Neben der ausführbaren Kommandozeilen- Version "csstidy-1.3-exe.zip" finden Sie auf der Heft-DVD mit "csstidy-1.3.zip" eine PHPVariante des praktischen Open Source Tools. Installieren Sie diese Version beispielsweise auf Ihrem lokalen Webserver. Packen Sie das Archiv aus und kopieren Sie sämtliche Dateien und Ordner in das gewünschte Serververzeichnis. Sie rufen den Optimierer im Browser über die Datei "css_optimiser.php" auf. Geben Sie den zu prüfenden CSS-Quelltext in das Feld "CSS-Code" ein oder schreiben Sie die Adresse Ihrer externen CSS-Datei in das Feld "CSS von URL".

Auf Wunsch komprimiert CSSTidy Ihren Code so weit, dass nur noch eine einzige Zeile übrig bleibt. Damit sparen Sie zwar maximal Speicherplatz, der Quelltext verliert jedoch jegliche Lesbarkeit. Legen Sie daher stets eine Sicherung des Originalcodes für weitere Anpassungen zur Seite.

CSSTidy unterstützt das bereits vorgestellte Shorthand Coding und kann Farbcodes kürzen. Sehen Sie sich die zahlreichen Einstellmöglichkeiten auf der rechten Seite des Fensters genauer an. Mit "CSS verarbeiten" starten Sie den Optimierungslauf. Übernehmen Sie den Ausgabecode am Ende der Seite in die Zwischenablage und fügen Sie ihn in die entsprechende CSS-Datei Ihrer Website ein. Bevor Sie diese hochladen, sollten Sie Ihre Seiten jedoch noch einmal genau testen. In Einzelfällen können kleinere Probleme mit älteren Versionen der gängigen Browser auftreten. Meist lassen sich die Abweichungen jedoch mit geringem Aufwand korrigieren.

CSS-Tidy steht auch bei mehreren Anbietern als Online-Dienst zur Verfügung. Nutzen Sie beispielsweise den Service von www. codebeautifier.com oder floele.flyspray.org/ csstidy/cssoptimiser.php. Achten Sie dabei jedoch auf die eingesetzte Version des Optimierers. Aktuell ist die Version 1.3. Informationen zur Nutzung der Kommandozeilen- Version des Optimierers gibt die Seite csstidy.sourceforge.net/usage.php.

Egal, ob Sie Ihre Stylesheets von Hand optimieren, einen Online-Dienst dabei zu Rate ziehen oder beide Möglichkeiten kombinieren, der Aufwand lohnt sich in jedem Fall: Optimierter CSS-Code benötigt bis zur Hälfte weniger Speicherplatz. Die Besucher Ihrer Seiten werden sich über die schnelleren Ladezeiten freuen. Und mit einer ausgefeilten Struktur des Codes sowie einigen zusätzlichen Kommentaren im Original-Quelltext behalten Sie selbst bei komplexen Projekten stets einen guten Überblick.

Valider Code als Grundlage

Die Grundlage für eine weitergehende Optimierung sollte stets ein valider CSS-Code sein. Prüfen Sie mit dem offiziellen Validator des W3C unter jigsaw.w3.org/css-validator/, ob Ihre Befehle den Spezifikationen entsprechen. Geben Sie dazu entweder die URL Ihrer CSS-Datei an, laden Sie die Datei hoch oder kopieren Sie Ihre Befehle in das vorgegebene Textfeld.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".