WordPress – Wie und wo soll man CSS in HTML einbinden?

Dieser Artikel ist Teil der Guideline WordPress Performance.

In diesem Teil der Artikelserie beschäftigen wir uns mit der richtigen Platzierung von CSS-Dateien im Code und zeigen, wie Stylesheets eingebunden werden müssen, damit die Ladezeit der Seite positiv beeinflusst wird.

Stylesheets gehören in den HTML Header

Beispiel: Stellen Sie sich vor, Sie haben auf Ihrer Webseite einen Button wo sich Besucher in Ihren E-Mail-Newsletter eintragen können. Erst wenn jemand auf diesen Button klickt, dann erscheint ein formatiertes Popup-Fenster (in Wahrheit ist es ein formatierter DIV-Container) wo der Besucher seine E-Mail-Adresse hinterlassen kann.

Nun könnte man vielleicht auf die Idee kommen, dass es sinnvoll wäre, die CSS-Datei – welche für die Formatierung dieses speziellen DIV-Containers verantwortlich ist – in den Footer der Webseite zu verlagern. Das hätte doch den Vorteil, dass die „wichtigen“ Elemente der Seite früher geladen werden und der Besucher somit die Webseite schneller sieht, oder?

Leider ist dies nicht (immer) der Fall bzw. kann unter Umständen sogar zu einer negativen User Experience beitragen. Die Gründe dafür sind:

1. Ein Stylesheet im Footer blockiert bei manchen Browsern, vor allem beim Internet Explorer, das sogenannte progressive Rendering der Seite (getestet bis IE 8). Beim progressiven Rendering zeigt der Browser immer Stück für Stück die vom Server empfangenen Elemente (HTML, Bilder, etc.) an. Wird dieses progressive Rendering blockiert, dann sitzt der Anwender erst einmal vor einer weißen Browserseite (Blank White Screen) bevor anschließend alles auf einmal angezeigt wird. Dies hat den großen Nachteil, dass der Besucher der Seite kein Feedback über den aktuellen Ladestatus bekommt. Er weiß also nicht, ob die Seite noch geladen wird oder das Laden aus irgendeinem Grund bereits abgebrochen wurde.
2. Blockiert der Browser das vorher beschriebene progressive Rendering nicht ((fast) alle aktuellen Browserversionen), dann tritt in der Regel das sogenannte FOUC-Problem auf. FOUC steht für Flash Of Unstyled Content und bedeutet, dass der Browser bereits mit dem Rendering beginnt, bevor er alle nötigen Informationen (z.B. Stylesheets) erhalten hat. Sobald jedoch das Stylesheet vom Footer geladen wird, dann nimmt dieses unter Umständen noch einmal Veränderungen an der aktuellen Seite vor, was für den Nutzer sehr deutlich sichtbar wird und störend wirkt. Beispiel gefällig? CSS-FOUC
3. Sowohl in HTML 4.01 als auch HTML 5 ist die Integration eines externen Stylesheets via LINK-Tag nur im Head-Bereich des HTML-Dokuments valide (weitere Infos zum LINK-Tag gibt es noch weiter unten im Text).

Wir können also festhalten, dass man Stylesheets immer im HEAD laden sollte, da dies auch die einzige Möglichkeit ist, die Webseite laut W3C-Standard mit dem LINK-Tag valide zu betreiben und somit bestmöglich browserkompatibel zu gestalten. Außerdem vermeidet man damit auch unschöne Effekte die beim erneuten Rendern einer Seite entstehen und so die User Experience verschlechtern.

Die beste Technik um CSS im HEAD einzubinden

Zur Einbindung von CSS in das HTML-Dokument stehen verschiedene Möglichkeiten zur Verfügung, die sich allerdings unterscheiden. In der Übersicht sind dies folgende:

• Inline CSS, also die Formatierung mittels CSS direkt im HTML Code

  <p style="font-size: 12pt; color: red;">
  Ich wurde Inline CSS formatiert
  </p>

• CSS style im HEAD einbinden

  <style>
    h1 { font-size: 18px; }
  </style>

• Externes CSS mit @import im HEAD einbinden

  <style>
    @import url("style1.css");
  </style>

• Externe CSS-Datei mit LINK im HEAD einbinden

  <link rel="stylesheet" href="style1.css">

Sowohl Inline CSS als auch der CSS style-Tag im HEAD werden im weiteren nicht mehr behandelt, da diese Teil eines eigenen (später noch erscheinenden) Artikels dieser Serie sind. Als Faustregel kann man aber festhalten, dass CSS-Dateien in der Regel in eine externe Datei (leichtere Programmierung und Style-Konsistenz, Dateigröße und Caching) ausgelagert werden sollten.

Die Wahl zwischen @import und dem LINK-Tag fällt anschließend nicht mehr besonders schwer, vor allem da die Import-Anweisung zwei entscheidende Nachteile hat:

1. Die @import-Regel muss vor allen anderen Regeln definiert werden, ansonsten wird die verknüpfte CSS-Datei nicht geladen. Diese Tatsache hat manchen Entwickler schon viel Zeit gekostet, die er bei der Fehlersuche verschenkt hat.
2. Die Einbindung von CSS mittels @import kann eine unvorhergesehene Anordnung der zu ladenden Dateien bewirken. Bedeutet konkret: Unter Umständen kann es mit der @import-Anweisung passieren, dass die CSS-Datei als letztes geladen wird und das Blank White Screen Phänomen (siehe Punkt 1 bei Stylesheets gehören in den HTML Header) oder ein FOUC auftritt.

Aufgrund der genannten Nachteile der Import-Anweisung sollte man externe Dateien stets per LINK-Tag einbinden.

Fazit

Das Fazit für diesen Teil der WordPress Performance Guideline fällt recht kurz aus: CSS-Dateien sollten in der Regel im Header als externe Datei mit dem LINK-Tag geladen werden.

Im nächsten Teil dieser Artikelserie behandeln wird die richtige Platzierung von JavaScript-Dateien auf der Webseite. Im Vergleich zu den CSS-Dateien birgt JavaScript (sowohl inline als auch extern) noch mehr Gefahren.