CSS-Minifizierung

Silktide prüft, ob die Stylesheets, die Ihre Seite lädt, minifiziert wurden – also so umgeschrieben, dass überflüssige Leerzeichen, Kommentare und Wiederholungen entfernt werden, die nur für Menschen beim Lesen des Codes relevant sind. Nicht minifizierte Stylesheets sind größer als nötig und verlangsamen das Erscheinen der Seite.

ändert nichts am Aussehen der Seite. Zum Beispiel:

\/* Vor der Minifizierung: gut lesbar, aber schwergewichtig *\/
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

\/* Danach: identisches Ergebnis, nur ein Bruchteil der Größe *\/
h1,h2{background-color:#000}

Warum das wichtig ist

Stylesheets blockieren in der Regel das Rendering: Der Browser lädt das der Seite, bevor überhaupt etwas angezeigt wird. Jedes unnötige Byte in einem Stylesheet verlängert daher unmittelbar die Leerlaufzeit, bevor Ihre Seite erscheint. Durch Minifizierung wird die Größe von Stylesheets üblicherweise deutlich reduziert – und diese Einsparung fällt bei jedem Besuch und jedem nicht im Cache befindlichen Seitenaufruf erneut an.

Da die Minifizierung automatisiert ist und das Verhalten nicht verändert, sind unminifizierte Stylesheets in der Produktion fast immer ein Versehen: ein übersprungener Build-Schritt oder versehentlich bereitgestellte Entwicklungsdateien.

So beheben Sie das

Aktivieren Sie die CSS-Minifizierung im Build-Prozess der Website. Jedes moderne Build-Tool enthält einen Minifier, der in Produktions-Builds meist standardmäßig aktiviert ist.
Wenn die Website keinen Build-Prozess hat, prüfen Sie das : Die meisten bieten eine Einstellung oder ein Plugin, das Stylesheets automatisch minifiziert.
Als letzte Option lassen Sie die Dateien vor dem Hochladen durch einen eigenständigen Minifier laufen. Bewahren Sie die gut lesbaren Originale auf – diese bearbeiten Sie, und veröffentlichen die minifizierten Ausgaben.
Gehört ein gemeldetes Stylesheet einem Drittanbieter, prüfen Sie, ob es eine minifizierte Version gibt – das ist in der Regel der Fall.

So testet Silktide dies

Silktide lädt die Seite in einem echten Browser, unter Verwendung von Gerätetyp, Verbindungsgeschwindigkeit und Teststandort, die für Ihre Geschwindigkeitstests konfiguriert sind.
Jedes von der Seite geladene Stylesheet wird untersucht und geschätzt, wie viel kleiner es durch Minifizierung wäre.
Alle Dateien mit einer nennenswerten möglichen Einsparung werden gemeldet, und die Seite wird nach der Gesamtsumme bewertet: Etwa 50 KB potenzielle Einsparung führen zu einer Abwertung, und 250 KB oder mehr gelten als schlecht.

Fehlerbehebung

Die Datei wirkt bereits minifiziert

Minifier unterscheiden sich in ihrer Aggressivität, daher kann auch ein leicht komprimiertes Stylesheet noch spürbare Einsparungen enthalten. Die Prüfung gibt an, um wie viel kleiner die Datei sein könnte; das Durchlaufen durch einen aktuellen Minifier erfasst die Differenz in der Regel.

Wir brauchen lesbare Styles zum Debuggen

Bewahren Sie lesbare Quelldateien in Ihrem Projekt auf und debuggen Sie mit Source Maps. Diese ermöglichen es den Entwicklerwerkzeugen des Browsers, die ursprünglichen Styles anzuzeigen, während Besuchende die minifizierte Version erhalten. Sie müssen niemals lesbaren Code ausliefern, um lesbares Debugging zu erhalten.