Wenn Sie gzip nach der CSS-Komprimierung verwenden (wie es von den meisten Leistungsrichtlinien vorgeschlagen wird), haben Sie andere Ergebnisse, da die Ausgabe der CSS-Komprimierung besser zipbar ist.
Die CSS-komprimierte Version ist 85 Bytes nach gzip und Ihre ist 89 Bytes nach gzip.
Wenn Sie gzip nach der CSS-Komprimierung verwenden, gewinnt der Code aus den Tools. Außerdem ist das Ergebnis mehr wie der ursprüngliche Code, der weniger Platz für Fehler aufgrund von Überoptimierung bei der Unterbrechung Ihres CSS lässt.
Allerdings gewinnt Ihr CSS-Code in der entpackten Version mit 71 Bytes.
Die von Ihnen vorgenommene Optimierung hat einen sehr lokalisierten Anwendungsfall, bei dem die Selektoren in der CSS-Datei nebeneinander liegen.
Einige Beispielgeigen, die das Problem zeigen:
%Vor%Ich habe einige CSS-Kompressoren getestet und um ehrlich zu sein bin ich enttäuscht. Vielleicht habe ich einfach die falschen ausprobiert?
Ausgangspunkt war der folgende, absichtlich schlechte CSS-Code:
%Vor%Das ist, ziemlich offensichtlich, Unsinn beim Deklarieren von 2 von 3 Eigenschaften in beiden Klassen und ergibt 185 Bytes Code. Wenn Sie es besser manuell schreiben, würde es wie
aussehen %Vor%was ein bisschen kleiner ist (149 Bytes) oder sogar
%Vor%was 133 Bytes vor und
ist %Vor%nur 71 Bytes nach der Komprimierung. Dies wäre 100/185 * 71 = 38,3% der ursprünglichen Größe.
Was alle Kompressionen jedoch taten :
%Vor%was 100 Bytes ist.
Natürlich würden Sie in einer idealen Welt einfach besseren CSS-Code aus erster Hand schreiben, aber das ist nicht einfach, wenn Sie größere Dateien schreiben und fast unmöglich, wenn Sie irgendwelche Frameworks verwenden.
Gibt es also bessere Tools, die für den obigen Beispielcode etwa 71 Bytes ergeben?
Die Komprimierung mag unbedeutend erscheinen, aber was erwarten Sie sonst noch? Jede Art von CSS-Komprimierung, die Sie sich ausdenken können, wird Sie nur so weit bringen, bevor Sie Ihren Code verändern.
CSS ist schließlich nicht eine Programmiersprache.
Gzip die Dateien
Indem die .css-Datei auf Bargaineering gezippt wurde, fiel ihre Größe von 28,2 K auf 7,3 K, was einer Ersparnis von 74,1% entspricht. Die Reaktionszeit für diese Datei ging von 53 ms auf 39 ms, was einer Ersparnis von 26,4% entspricht.
Ich habe einige CSS-Kompressoren getestet und um ehrlich zu sein bin ich enttäuscht. Vielleicht habe ich einfach die falschen ausprobiert?
Ausgangspunkt war der folgende, absichtlich schlechte CSS-Code:
%Vor%Das ist, ziemlich offensichtlich, Unsinn beim Deklarieren von 2 von 3 Eigenschaften in beiden Klassen und ergibt 185 Bytes Code. Wenn Sie es besser manuell schreiben, würde es wie
aussehen %Vor%was ein bisschen kleiner ist (149 Bytes) oder sogar
%Vor%was 133 Bytes vor und
ist %Vor%nur 71 Bytes nach der Komprimierung. Dies wäre 100/185 * 71 = 38,3% der ursprünglichen Größe.
Was alle Kompressionen jedoch taten :
%Vor%was 100 Bytes ist.
Natürlich würden Sie in einer idealen Welt einfach besseren CSS-Code aus erster Hand schreiben, aber das ist nicht einfach, wenn Sie größere Dateien schreiben und fast unmöglich, wenn Sie irgendwelche Frameworks verwenden.
Gibt es also bessere Tools, die für den obigen Beispielcode etwa 71 Bytes ergeben?
Wenn Sie gzip nach der CSS-Komprimierung verwenden (wie es von den meisten Leistungsrichtlinien vorgeschlagen wird), haben Sie andere Ergebnisse, da die Ausgabe der CSS-Komprimierung besser zipbar ist.
Die CSS-komprimierte Version ist 85 Bytes nach gzip und Ihre ist 89 Bytes nach gzip.
Wenn Sie gzip nach der CSS-Komprimierung verwenden, gewinnt der Code aus den Tools. Außerdem ist das Ergebnis mehr wie der ursprüngliche Code, der weniger Platz für Fehler aufgrund von Überoptimierung bei der Unterbrechung Ihres CSS lässt.
Allerdings gewinnt Ihr CSS-Code in der entpackten Version mit 71 Bytes.
Die von Ihnen vorgenommene Optimierung hat einen sehr lokalisierten Anwendungsfall, bei dem die Selektoren in der CSS-Datei nebeneinander liegen.
Einige Beispielgeigen, die das Problem zeigen:
%Vor%Die Komprimierung mag unbedeutend erscheinen, aber was erwarten Sie sonst noch? Jede Art von CSS-Komprimierung, die Sie sich ausdenken können, wird Sie nur so weit bringen, bevor Sie Ihren Code verändern.
CSS ist schließlich nicht eine Programmiersprache.