Good Website Inspector

making the web better

Regeln

Regel: Externe Dateien zusammenführen

Externe Stylesheet-Dateien sollten nach Möglichkeit zusammengefasst werden. Da weniger HTTP-Requests benötigt werden führt dies zu einer geringeren Ladezeit der Seite.

Weitere Informationen finden Sie in den YSLOW Best Practices im Abschnitt Minimierung der HTTP Requests.

Regel: CSS im <head> platzieren

CSS Definitionen außerhalb des <head>-Tags sollten vermieden werden, da es in einigen Fällen vorkommt, dass jedes Vorkommen ein Rerendering der Seite im Internet Explorer bewirkt.

Die Auswirkungen auf den Seitenbesucher sind in einigen Fällen imens, da die Seite in diesen Fällen als ungestylte Seite erscheint, bis die kompletten CSS-Auszeichnungen geladen und interpretiert wurden.

Regel: Vermeide <style>-Tags

Der Inhalt des Style-Tags sollte für ein optimales Caching in externe Dateien gespeichert werden. Das bewirkt eine kürzere Ladezeit der Website. Wurde ein <style>-Tag nahe dem schließenden </body>-Tag platziert, kann es im Internet Explorer zum Problem kommen, dass die Seite erst beim vollständigen laden und interpretieren aller CSS-Daten korrekt angezeigt und somit zuvor fehlerhaft dargestellt wird.

Regel: Vermeide style-Attribute auf HTML tags

Der Inhalt der Style-Attribute sollte für ein optimales Caching, bessere Wartbarkeit und einem Seitenübergreifend konsistenten Layout in externe Stylesheet-Dateien ausgelagert werden. Die Maßnahmen bewirken ein schnelleres Laden der Seite.

Regel: Verkleinere CSS-Definitionen

Verkleinern (Minifying) der Stylesheets bewirkt ein schnelleres Laden der Seite, da sich die Anzahl der Bytes die zum User übertragen werden reduziert.

Es sollten sowohl alle externen CSS-Ressourcen/Dateien als auch alle inline CSS-Statements, die direkt in den HTML-Code geschrieben wurden, verkleinert werden.

Regel: Wenige CSS-Definitionen nutzen

Der Internet Explorer ignoriert alle weiteren Stylesheet-Angaben nachdem 30 externe oder interne Stylesheet-Definitionen (gezählt nach Anzahl <link> und <style>-Tags) gesetzt wurden.

Weitere Informationen zu diesem Problem sind in der Microsoft KnowledgeBase Q262161 erläutert.

Regel: Vermeide Alpha-Filter

Die Alpha-Image-Filter werden sehr oft als IE6 transparenter PNG-Hack eingesetzt, aber sie verlangsamen signifikant den Darstellungsprozess der Seite. Sie sollten daher vermieden werden, um einen schnellen Seitenaufbau zu gewährleisten.

Regel: Vermeide CSS-Hacks

Stylesheet-Hacks werden of für ein besseres Styling in alten Browsern genutzt. Das Hauptproblem besteht in der höheren Komplexität der Verwaltung und Bearbeitung des bestehenden Stylesheet-Codes und nicht vorhersehbaren Verhalten in aktuellen Browsern.

Ein guter CSS-Entwickler umgeht die CSS-Hacks in den eigenen Seiten und nutzt statt dessen wenige Conditional Comments zur Browserunterscheidung. Eine komplette Liste aller häufig eingesetzten CSS-Hacks ist im CSS-Filter-Artikel auf Wikipedia einzusehen.

Regel: Conditional Comments nutzen

Conditional Comments sind HTML-Kommentare, die ausschließlich vom Internet Explorer beachtet werden. Sie werden hauptsächlich als Browserweiche für Stylesheet- oder Javascript-Ausnahmen für die verschiedensten Versionen des Internet Explorers genutzt.

Sie sollten genutzt werden, um CSS-Hacks oder Javascript-Weichen für den Internet Explorer zu vermeiden

Der Good Website Inspector wurde von Hubert Burda Media entwickelt.
Autor: Stefan Seifarth, Media Innovation Lab GmbH, Hubert Burda Media, Impressum & Datenschutz