In 5 Schritten CSS-Dateien aufräumen & eine schnelle Webseite erhalten

Viele Content Management Systeme bringen sie voreingestellt mit und sie sollen ein Teil der Arbeit von Webentwicklern abnehmen. Die Rede ist von CSS-Dateien und darin enthaltenen zahllose Selektoren, die meist nie verwendet werden. Auch bei gänzlich selbst erstellten CSS-Dateien kommen mit der Zeit immer mehr Anweisungen hinzu, was nicht zuletzt auch der Weiterentwicklungen von Webbrowsern geschuldet ist. Der anfangs sauber strukturierte Aufbau kann dadurch mit der Zeit abhandenkommen. Auch aufgrund der Mitarbeit von mehreren Personen an einem Projekt werden CSS-Dateien schnell unübersichtlich. Mit der Zeit sammeln sich immer mehr Selektoren an, die u.U. redundant sind oder durch Anpassungen nicht mehr genutzt werden. Für Webentwickler sind sie dadurch schwerer zu handhaben. Weiterhin kann sich dies auf das Ladeverhalten der Webseite auswirken. Früher oder später müssen die vorhandenen CSS-Dateien aufgeräumt werden – wie das am effektivsten geht erfahrt ihr hier.CSS säubern in 5 Schritten - mit Dust-MeAbb.01: CSS Dateien regelmäßig aufzuräumen führt zu schnellen Webseiten

Was ist CSS?

Im Bereich der Webentwicklung sollte das Credo sein, Inhalte und Design zu trennen. Genau das tut man u.a. mit CSS, den Cascading Style Sheets. Während im HTML die Inhalte platziert und ausgezeichnet werden, legt man im CSS fest welches Aussehen sie bekommen oder in welcher Reihenfolge sie wo angezeigt werden. Das kann im HTML selbst erfolgen oder über externe Dateien, die im HTML-head Bereich eingebunden werden. Aus SEO-Gesichtspunkten und aufgrund einer schlanken HTML-Struktur sind externe Dateien, die per link-Tag eingebunden werden, vorzuziehen.

Wie kann man saubere CSS-Dateien erhalten?

Mitunter kann es eine sehr komplexe Herausforderung darstellen, alle genutzten CSS-Dateien auf nicht vorhandene Elemente zu prüfen. Ein Grund weshalb man mit einer manuellen Auswertung schnell an Grenzen stößt: Auf unterschiedlichen Seitentypen kommen jeweils andere Style-Elemente zum Einsatz. Wie so oft schafft auch hier ein Tool Abhilfe; es heißt „Dust-Me“.

Das Firefox-Plugin Dust-Me findet ungenutztes CSS

Mit dem Firefox Plugin Dust-Me werden automatisch nicht verwendete CSS-Elemente identifiziert und ausgewertet. Das Plugin analysiert dazu jede per link-Tag eingebundene CSS-Datei und vergleicht die enthaltenen Selektoren. Auf den unterschiedlichen Seitentypen werden nicht immer die gleichen CSS-Elemente oder CSS-Dateien genutzt. Deshalb kann man eine erweiterte Funktion von Dust-Me nutzen und eine XML-Sitemap als Crawling-Vorlage verwenden.

Eine XML-Sitemap zur Unterstützung nutzen

Als Crawling-Grundlage für Suchmaschinen stellt jeder gute Webmaster XML-Sitemaps bereit. Falls nicht, ist das ein Grund sie jetzt anzulegen und jede erreichbare URL zu hinterlegen. Anhand dieser Sitemap crawlt Dust-Me jede aufgeführte URL, ruft die verwendeten CSS-Dateien ab und vergleicht die Selektoren automatisch miteinander.

CSS-Dateien automatisch auf ungenutzte Elemente prüfen – So geht’s

