Talk is about CSS minification problem, how minifiers work, new advanced optimisations, how minification influences on performance, CSSO reborn and future plans.

1. CSSO — compress CSS
Roman Dvornov
Avito
Minsk 2016

2. Working at Avito
Building SPA
Author of basis.js
Maintainer of CSSO

3. 3
Don't expect happy end

4. CSS-minifiers aren't needed!

5. It's a joke… or maybe not
CSS-minifiers aren't needed!

6. 5
Fast
browsers
Heavy
sites

7. 5
Fast
browsers
Heavy
sites
a lot of CSS – compression needed

8. What tool to choose?

9. 7
cssnanocsso clean-css
YUI Compressor fork
ycssmin
Heroes of the day

10. 7
cssnanocsso clean-css
YUI Compressor fork
ycssmin
Heroes of the day

11. 7
cssnanocsso clean-css
YUI Compressor fork
ycssmin
Heroes of the day

12. 7
cssnanocsso clean-css
YUI Compressor fork
ycssmin
Heroes of the day

13. 7
cssnanocsso clean-css
YUI Compressor fork
ycssmin
Heroes of the day

14. 7
cssnanocsso clean-css
YUI Compressor fork
ycssmin
Heroes of the day

15. 7
cssnanocsso clean-css
YUI Compressor fork
ycssmin
Heroes of the day

16. 7
cssnanocsso clean-css
YUI Compressor fork
ycssmin
Heroes of the day

17. 8
There are much more minifiers
but not so famous or
not in active developing

18. Let's compare

19. 10
clean-css 3.4.9 cssnano 3.5.2 csso 2.0.0
bootstrap.css
147 427 bytes
118 186
273 ms
117 440
1 813 ms
117 756
169 ms
foundation.css
200 341 bytes
142 667
389 ms
145 030
1 983 ms
144 262
222 ms
normalize.css
7 707 bytes
1792
5 ms
1824
17 ms
1 831
4 ms
reset.css
1 092 bytes
758
3 ms
773
13 ms
747
3 ms
goalsmashers.github.io/css-minification-benchmark/

20. It looks like…

21. Libraries are written well,
real CSS is not
12

22. 13
clean-css 3.4.9 cssnano 3.5.2 csso 2.0.0
ActiAgent.ru
602 233 bytes (5 month ago)
430 240
1 077 ms
439 024
23 270 ms
435 588
531 ms
ActiAgent.ru
822 021 bytes (now)
587 906
1 705 ms
604 503
48 550 ms
595 834
616 ms
gzip compression factor is 8 (~72Kb)
That means the result can be improved!
Our numbers

23. Minification

24. Every minifier works the same way

25. Basic minification
• Deletion
• Replacement
• Structural optimization
16

26. You may think that
CSS minification is all about
W3C specifications
17

27. In fact sh*t happens all the time

28. That's why
• Specs are changing
• Various browser support of CSS
• Browser's bugs
• CSS hacks
19

29. Most important
Minification shouldn't
break or repair the CSS
20

30. Deletion

31. What to delete
• Whitespaces and comments (most part of saving)
• Rules with wrong selectors
• Empty rules
• Wrong declarations
• Malposed @import, @charset
• …
22

32. Always respect specifications
23

33. 24
calc(4 * 2em - 10% / 3)
Original CSS
Wrong
calc(4*2em-10%/3)
Correct
calc(4*2em - 10%/3)
Whitespace deletion

34. More examples
• Units for zero dimensions
0px ! 0
• Quotes
[attr="name"] ! [attr=name]
url('image.png') ! url(image.png)
• …
25

35. But it's not so simple
• 0px ! 0
correct
26

36. But it's not so simple
• 0px ! 0
correct
• 0deg ! 0
wrong, not a length unit
26

37. But it's not so simple
• 0px ! 0
correct
• 0deg ! 0
wrong, not a length unit
• flex: 1 0 0px ! flex: 1 0 0
wrong, doesn't work as expected in IE
26

38. Replacement

39. Replace with shorter forms
28

40. Most interesting: colour
• hsl ! rgb, hsla ! rgba
• rgb(100%, 0, 0) ! rgb(255, 0, 0)
• rgba(a, b, c, 1) ! rgb(a, b, c)
• normalize: rgb(500, -100, 0) ! rgb(255, 0, 0)
• rgb(255, 0, 0) ! #ff0000
• #aabbcc ! #abc
• #ff0000 ! red, darkslateblue ! #483d8b
29

41. More examples
• Number normalization: 0.00 ! 0 or 0.123 ! .123
• Special values for some properties
• font-weight:bold ! font-weight:700
• background:none ! background:0 0
• from ! 0%, 100% ! to for @keyframes
• …
30

42. Isn't effective actually

43. Structural optimization

44. Merging and moving
declarations and rules
33

45. The most complicated and expensive
optimization

46. 35
.foo {
color: red;
color: green;
}
.foo {
color: green;
}
Declaration deletion
color: red has never to be used by browser –
can be deleted

47. Let's check
Are you a proper minifier or not? ;)
36

