CSS minimieren: mehr Überblick, bessere Wartung und schnellere Ladezeiten

Es gibt unzählig viele CSS Style Eigenschaften und Wertangaben. In modernen Webdesigns finden eine Vielzahl davon Anwendung. CSS Frameworks (Libraries) wie Bootstrap blähen den Code und die damit verbundene, zu ladende, Datenmenge extrem auf. In diesem Tutorial zeige ich, wo Einsparpotential gegeben ist und wie man weiteres am eigenen Webdesign herausfinden kann.

Warum Ladezeiten optimieren?

Zum einen möchte man den eigenen Nutzern seiner Webseite möglichst schnell die gewünschten Inhalte präsentieren. Zum anderen ist die Geschwindigkeit einer Webseite auch ein Rankingfaktor von Google geworden. Schnelle Webseiten können so mitunter bessere Positionen in der Google-Suche erhalten. Bricht man das um auf die vielen, besser rankenden Einzelseiten, so erhält man schon mit ein wenig Optimierungsaufwand mehr Besucher. Zudem kann durch schnelleres laden der Seiten die Absprungrate und ggf. für Shops, die Conversationsrate verbessert werden. Reales Beispiel dafür: Amazon verliert 1,6 Mio Dollar pro Jahr, wenn die Seite eine Sekunde länger läd. Google kalkulierte 8 Mio Suchanfragen weniger am Tag, wenn die Seitenladezeit 0,4 Sekunden länger dauern würde (Artikel, englisch).

In diesem Artikel: Im Grunde gibt eine Vielzahl von Eingriffsmöglichkeiten, um die Ladezeit deiner Webseite zu optimieren. In diesem Artikel soll es jedoch um CSS Stylesheet Daten gehen. Denn die Technik, CSS einzubinden, ist wichtig. Zudem erhälst du noch Infos, um CSS Dateien möglichst klein zu halten – um einfach weniger laden zu müssen.

CSS Style Dateien geladen: so viel kann geladen werden – das kostet Ladezeit!


Anzeige

Unterschiedliche Style-Dateien

Portale und weit verzweigte Webseiten bieten zumeist separate Stylesheet-Dateien an. Zumindest immer dann, wenn das Design wechselt. WordPress und andere CMS sind hier ein gutes Beispiel, wieviele CSS-Dateien einzeln und zumeist auf jeder Seite geladen werden.

Nehmen wir ein noch ein Beispiel:
Die Webseite bietet ein Blog, sowie ein Forum an. So werden Style-Angaben für das Blog-Theme benötigt, die mit Sicherheit nicht auch im Forum-Template Anwendung finden. Um bei WordPress zu bleiben: style.css fürs Theme, sowie weitere style-Dateien für viele weitere Plugins (z.B.: des Forums).

Das Problem der vielen einzelnen CSS-Dateien sollte gelöst werden!

Lösung: Weniger Dateien oder Styles zusammenfassen

Dateizugriffe kosten Zeit. Man sollte so wenig wie möglich externe Dateien aufrufen. Idealerweise nur, wenn diese auch benötigt werden. Oder, wenn das laden des Inhaltes abgeschlossen ist (Stichwort: Above the Fold und Lazy Loading).

Bündeln kann man Style-Dateien gut, indem alle erforderlichen Dateien in den HTML-HEAD per <style>...css...</style>  eingebunden werden.

Beispielcode:

Achtung: Caching benötigt!

In dem obigen Beispielcode werden drei CSS Dateien geladen. Jeder Dateizugriff (HTTP Request) verbraucht wichtige Ladezeit. Auch wenn der Nutzer nur eine HTML-Datei ausgegeben bekommt, in der die CSS-Dateien bereits alle im HTML-HEAD geladen wurden, so laden wir mittels PHP trotzdem die drei CSS-Dateien.

Damit wir durch diese Möglichkeit Erfolge sehen, sollte die so generierte HTML-Datei gecached werden. Beim nächsten Ladevorgang wird nur der Dateizugriff auf die zuvor fertig generierte HTML-Datei, nicht aber die drei CSS-Dateien, stattfinden.

Cachingmöglichkeiten: per Datei oder Datenbank – was ist schneller?

Wer kein CMS oder fertiges Script zum cachen nutzt, muss hier selbst ran. Dabei stellt sich die Frage, welche Möglichkeit zum cachen es gibt, welche einfacher bzw. effizienter ist.

Beachte bitte, dass du Platzhalter bspw. für Hinweistexte und PHP POST-Ereignisse nutzt. So kannst du trotzdem noch gecachte Seiten wärend eines POST-Ereignisses nutzen.

Wir schweifen ab. Zurück zur effektiveren Nutzung von CSS!

Nutze CSS, statt Bilder!

Mitlerweile ist CSS mächtig geworden. So ziemlich jeder Browser kann alles bereits richtig interpretieren. Zwar gibt es zwischen den Giganten Mozilla Firefox, Microsoft Edge (früher: Internet Explorer) und Google Chrome hier und da Unterschiede, das meiste ist jedoch maginal. Mit CSS ist so einiges möglich, wo man noch vor einigen Jahren Bilder für gewünschte Effekte nehmen musste.

Auch hier gilt: CSS ist besser, als Bilder zu nutzen. Bilder bedeuten Dateiaufrufe und dementsprechend Ladezeit. Und CSS-Anweisungen sind von der Speichergröße deutlich kleiner als Bilder.

Das kannst du mit CSS machen, ohne Bilder (wie früher) zu nutzen:

Tipp: Lieber 2kb CSS Code, als 250 kb große Bilder, welche meist mit CSS auch noch ausgerichtet und skaliert werden müssen. Verwendest du viele Icons und andere Einzelbilder, schaue dir CSS Sprites. Bleiben wir kurz bei Bilder: Bei kleinen Bildern teste, nur den Bildcode (base64 kodiert) zu speichern, anstatt das Bild per HTTP-Request zu laden (mehr Infos in den Quellenangaben unten).