1. Dust-Me für Firefox herunterladen
Dust-Me für FirefoxAbb.02: Das Firefox Plugin Dust-Me hilft ungenutztes CSS zu identifizieren
2. In der AddOn-Leiste sichtbar machen (falls inaktiv)
AddOn-Leiste im Firefox aktivierenAbb.03: Um die erweiterte Funktion zu nutzen muss die Firefox AddOn-Leiste angezeigt werden
3. XML-Sitemap auf dem Server zur Verfügung stellen…
Dust-Me Funktion Sitemap spidern auswählenAbb.04: XML-Sitemap spidern auswählen
4. …URL in Dust-Me eingeben und spidern lassen
Sitemap-URL in DustMe eingebenAbb.05: Sitemap-URL eingeben und losspidern lassen
5. Ergebnis herunterladen und ungenutzte CSS-Selektoren aus den Stylesheets entfernen
ungenutzte CSS-SelektorenAbb.06: Die Übersicht der ungenutzten CSS-Selektoren zum herunterladen

Aufschrei der Webentwickler

Daten die zur Darstellung der Webseite dienen einfach löschen? Was, wenn das Tool unsauber arbeitet und falsche Daten liefert? Natürlich kann man eine falsche Datenermittlung durch Dust-Me nicht ausschließen. Wer allerdings eine sauber aufgesetzte Testumgebung betreibt und diese auch zu nutzen weiß, kann bereits vor dem Livegang Fehler ausschließen.
Eine andere Ausrede, um keine Änderungen vorzunehmen ist häufig auch: Was wenn die die Styles doch irgendwann mal gebraucht werden? Ganz ehrlich, solche Menschen haben noch nicht erkannt wie der Hase läuft. Wenn diese CSS-Anweisungen irgendwann mal gebraucht werden, werden sie sowieso irgendwann bearbeitet und können an diesem „irgendwann“ auch so implementiert werden.

SEO-Newsletter bestellen

Gibt es Alternativen zu Dust-Me?

Dust-Me kann derzeit nur für den Firefox verwendet werden. In CSS werden häufig aber auch Angaben für bestimmte Browser hinterlegt, weshalb nicht alle gefundenen Elemente blind gelöscht werden sollten. Als Alternative bietet sich das von geuis entwickelte Tool Helium an. Helium ist eine JavaScript-Integration zur Erkennung von nicht verwendetem CSS. Es wurde in Chrome entwickelt und kann nach derzeitigem Stand in Chrome, Firefox und Safari genutzt werden. Hier ist jedoch Entwickler-Aufwand nötig, da die Ausgabe der ungenutzten CSS-Selektoren auf der Seite selbst geschieht und Helium somit nur auf Testumgebungen angewendet werden sollte.

Und ihr so?

Mir sind keine weiteren Tools bekannt, die ungenutztes CSS in dieser Weise automatisiert erkennen. Mich würde deshalb interessieren, ob ihr schon einmal CSS-Dateien aufgeräumt habt und wie ihr dabei vorgegangen seid. Kam eines der genannten Hilfsmittel zum Einsatz oder seid ihr ganz anders vorgegangen? Zwar kann man mit JavaScript Integrationen, wie UnCSS, arbeiten, das bedeutet allerdings Entwicklungungsaufwand. Ich freue mich auf regen Erfahrungsaustausch!