48. 37
.foo {
color: red;
color: rgba(…);
}
.foo {
color: rgba(…);
}
Deletion of declarations
Correct?

49. 37
.foo {
color: red;
color: rgba(…);
}
.foo {
color: rgba(…);
} Wrong
Old browsers
don't support rgba()
Deletion of declarations
Correct?

50. 38
.foo {
color: red;
}
.bar {
color: green;
}
.qux {
color: red;
}
.foo, .qux {
color: red;
}
.bar {
color: green;
}
Regrouping
Correct?

51. 38
.foo {
color: red;
}
.bar {
color: green;
}
.qux {
color: red;
}
.foo, .qux {
color: red;
}
.bar {
color: green;
}
Wrong
Different results, e.g.
<div class="bar qux">
Regrouping
Correct?

52. 39
span {
color: red;
}
div {
color: green;
}
ul {
color: red;
}
span, ul {
color: red;
}
div {
color: green;
}
Regrouping
Correct?

53. 39
span {
color: red;
}
div {
color: green;
}
ul {
color: red;
}
span, ul {
color: red;
}
div {
color: green;
}
Correct,
elements have a single name
Regrouping
Correct?

54. 40
.foo {
color: red;
}
span {
color: green;
}
.bar {
color: red;
}
.foo, .bar {
color: red;
}
span {
color: green;
}
Regrouping
Correct?

55. 40
.foo {
color: red;
}
span {
color: green;
}
.bar {
color: red;
}
.foo, .bar {
color: red;
}
span {
color: green;
}
Correct,
different specificity –
order doesn't matter
Regrouping
Correct?

56. 41
.foo {
color: red;
}
.bar:not(.baz) {
color: red;
}
.foo,
.bar:not(.baz) {
color: red;
}
Regrouping
Correct?

57. 41
.foo {
color: red;
}
.bar:not(.baz) {
color: red;
}
.foo,
.bar:not(.baz) {
color: red;
}
Regrouping
Correct?
Old browsers
don't support :not()
Wrong

58. 42
.foo {
color: red;
width: 100px;
}
.bar {
color: green;
width: 100px;
}
.foo, .bar {
width: 100px;
}
.foo {
color: red;
}
.bar {
color: green;
}
Moving common parts aside

59. Moving direction matters
43

60. 44
.foo {
color: red;
}
.bar {
color: red;
color: rgba(..);
}
.foo, .bar {
color: red;
}
.bar {
color: rgba(..);
}
Moving common parts aside
In this case only moving up is correct

61. 45
.foo {
color: rgba(..);
}
.bar {
color: red;
color: rgba(..);
}
.bar {
color: red;
}
.foo, .bar {
color: rgba(..);
}
Moving common parts aside
In this case only moving down is correct

62. Too many things
minifier should respect…
46

63. Basic optimization summary
• Common approaches
• Usually whitespace deletion is most effective
• Many hacks and edge cases
• Every minifier has bugs
47

64. Advanced optimizations

65. Usage data
Usage data

66. 50
.foo {
color: red;
}
.bar {
color: green;
}
.qux {
color: red;
}
.foo, .qux {
color: red;
}
.bar {
color: green;
}
This transformation isn't safe,
since we don't know
how CSS is used in markup
Example

67. But what if we knew?
51

68. Filtering

69. 53
{
"classes": ["foo", "bar"],
"tags": ["ul", "li"]
}
.foo { color: red }
div.bar { color: green }
ul li, ol li { color: blue }
usage.json
CSS
+ .foo { color: red }
ul li { color: blue }
Result

70. Scopes

71. 55
.module1-foo { background: red; }
.module1-bar { font-size: 1.5em; background: yellow; }
.module2-baz { background: red; }
.module2-qux { font-size: 1.5em; background: yellow; width: 50px; }
Rules with .module1-foo and .module2-baz
can't be merged,
since .module1-bar is between them

72. 56
.module1-foo { background: red; }
.module1-bar { font-size: 1.5em; background: yellow; }
.module2-baz { background: red; }
.module2-qux { font-size: 1.5em; background: yellow; width: 50px; }
Rules merge is safe only if we sure that class
names are never applied to a single element

73. Usage data
57
{
"scopes": [
["module1-foo", "module1-bar"],
["module2-baz", "module2-qux"]
]
}
With this JSON we explain to optimizer that
module1-* and module2-* class names
are never applied to a single element

