• Tipp: Dein Blog lädt zu langsam? Teil 2 – Render Blocking CSS

    Nachdem wir uns im ersten Teil schon mit CSS Optimierung befasst haben, möchten wir ein wenig tiefer in das Thema Ladezeiten Optimierung vordringen und klären was genau „Render Blocking CSS Files“ eigentlich sind. Generell steht das Thema natürlich im Context zum Spannungsfeld der optimalen Darstellung vs. Ladezeit. Am schönsten ist es jedes noch so kleine Detail dem Browser vorzugeben hinsichtlich der Darstellungsregeln, aber genau darin kann, bei nicht optimaler Umsetzung, auch ein Problem liegen.

    Was genau versteht man darunter wenn von „render blocking css Files“ gesprochen wird?

    „Render blocking CSS Files“ verzögern generell die Anzeige deiner Webseite. Es werden damit die Dateien bezeichnet, die den Browser davon abhalten bzw. verlangsamen mit dem Rendering (Anzeigen) der Web Seite zu beginnen. Denn generell muss jeder Browser zu erst die „Formvorgaben“ (CSS Styles) laden um dann mit der Darstellung zu beginnen.

    Wer findet es schon gut auf das Laden einer Seite zu warten? Niemanden den wir kennen. Und auch wenn die Gründe unterschiedlich sein können, gibt es einige einfache Tipps wie man mit dem Thema umgehen kann. Und genau darum soll es im heutigen Teil „Render Blocking CSS“ gehen. Wir werden ganz praktisch einige Lösungen aufzeigen bzw. Tipps geben, wie man mit solchen „aufhaltenden“ Dateien umgehen kann. Generell unterscheiden wir in diesem Beitrag 3 Szenarien auf Basis der folgenden CSS Grundregeln:

    • Jedes einzelnde CSS Datei muss erst geladen werden und verzögert damit das Darstellen der Web Seite
    • Je größer die CSS Datei ist, um so länger dauert das Laden und damit das Darstellen der Seite
    • Je mehr CSS Dateien für eine Web Seite geladen werden müssen, um so langsmer wird die Web Seite dargestellt

    Generell sind lange Wartezeiten beim Aufrufen von Web Seiten nie schön, aber es kann auch einen ernsteren Hintergrund haben: Ist die User Experience auf einer Seite dauerhaft schlecht, werden sich die Nutzer von der Seite verabschieden. Niemand hat Lust auf die Darstellung zu warten, weder am stationären Rechner noch auf mobilen Endgeräten. Und da Nutzerzahlen nicht zu letzt eine wesentliches Erfolgskriterien für online Kanäle sind, ganz egal ob es sich um Web Seiten, Blogs oder Web Shops handelt, solltet Ihr ein gesteigertes Interesse haben, Eure Seite so optimal wie möglich zu gestalten. Daher anbei die 3 Basis Tipps rund um die Dateien welche für die Darstellung der Web Seiten im Browser sorgen.

    Was kann ich tun um „render blocking css Files“ auf meinen Seiten zu eliminieren? 3 Tipps ….
    1. Sorge für den optimalen Aufruf der CSS Dateien
    2. Verringere die Anzahl der verwendeten CSS Dateien so weit wie möglich in den für die Web Seiten Anzeige relevanten Teilen deines Codes
    3. Versuche generell die Anzahl an CSS Dateien und Code so gering wie möglich zu halten.

    Im folgenden Teil werden wir nun auf die einzelnen Teile eingehen, teilweise auch etwas tiefer. Orientierung bietet dabei die Hinweise welche Google zur Verfügung stellt.

    1. Wie sorge ich Für den optimalen Aufruf der CSS Dateien?

    CSS Dateien können auf viele unterschiedliche Arten von Deiner Web Seite abgerufen werden. Einige Möglichkeiten sind nicht optimal in Hinsicht auf die Ladezeiten. Anbei 2 zu vermeidende Szenarien:

    • Verwende auf keinen Fall „@import“ zum Einbinden von um Stilregeln anderer Stylesheets zu importieren
    • Das nicht Kennzeichnen von CSS Dateien kann Browser zu unnötigen Vorgängen verleiten.

    @import

    Warum soll @import nicht verwendet werden? Die Aufrufmethodik verlangsamt das Laden der CSS Dateien und verzögert damit die Darstellung der Web Seite. Jeder kann sehr einfach überprüfen ob dieses Problem auf die eigene Web Seite zu trifft und das ggf. einfach beheben. Zur Analyse gibt es eine Reihe von frei verfügbaren Geschwindigkeitsoptimierungstools im Internet. Die Tools die wir uns angesehen haben erfüllen alle den entsprechenden Zweck, von daher sollte jeder selbst entscheiden welches er verwenden möchte.

    Sind die Dateien identifiziert (@import url(„style.css“)) einfach durch andere CSS Calls ersetzen bzw. in das eingene CSS File integrieren. Sollte eine Intgration in das eigene CSS File nicht möglich oder gewünscht sein, könnte ihr die externen CSS Dateien auch mit folgenden html code „ersetzen“: <link rel=“stylesheet“ href=“style.css“>. Jetzt muss man nur noch „style.css“ mit dem Namen und der Adresse der eigenen CSS Datei ergänzen.

    Korrekte Kennzeichnung der CSS Dateien

    Wenn die CSS Dateinen nicht ordenungsgemäß beschrieben sind, wird der Browser zuerst versuchen alle CSS Dateien zu laden und dann mit der Darstellung beginnen. Das kann zu Verzögerungen im Aufbau der Seite führen. Um herauszufinden ob die CSS Dateien optimal für den Browser beschrieben sind, muss man nur in den Code schauen.

    Ein typisches CSS File wird wie folgt aufgerufen: <link href=“style.css“ rel=“stylesheet“>. Der Code sagt nun aus, „hier ist ein Link“ und „der Link führt zu meinem CSS“. Das führt dazu, dass der Browser alle CSS Dateien laden wird, bevor er mit der Darstellung der Web Seite anfangen wird. Das Problem dabei ist: es gibt auch Darstellungsregeln die in einem CSS File enthalten sein können, die der Browser zur Online Darstellung gar nicht benötigt, z.B. die Darstellungsvorgaben fürs drucken der Seite: <link href=“print.css“ rel=“stylesheet“ media=“print“>. Dieser Code sagt nun aus: „hier ist ein Link“, „der Llink führt zu meinem CSS“ und „dieser Teil des CSS ist nur fürs Drucken der Seite“. Ziel muss es nun sein, dass der Browser erkennt, dass er dieses Darstellungsvorgaben nicht laden muss um mit der Darstellung der Web Seite zu beginnen. Moderne Browser werden das verstehen und es wird kaum Einfluss auf die Ladezeit haben, da der Browser die Download Reihenfolge anpassen wird. Daneben gibt es auch Darstellungsregeln die nur unter bestimmten Umständen benötigt werden – z.B. hinsichtlich der Breite einer Seite (<link href=“other.css“ rel=“stylesheet“ media=“(min-width: 40em)“>). Auch hier werden die heutigen Browser selbstständig beurteilen können ob sie das File zur Darstellung der Web Seite benötigen oder nicht. Im Idealfall sorgt die Thematik also nicht unbedingt für Verzögerungen, aber es gibt eben auch Ausnahmen. Diese zu beheben ist kein Problem und da es sich dabei um die Grundlage für den Browser handelt, ist das absolut sinnvoll.

    Folgt man diesen 2 einfachen Schritten ist das erste mögliche Thema rund um das als „render blocking CSS“ beschrieben Dilemma behoben.

     

    2. Verwende so wenig wie möglich CSS files Im Darstellungskritischen Teil

    Der Darstellungskritische Teil einer Seite bezeichnet die Files die der Browser unbedingt vor dem Anzeigen der Web Seite laden muss. Wenn die Kennzeichnung sauber ist, sind schon einige Files aus dem unbedingt zu ladenden File Sammelsurium verschwunden bzw. werden nicht beachtet hinsichtlich der Darstellung. Es gibt aber noch ein paar weitere Möglichkeiten Ladezeiten zu optimieren.

    Wie bereits mehrfach ausgeführt gilt der Grundsatz: jede CSS Datei die entfernt werden kann (oder nicht geladen werden muss) wird einen postiven Einfluss auf die Ladezeit der Web Seite / Blog haben.

    Im Wesentlichen gibt es 2 mögliche Ansätze um das zu erreichen

    • Füge die CSS Dateien deiner Web Seite zusammen
    • Das direkte Festlegen von Formaten („Inline CSS“)
    Führe css Dateien zusammen

    Führe Deine CSS Dateien in einer Datei zusammen – oder in mehreren falls auf Grund der Größe notwending.

    Eine Web Seite hat typischerweise eine große CSS Datei und mehrere „unterstützende“ CSS Dateien. Dafür gibt es viele Gründe, z.B. um die Gestaltungsrichtlinien der Web Seite von denen der Widgets und Plugins zu trennen. Die Widgets und Plugins werden dann seperat geladen und das ist auch sinnvoll.

    Statische Web Seiten haben häufig auch mehere CSS Dateien. Viele Web Designer haben das entsprechend aus Gründen der Übersichtlichkeit und Handhabbarkeit so angelegt. Allerdings führt dieser eigentlich positive Ansatz zu einigen Performance Problemen.

    Aber Performance Probleme sind in der Regel nicht ganz so relevant ehrlicherweise, die Ladezeiten halten sich normalerweise in Grenzen. Wichtig wird das Thema z.B. dann, wenn Du z.B. Adsense nutzt. Schnelleres Anzeigen und Laden bringt im Zweifelsfall mehr Geld durch schnellere Darstellung der gesamten Seite. Daneben ist die Nutzer Erfahrung durchaus auch ein kritischer Faktor um Nutzer zu mehrmaligen Besuchen zu ermutigen – oder diese nicht davon abzuhalten.

    Praxis Tipp: Wie füge ich CSS Datein zusammen?

    Um ehrlich zu sein, ganz einfach: Kopiere den Code in einer File und füge diesen in eine andere Datei ein. So einfach ist es in Wahrheit. Sobald Du Deine Dateien zusammengeführt hast, musst Du nur noch die alten Dateien löschen. Das wars und wenn jetzt noch die Lade-Reihenfolge stimmt steht einer optimalen Performance nix mehr im Weg.

    Direktes Festlegen von Formatvorgaben („Inline CSS files“)

    Darunter verstehen wir die Integration der CSS Datei im html – das kann in bestimmten Fällen sehr helfen.

    Durch die Verwendung von sog. html style tags, ist es möglich die Darstellungsvorgaben in der html Datei zu integrieren im Gegensatz dazu diese in einem externen CSS Datei abzulegen.

    Praxis Tipp: Wie lege ich Formatvorgaben direkt fest?

    Um eine CSS Datei in einer html Datei zu integrieren kopierst Du den CSS Code einfach und fügst diesen in Deine html Datei ein. Zu beachten sind dabei 2 wesentliche Puntke: zum einen sollte die Designvorgaben deiner CSS Datei nicht zu umfangreich um das html File nicht zu sehr auf zu blasen und zum anderen dass hinterher alle CSS Dateien entfernt werden müssen.

    Optimalerweise integrierst Du das CSS im Header der html Datei und verwendest dazu style tags.

    <style>
    …. füge deine CSS Vorhaben hier ein …..
    </style>

    Das ist schon wieder alles – wirklich auch kein Hexenwerk.

     

    3. Verwende so wenig CSS Dateien wie möglich

    Einfach gesagt und trotzdem nicht so einfach umgesetzt. Zum einen da wir es halt individuell und „schön“ haben möchten und zum anderen, da einfach viele Frameworks ungenützte CSS Dateien mit laden. Beispiele sind z.B. WordPress Themes die anpassbar sind, da werden alle Möglichkeiten quasi vorab mit integriert. Und die nicht benötigten CSS Dateien werden dann mit geladen, ob benötigt oder nicht. Ein anderes häufig auftretendes Beispiel ist bei der Verwendung von Bootstrap zu erkennen. Auch hier wird der Flexibilität wegen (weswegen wir ja Bootstrap verwenden) möglichst viele Design Vorgaben mitgeladen. Und zu guter Letzt ist es auch wahr, dass in der Vergangenheit einfach niemand darauf so richtig  geachtet hat.

    Aber was auch immer der Grund sein mag, am besten findest Du einen Weg um das oder die CSS Dateien deiner Seite so klein wie möglich. Es ergibt keinen Sinn Dateien mit zu laden die nicht benötigt werden.

    Praxis Tipp: Was kann ich tun um die Anzahl meiner CSS Dateien so klein wie möglich zu halten?

    Solltest Du deine CSS Dateien selber geschrieben haben, optimiere es unter den o.a. Aspekten.

    Solltest Du ein Theme oder Design gekauft haben – was wahrscheinlich auf die Mehrzahl zutrifft – und das Thema Ladezeit Dich umtreiben, sprich mit dem Entwickler, Designer und forder ein CSS optimiertes Theme an.

    Am besten und warhrscheinlich praktischten ist es aber gleich in der Planung das Thema als Vorgabe mit aufzunehmen. Ob in der Auswahl eine Themes oder zur Beauftragung eines Dienstleister – macht eine entsprechende Vorgabe, dann seit Ihr auf der sicheren Seite.

     

     

  • 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.