Die Auszeichnungssprache CSS (Cascading Style Sheets) sorgt unter anderem dafür, dass aus einem simplen Textblock strukturierte Typografie wird. Sie passt an, vergrößert und verkleinert und ermöglicht es, Buttons und Links zu gestalten, um sie farblich vom Rest der Website abzuheben. Kurzum legt die CSS-Datei also das Aussehen fest und das mit relativ wenigen und vor allem sehr einfach verständlichen Befehlen.
Tatsächlich ist eine möglichst geringe Anzahl an Einträgen häufig auch das Ziel. Spätestens seit es Google Pagespeed gibt und das sogenannte Render Blocking CSS Problem, ist so ziemlich jeder Webmaster und Blogger darauf bedacht, seine CSS-Dateien drastisch zu reduzieren und vor allem auch zu verkleinern, wo es nur geht. Eine simple Möglichkeit, um diesen Vorgang zu optimieren, sind CSS Shorthands, also die Kurzschreibweisen von CSS-Befehlen. Werden diese verwendet, ersetzten sie meist viele komplizierte und lange Regeln.
Aus mehreren Zeilen wird durch die Kurzschreibweise dann ein einziger Befehl innerhalb der CSS erzeugt. Das spart nicht nur Platz in der Datei selbst, es sorgt auch dafür, dass Browser die Anleitungen schneller interpretieren können und die Website somit zügiger dargestellt werden kann. Erfolg auf ganzer Linie also. Doch wie genau sehen die gängigen Kurzschreibweisen aus?
Kurzschreibweisen für CSS-Befehle
Weil eine große CSS-Datei vermeintlich sehr lange braucht, bis sie vollständig geladen und entsprechend interpretiert worden ist, sollte sie so klein wie möglich gehalten werden. Oft kommt dabei auch das sogenannte Minify zum Einsatz, um alle überflüssigen Zeilenabstände und Leerzeichen zu entfernen und noch mehr Speicherplatz einzusparen.
Heutzutage wird das Thema CSS aber auch vollkommen anders als früher gehandhabt. Wo vor einigen Jahren noch jedes Margin und alle Paddings einzeln gelistet eingetragen wurden, werden diese heutzutage meist anhand eines CSS Shorthands zusammengefasst. Sollten sie zumindest. In der Realität sehen wir nach wie vor unzählige Websites, die alte Parameter verwenden, ungenutzte CSS-Regeln nicht sauber entfernen und gleich mehrere CSS-Dateien auf einmal laden, statt sie entsprechend clever zu kombinieren. So etwas sollte eigentlich nicht mehr vorkommen.
Einige CSS-Kurzschreibweisen möchten wir euch hier deshalb genauer vorstellen, damit ihr sie auch selbst einsetzten könnt. Wir beschränken uns dabei allerdings auf die wichtigsten Regeln, damit jeder das Prinzip der Kurzschreibweisen versteht und für seine Website nutzen kann.
Native Farbnamen und gekürzte Farbcodes
Farben sind ein schönes Beispiel. Streng genommen, also wenn es bis ins Detail getestet wird, laden die nativen CSS-Farben nämlich am schnellsten. Also statt »#000000« wird der native Farbname »Black« in die CSS geschrieben. Leider gibt es nicht allzu viele native Farbnamen, vor allem aber nicht exakte Farben, sondern lediglich Grundwerte. Damit eignen sich die Namen nicht sonderlich gut für den produktiven Einsatz. Immerhin sind Farben auch Teil des Brandings, sollten also hier und da möglichst unique sein.
Was allerdings möglich ist, ist die Kurzschreibweise bzw. Reduzierung der jeweiligen Farbcodes. Statt »#000000« wird dann die Kurzform »#000« verwendet. Theoretisch ist die dreistellige Zahl bei allen Farben möglich, sie verhindert meist nur die Feinabstimmung. Wenn es also nicht der ganz exakte Farbton sein muss, sollten alle Farben immer entsprechend reduziert werden.
Die einfachste Möglichkeit, dies simpel und schnell umzusetzen, ist es, jede zweite Zahl das Farbcodes zu entfernen. Aus dem Gelbton »#ffa502» wird beispielsweise »#fa0«. Die Kurzform unterscheidet sich zwar leicht, spart aber pro Farbe drei Zeichen in der CSS ein. So geht Performanceoptimierung.
CSS-Befehle logisch zusammenfassen
Eine andere Möglichkeit, Platz in der CSS-Datei einzusparen, sind die Kurzschreibweisen einiger Anweisungen. Diese werden immer in Kombination eingesetzt, wann immer es möglich ist. Statt die Border beispielsweise für alle Seiten einzeln festzulegen, wird dieser zusammengefasst. Ebenso verhält es sich mit der Schriftart, Größe und dem Zeilenabstand. Für viele CSS-Befehle gibt es passende Shorthands.
font: 300 italic 12pt/1.5 Helvetica, Arial, Sans Serif;
Schriftschnitt, Schriftauszeichnung, Schriftgröße, Zeilenabstand und Schriftfamilie.
margin: 4px 2px; / padding: 4px 2px;
Oben, rechts, unten, links. In diesem Fall nur zwei, weil die Werte so kopiert werden. Für links und unten werden also dieselben Werte verwendet.
background: #000 url(bild.jpg) top center / 50px 50px no-repeat fixed;
Farbe, Hintergrundbild, Position, Größe, Wiederholung, Ausrichtung.
border: 1px solid #000;
Rahmendicke, Rahmenart, Rahmenfarbe
Wie ihr seht, lässt sich mit vergleichsweise wenig Aufwand, viel zusammenfassen. Alleine die Angabe von Schriftgröße und Schriftart, genau wie die Parameter, die es bei einem Hintergrund via CSS zu beachten gilt, würden einen ganzen Block in der CSS-Datei erzeugen. Als Shorthand hingegen, also der gängigen Kurzschreibweise, verbrauchen sie nur eine einzige Zeile und sind auf ein Minimum reduziert.
Wie Browser CSS-Dateien interpretieren
Zunächst einmal lässt sich das pauschal gar nicht beantworten. Jeder Browser hat seine eigene Rendering Engine (Webkit, Blink), die unter Umständen auch anders mit den jeweiligen Befehlen umgeht. Glücklicherweise sind die alten Zeiten vom Internet Explorer aber ein für alle Mal vorbei, es gibt also nicht mehr den einen Browser, der alles ganz anders macht und Entwickler damit endlos nervt. Wer im Web etwas umsetzt, kennt das sowieso schon, schließlich kommt es hier und da auch heute noch zu Unterschieden oder Inkompatibilitäten, weil ein Browser beispielsweise bestimmte CSS-Befehle nicht unterstützt oder alternativ verarbeitet.
Sobald die CSS-Befehle an der Reihe sind, werden diese entsprechend ausgewertet. Dabei liest der Browser CSS-Dateien immer von hinten nach vorne und berücksichtigt dabei selbst Leerräume. Das wiederum führt dazu, dass kleine, sehr komprimierte Dateien, natürlich deutlich schneller geladen werden können und auch Kurzschreibweisen entsprechend zügiger abgearbeitet sind, als z. B. lange Zeilen in Stylesheet.
Eine möglichst minimale Größe ist also immer von Vorteil und je kürzer und komprimierter die einzelnen Befehle ausfallen, desto direkter kann der Browser selbige interpretieren. Eigentlich nur logisch, denn wenn es weniger zu beachten gibt und sich die unterschiedlichen Styles nicht überschreiben oder doppelt und dreifach vorhanden sind (alles schon erlebt), muss der Browser beim Rendern auch nicht mehr viel leisten oder gar korrigieren. Das spart Zeit.
Render Blocking CSS verstehen und weitere Tipps
Da gibt es aber noch die bereits erwähnte Tatsache, dass Render Blocking CSS eine wichtige Rolle spielen kann. Kurz gesagt blockieren CSS-Dateien das Rendern im Browser immer dann, wenn sie zu komplex oder zu vielfältig ausfallen. Muss der Browser beim Aufruf dann fünf einzelne CSS-Dateien laden, die allesamt noch unsäglich groß sind, hat er damit erst einmal einige Zeit zu tun. Dann kommt es zu einer Blockade beim Rendern, weil der Browser eben schlichtweg etwas Zeit benötigt, um die Informationen zu verarbeiten.
Deshalb sollte nach Möglichkeit immer nur eine CSS-Datei integriert werden. CSS-Befehle hingegen, die das grundlegende Layout konfigurieren, können außerdem direkt via Tag in den Head einer Website integriert werden, um das Rendern noch weiter zu beschleunigen.
Vermieden werden sollte innerhalb von CSS-Dateien außerdem der Befehl @import, da dieser die Ladezeit noch weiter hinauszögert. Das gilt ebenso für Regeln, die mit »!important« markiert werden. Auch das führt zu heftigen Performanceeinbrüchen beim Rendern einer Website. Am wichtigsten ist es aber, ungenutzte Regeln aus der CSS zu entfernen und das ganze am Ende noch einmal minimieren. Das gelingt kinderleicht mit verschiedenen Online-Tools, direkt im Browser. So minimiert sich der CSS-Code abermals auf ein absolutes Minimum.
by A-DIGITAL one
Unsere Herzen schlagen Digital, unsere Projekte leben Digital, unsere Kunden lieben und schätzen Digital! Die einzigartige digitale Performance, die wir seit 1999 an den Tag legen.
Mit unserem Team von über 45 Experten begleiten wir Sie auf Ihrem Weg der digitalen Transformation. Mit klaren Strategien, persönlicher Betreuung und exzellenter Ausführung entwickeln wir, innovativ und individuell, maßgeschneiderte digitale Lösungen, die performen und verkaufen können.