Tipp: Dein Blog lädt langsam? CSS Optimierung kann helfen, Teil 1

Was ist bzw. bezeichnet css eigentlich? Und warum ist es wichtig?

CSS steht für „Cascading Style Sheets“ und ist eine Stylesheet-Sprache für elektronische Dokumente. Zusammen mit HTML und DOM ist es eine der Kernsprachen des World Wide Webs und es gibt so gut wie keine Web Seiten und/ oder Blogs die ohne Beschreibungssprache auskommen.

Im Wesentlichen wurden die Beschreibungssprache Cascading Style Sheets entworfen um die Form (Darstellung) vom Inhalt (html, XML basiert) trennen zu können. Zu Beginn wurden nur einfache Vorgaben wie Farben und Typografie festgelegt. Heute geht das weiter: komplexe Animationen können ebenso abgebildet werden, wie Vorgaben für die Ausgabe auf verschiedenen Devices. Dabei gibt es eine eigene Versionierung, aktuell spricht man von CSS3 – eine vierte Version soll es auch nicht geben, aber warten wir es ab. Die Vollständige Entwicklungsgeschichte findest Du auch auf wikipedia.

Warum sollte ich mich von Anfang an mit meinem CSS code befassen?

Dein Browser muss erst allen CSS code verarbeitet haben bevor Du den Inhalt der aufgerufenen Seite sehen kannst. Einfach ausgedrückt: erst muss der Rahmen stehen und dann kommt der Inhalt. Die Auswirkung auf die Ladezeit kann unterschiedlich sein. Ein häufiger Grund für schlechte Ladezeiten ist die nicht optimal festgelegte Reihenfolge des Runterladen, Interpretieren und Darstellen von Inhalten. Anbei ein Beispiel zur Verdeutlichung und die Auswirkung auf die Ladezeit:

Folgende theoretische Annahme: deine Webseite besteht aus einer Bild Datei, einem CSS File und einem Java Script. Um jede Datei aus dem Netz zu laden, benötigt das System jeweils genau eine Sekunde. In der Realität ist das natürlich komplett anders, da werden wahrscheinlich dutzende Dateien unterschiedlicher Größe abgerufen. Aber der Einfachheit-halber bleiben wir bei unseren 3 gleich großen Dateien:

  • Wird zuerst das CSS file abgerufen, empfängt dies der Browser in 1 Sekunde und kann mit der Darstellung beginnen.
  • Wenn das Java Script zuerst geladen wird, empfängt der Browser das CSS File erst nach 2 Sekunden (1 Sekunde zum Runterladen des Java Script + 1 Sekunde zum Runterladen des CSS) und kann dann erst mir der Darstellung beginnen.
  • Wenn die Reihenfolge erst das Java Script, dann das Bild und dann erst das CSS lädt, dauert es sogar 3 Sekunden bis etwas dargestellt wird.

Die Reihenfolge ist also entscheidend, denn der Browser kann erst etwas darstellen wenn er das CSS File erhalten hat. Vorher passiert schlicht nix. Also ist die Reihenfolge der zu ladenenden Files zu prüfen und ggf. anzupassen.

Anpassen der Reihenfolge der zu ladenden Dateien

Das sehr vereinfachte Beispiel zeigt auf, dass sich die Ladezeit einer Seite schon positiv beeinflussen lässt indem man die Reihenfolge der zu ladenden Elemente verändert. Die Reihenfolge zu ändern bedeutet dem Browser mitzuteilen welche Datei er zu erst laden soll. Da ist im Normalfall ganz einfach und wird im HTML code bzw. in der Reihenfolge festgelegt. Modernere Browser haben mittlerweile häufig Lösungsansätze verbaut um mit dieer Frage umgehen zu können. Aber am Einfachsten ist es, alle CSS calls an den Anfang zu stellen.

Javascripte können ebenfalls für Verzögerungen sorgen

Muss ein Browser erst Javascripte laden bevor die CSS Files an die Reihe kommen, ist das (siehe oben) schon mal nicht optimal für die Ladezeit. Es kann aber gerade bei Javascripten noch deutlich schlechter werden. Das tückische an Javascritpen ist, dass sie dem Browser durchaus „Befehle“ erteilen können, z.B. die Aufforderung eine Sekunde zu warten oder direkt ein verknüpftes anderes Javascript zu laden. Das kann den Ladevorgang einer Seite und damit die Darstellung deutlich verlangsamen. Daher ist es immer zu empfehlen die CSS Datein zu erst laden zu lassen. Alle weiteren Calls können im Anschluss folgen.

 

Spread the love

Schreibe einen Kommentar