74. The basic minification result (157 bytes)
58
.module1-foo,.module2-baz{background:red}
.module1-bar,.module2-qux{font-size:1.5em;background:#ff0}
.module2-qux{width:50px}
34 bytes extra saving
.module1-foo{background:red}.module1-bar{font-size:
1.5em;background:#ff0}
.module2-baz{background:red}.module2-qux{font-size:
1.5em;background:#ff0;width:50px}
The result with usage data (123 bytes)

75. 59
Feature is already available in CSSO!

76. Profit for our project
• 823 Kb Original CSS
• 596 Kb Basic optimization
• 437 Kb Optimization with usage data
60
159 Kb extra saving (26%)

77. How to generate usage data?
61
There is no universal solution –
it depends on the technology stack
It is expected such tools will be created soon

78. Rename
Rename

79. 63
.foo { color: red }
.foo.bar { color: green }
.a { color: red }
.a.b { color: green }
{
"foo": "a",
"bar": "b"
}
Rename map
Result
CSS
+

80. 64
• 823 Kb Orignal CSS
• 596 Kb Basic optimization
• 385 Kb Rename (currently outside CSSO)
211 Kb of extra saving (35%)
Profit for our project

81. 65
364Kb of extra saving (61%)
All together
• 823 Kb Original CSS
• 596 Kb Basic optimization
• 232 Kb Rename + Usage data

82. Should it be a part of minifier?
66
Yep, because it leads
to a new optimization

83. 67
.foo,
.bar {
color: red;
}
.foo:hover,
.bar:hover {
color: green
}
.a { color: red }
.a:hover { color: green }
{
"foo": "a",
"bar": "a"
}
Rename map
ResultCSS
+
The single new name for old two
names – reduce selector count

84. Nobody writes this sort of CSS…
68

85. 69
.foo {
color: red;
}
.foo:hover {
color: green
}
.bar {
color: red;
}
.bar:hover {
color: green
}
ResultCSS + usage data
.foo,
.bar {
color: red;
}
.foo:hover,
.bar:hover {
color: green
}

86. In development – coming soon in CSSO

87. 71
• ~10 Kb of extra saving (~3-4%)
• 1431 of 6904 selectors were deleted
Selector count decreased by ~20%
Profit for our project
quick and dirty numbers

88. 72
To compress or not to compress?

89. What is the effect of minification?
73

90. 74
Network
Paint
Parse Stylesheet
Recalculate Style
Layout
How CSS to became an image

91. 75
Network
Paint
Parse Stylesheet
Recalculate Style
Layout
Characteristics of CSS that affect performance
Quantitative characteristics
matters
(size, number of selectors etc.)
Qualitative characteristics
matters
(complexity of layout and effects)

92. 76
Network
Paint
Parse Stylesheet
Recalculate Style
Layout
Automation of enhancement
Compression can give
a positive effect
Currently, have no ideas
how to automate
optimizations

93. 77
Network
Paint
Parse Stylesheet
Recalculate Style
Layout
Network
Solution: gzip, SDCH …
It matters for cold
page load only

94. 78
Network
Paint
Parse Stylesheet
Recalculate Style
Layout
Parse Stylesheet
Solution: use a minifier
Performs every time
on page load
Less text – less to parse

95. Original CSS 823 Kb – 35ms
Basic optimisations 596 Kb – 29ms
Rename 385 Kb – 24ms
Rename + usage data 232 Kb – 22ms
79
Quick and dirty tests
Various level of compression and its influence on Parse Stylesheet
Size is reduced by ~4 times, time by ~40%
(Chrome on MacBook Air)

96. Win10 Desktop 19ms → 11ms
Nexus 5X 68ms → 44ms
Samsung Galaxy Note 2 158ms → 108ms
80
Quick and dirty tests
On other devices there were more encouraging numbers
CSS 316Kb 215Kb (-39.5%)
+ usage data

97. 81
Network
Paint
Parse Stylesheet
Recalculate Style
Layout
Recalculate Style
Solution: rename etc.
Performs every time on page
load and on any DOM
mutation
We've hypotheses only,
more details when feature
will be shipped in CSSO ;)

98. To compress or not to compress?
82

99. To compress or not to compress?
82
Yes!
But it's still a subject for research

100. CSSO reborn

101. What was changed
• 10+ times faster
• 8+ times less memory consumption
• Fixed most of bugs
• Better code base and API
• More downloads and stars on GitHub ;)
84

102. 85
1 300 000+ downloads per month
9x since October 2015

103. Compressiontime(600KbCSSfile)
500 ms
1 000 ms
1 500 ms
2 000 ms
2 500 ms
3 000 ms
3 500 ms
4 000 ms
4 500 ms
5 000 ms
5 500 ms
6 000 ms
CSSO version
1.4.0 1.5.0 1.6.0 1.7.0 1.8.0 2.0
1 050 ms
clean-css
Performance changes
csso
500 ms
cssnano
23 250 ms

104. postcss-csso
87
Plugin for PostCSS
As fast as CSSO alone
Under the hood the plugin converts PostCSS AST into CSSO
format, optimises it and converts back
github.com/lahmatiy/postcss-csso

105. New features
• Source Maps
• Usage data
• Support for new parts of CSS
• User friendly error messages
• Support for stdin
• New AST format
88

106. Plans

107. Main goal is to build the best CSS optimizer

108. Coming soon
• New algorithms and optimizations
• Browser support modes
• Property families and declaration sorting
• Name normalization and renaming
• Shorthand properties structure recognition
• And more…
91

109. Conclusion

110. Like CSS, read specs

111. 94 Try CSSO :)

112. 95
All new around CSSO – @cssoptimizer

113. Roman Dvornov
@rdvornov
rdvornov@gmail.com
Any questions?
github.com/css/csso