Anzeige

Inline-Style

Es gibt weit auseinandergehende Meinungen darüber, CSS Code direkt per Style-Attribut eines HTML Tags einzubinden. Und das ist auch berechtigt. Schauen wir uns einmal den Code an und diskutieren anschließend darüber:

Style-Attribut nutzen? Vor- und Nachteile:

Tipp: Geh sparsam und mit Bedacht mit inline-styles um.

Style-Klassen besser nutzen (Tricks)

Klassen sind dafür da, um Style-Anweisungen für mehrere HTML-Elemente nutzbar zu machen. Mit IDs, welche nur einmalig für ein Element vergeben werden dürfen, entsteht oft Mehrfachcode – sprich hier wird gern bei Anfängern kopiert und kopiert. Unnötig.
CSS hat den Vorteil, dass du Vererbungen vom Eltern zum Kindelement nutzen kannst. Das spart ebenfalls viel CSS Code.

Beispiel für Vererbungen:

Das DIV mit der ID „rot“ erhält die Textfarbe rot. Das enthaltende span-Element bekommt ebenfalls die Textfarbe rot.
CSS Eigenschaften vererben „von Haus aus“, wenn es Sinn ergibt. Und wenn keine Vererbung vorgesehen, hilft interit. Beispiel: padding: inherit

Anzeige

Der Universalselektor *

Mit dem Selektor * können alle HTML-Tags angesprochen werden. Man spricht von Universalselektor, da er für alle Elemente greift. Egal ist auch, ob es sich um ein Inline- oder Blockelement handelt.

Der Beispiel-Einsatz mit dem CSS Universalselektor:

Erläuterung:

Durch den Universalselektor sparst du jede Menge Code. Ebenfalls kann dieser Selektor verschachtelt werden (Vererbung).

Erläuterung:

Alle Elemente innerhalb jedes DIV-Tags werden angesprochen. Im Beispiel mit der Textfarbe blau. Du könntest natürlich auch eine Klasse nutzen. IDs machen hier keinen Sinn.

Unnötige Leerzeichen und Zeilenumbrüche meiden

Wer ein CMS nutzt, welches Plugins / Add-Ons nutzen kann, wird sicher etwas zum minimieren von CSS Code finden. Für WordPress gibt es ein Minify Plugin an, welches CSS und JavaScript Code minimiert.
Hat man die Möglichkeit nicht, kann man das auch selbst machen. Und am besten gleich eine sparsame Programmierschreibweise angewöhnen.

Versuche unnötige Leerzeichen und Zeilenumbrüche zu meiden.

Beispiel eines minifizierten CSS-Codes:

Die Schreibweise ist inline – erlernbar und trotzdem noch sauber. Es spart vorallem bei größeren CSS-Dateien einige kB Speicherplatz und verringert die Ladezeit.

Es geht noch sparsamer, die jedoch nicht effektiv bei der Entwicklung genutzt werden können:

Empfehlung:

Minimierst du komplett ohne Zeilenumbrüche, solltest du beispielsweise mit PHP eine separate Datei erstellen lassen. Ersetzen kannst du Zeilenumbrüche mit str_replace() wunderbar.

Bei CSS und auch JavaScript gibt es keine mir bekannten Komplikationen beim entfernen aller Zeilenumbrüche. Bei HTML-Code gibt es hingegen negative Folgen.
Ausschließen sollte man natürlich gewollte Zeilenumbrüche. Hier heißt es einfach testen.

Beachte bitte beim zusammenfassen von CSS, dass die Reihenfolge beibehalten bleibt. Sonst können sich Eigenschaften ungewollt überschreiben. An dieser Stelle auch gleich noch zu JavaScript: Dateien können Abhängigkeiten untereinander aufweisen. Auch hier kann die Reihenfolge der Einbindung eine Rolle spielen. Und wieder heißt es: testen!

Entwickler-Tools der Browser Firefox, Chrome und das Add-On FireBug zum prüfen der Ladezeit und Laufzeitanalyse

Um effektiver die eigene Webseite zu verstehen, kommt man um ein speziell dafür zugeschnittenes Programm nicht herum. Vorallem für denjenigen, der ein CMS wie WordPress nutzt, ist ein Blick in z.B.: FireBug informativ. Auch gehen die Entwickler-Tools des Browsers selbst ziemlich gut. Im unteren Screenshot siehst du das Development Tool, welches in Firefox bereits integriert ist. Chrome hat etwas sehr ähnliches.
Durch eine Laufzeitanalyse siehst du, was beim laden und benutzen der Webseite eigentlich so alles ausgeführt und geladen wird.

CSS Style Dateien geladen – Analyse mit dem Firefox Web-Entwickler / Netzwerkanalyse

Das kann FireBug und die Entwickler-Tools von Firefox und Chrome:

Quellen und weitere Informationen

Fazit

Speicherplatz und Ladezeit lässt sich an sehr vielen Stellen der Webseite sparen. Für alle altbekannten Probleme gibt es heute moderne und bessere Möglichkeiten. CSS löste viele umständliche Webdesigns ab. Beispiel: Bilder als abgerundete Ecken, Farbübergänge oder Tabellen zum Webdesign.

Hat man alle wichtigen Optimierungen am CSS-Code getroffen, so kann es weiter gehen. JavaScript Code kann ähnlich behandelt werden und HTML Code kann ebenso gut optimiert werden.

Hat dir dieser Artikel geholfen? Gibt es deiner Meinung nach noch mehr Optimierungspotential? Hinterlasse ein Kommentar!

Tags: , , , , , , ,

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.