In 5 Schritten CSS-Dateien aufräumen & eine schnelle Webseite erhalten
4.67 (93.33%) 9 votes
Danny Behne
Danny Behne () ist als SEO Consultant mit für den Auf- und Ausbau der SEO- & Online-Marketing-Strategien innerhalb der mediaworx berlin AG verantwortlich. Trotz oder vor allem wegen seines Daseins als Vollblut SEO, ist er ein Gedankenspieler der gerne auch mal eine Kamera in die Hand nimmt.
You may also like
AMP in der SERP
5 AMP-Plugins für WordPress im Vergleich
SERPrio – Tool zur Priorisierung von Content
10 Kommentare
  • 16 Apr 2017 at 13:56

    […] Natürlich kannst du dein CSS auch komprimieren und verkürzen. Das hat allerdings einen Nachteil. Die Datei wird dadurch zusehends schwerer lesbar, das ist lästig wenn man in ihr arbeiten will oder muss. In 5 Schritten CSS-Dateien aufräumen & eine schnelle Webseite erhalten […]

    • 24 Apr 2017 at 10:00

      Die CSS-Datei, die komprimiert und optimiert „verarbeitet“ werden soll, muss nicht (für den Entwickler) lesbar sein. Dafür solltest du eine unkomprimierte CSS-Datei auf deiner Entwicklungsumgebung zur Verfügung haben. Das bedeutet allerdings nicht, dass die komprimierte CSS-Version nicht noch einer Qualitätssicherung unterzogen werden muss.

  • 15 Sep 2016 at 09:36

    Nach der Installation von dust-me und Neustart finde ich in meinem FF keine Möglichkeit das Tool zu aktivieren, unter Ansicht | Symbolleiste findet sich kein neuer Punkt Addon-Leiste. Was tun?
    MfG US

    • Danny Behne
      16 Sep 2016 at 13:50

      Mit dem Plugin „Classic Theme Restorer“ kann man die Addon-Leiste wieder sichtbar machen. Der FF sieht danach allerdings etwas anders aus, aber dust me sollte dann neben der Adressleiste sichtbar sein.

  • Andreas Oehrl
    18 Jul 2016 at 09:41

    Das funktioniert bei mir nicht.

  • Godteri
    3 Dez 2014 at 12:58

    Vielen Dank für die Aufklärung. Aber gerade bei komplexen Seiten (z.B. shops) ist es schwer, ungenutzten Code zu finden. Denn jede Seite benötigt andere Elemente. Habt ihr da vielleicht eine Idee?

    • Danny Behne
      15 Dez 2014 at 17:04

      Genau das ist in dem Artikel unter dem Abschnitt „Eine XML-Sitemap zur Unterstützung nutzen“ beschrieben. Dadurch kann Dust-Me potentiell alle Seitentypen crawlen (wenn sie in der Sitemap hinterlegt sind) und die ungenutzten Elemente identifizieren.

  • 1 Dez 2014 at 11:41

    Hallo Danny,
    ich möchte bald auf itslot.de ein neues Responsive Template daraufspielen, und wollte auch mit dem Plugin Dust-Me unbenutzten im Vorab Code löschen.
    Aber, da gibt es ein Problem: Der Dust-Me Plugin analysiert ja die normale Version von der Webseite, er nimmt nicht in Kauf, dass für mobile Geräte ein anderes Design angezeigt wird und könnte ja vorschlagen, den Code zu löschen.
    Oder verstehe ich das Analyse-Prinzip von Dust-Me falsch?
    Grüße
    Sergej

    • Danny Behne
      1 Dez 2014 at 11:52

      Hallo Sergej,

      deine Annahme ist vollkommen richtig. Wie erwähnt analysiert Dust-Me auch nur für Firefox verwendete Styles und so kommt es bereits browserübegreifend zu Unstimmigkeiten. Um aber bei deinem Problem anzusetzen: Um die CSS für Desktop- und mobile-Anfragen zu optimieren, ist es besser für jede Möglichkeit (Desktop, Smartphone/Feature-Phone und ggf. Tablet) eine separate CSS-Datei anzulegen und nur diese beim jeweiligen Aufruf zu laden. So kannst du mit unterschiedlichen User-Agents die Seite aufrufen (bspw. mit dem Firefox Plugin User Agent Switcher) und Dust-Me laufen lassen. An der Stelle greift dann aber leider nicht mehr die Möglichkeit die XML-Sitemap zu crawlen, außer du bietest eine dedizierte mobile Seite. Hier muss man händisch ein wenig in Excel nacharbeiten.

      • itslot Blogger
        1 Dez 2014 at 13:04

        Hallo Danny,

        vielen Dank für deine Tipps.
        Über separate CSS Dateien habe ich auch gedacht.
        Mein Blog wird auf blogger.com gehostet. Bei blogger.com wird der ganze CSS Code in der Regel in die Template-Datei eingepackt (es gibt nur eine Datei). Wenn ich eine separate CSS Datei haben will, soll ich es irgendwo extra hosten (dropbox, googledrive, etc.) was ich nicht mag. Deswegen wurde der Code manuell geprüft und gereinigt.
        Aber dieser Plugin könnte auch dabei helfen. Ein guter Artikel.

Deine Meinung ist gefragt

Deine Meinung*

Dein Name*
Deine Seite