Выступление на конференции DUMP-2016.

1. CSSO — сжимаем CSS
Роман Дворнов
Avito
Екатеринбург 2016

2. Работаю в Avito
Делаю SPA
Автор basis.js
Мейтенер CSSO
За любую движуху,
кроме голодовки ;)

3. 3

4. 4
«Хэппи-энда» не будет

5. 5
Шутка… почти
CSS-минификаторы не нужны!

6. 6
Быстрые
браузеры
«Тяжелые»
сайты
CSS много – нужно сжимать

7. Чем сжимать?

8. 8
cssnanocsso clean-css
YUI Compressor fork
ycssmin
Герои сегодняшнего дня

9. 9
Минификаторов гораздо больше,
но либо не популярны
либо слабо развиваются

10. Сравниваем

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

12. Выглядит как-то так…

13. Библиотеки пишутся
оптимально,
реальный CSS – нет
13

14. 14
clean-css 3.4.8 cssnano 3.4.0 csso 1.8.0
ActiAgent.ru
602 233 байт (5 мес назад)
430 240
1 077 ms
439 024
23 270 ms
435 588
634 ms
ActiAgent.ru
822 021 байт (сейчас)
587 906
1 705 ms
604 503
48 550 ms
595 834
634 ms
В gzip фактор сжатия 8 (~72Kb)
Результат можно улучшить!
Наши цифры

15. Минификация

16. Все минификаторы работают похоже

17. Базовая минификация
• Удаление
• Замена значений
• Структурная оптимизация
17

18. Кажется, минификация CSS –
это про знание спецификаций
18

19. На деле – постоянно что-то вылазит

20. Потому что
• Спецификации меняются
• Разная поддержка браузерами
• Баги браузеров
• Хаки
20

21. Самое главное
минификатор не должен
ломать или чинить CSS
21

22. Удаление

23. Удаляем
• Пробелы и комментарии (основной выигрыш)
• Правила с неверными селекторами
• Пустые правила
• Неверные декларации
• Неверно расположенные @import, @charset
• …
23

24. Но нужно учитывать
особенности спецификаций
24

25. 25
calc(4 * 2em - 10% / 3)
Оригинальный CSS
Не правильно
calc(4*2em-10%/3)
Правильно
calc(4*2em - 10%/3)
Удаление пробелов

26. Еще примеры
• Единицы измерения у нулей
0px ! 0
• Кавычки
[attr="name"] ! [attr=name]
url('image.png') ! url(image.png)
• …
26

27. Но всегда есть нюансы..
• 0px ! 0
можно
• 0deg ! 0
нельзя, так как не длина
• flex: 1 0 0px ! flex: 1 0 0
нельзя, сломается в IE
27

28. Замена

29. Замена значений на более
короткие эквиваленты
29

30. Наиболее интересное: цвет
• hsl ! rgb, hsla ! rgba
• rgb(100%, 0, 0) ! rgb(255, 0, 0)
• rgba(a, b, c, 1) ! rgb(a, b, c)
• нормализация: rgb(500, -100, 0) ! rgb(255, 0, 0)
• rgb(255, 0, 0) ! #ff0000
• #aabbcc ! #abc
• #ff0000 ! red, darkslateblue ! #483d8b
30

31. Что еще
• Нормализация чисел: 0.00 ! 0 или 0.123 ! .123
• Специфика для свойств
• font-weight:bold ! font-weight:700
• background:none ! background:0 0
• from ! 0%, 100% ! to в @keyframes
• …
31

32. Не сильно эффективно

33. Структурная оптимизация

34. Слияние и перемещение
деклараций и правил
34

35. Самая сложная и ресурсоемкая
оптимизация

36. 36
.foo {
color: red;
color: green;
}
.foo {
color: green;
}
Удаление ненужных деклараций

37. Внимание! Викторина
Насколько вы хороший минификатор ;)
37

38. 38
.foo {
color: red;
color: rgba(…);
}
.foo {
color: rgba(…);
} НЕВЕРНО
В старых браузерах
не поддерживается rgba()
Удаление ненужных деклараций
Правильно?

39. 39
.foo {
color: red;
}
.bar {
color: green;
}
.qux {
color: red;
}
.foo, .qux {
color: red;
}
.bar {
color: green;
}
НЕВЕРНО
Разный эффект, например:
<div class="bar qux">
Перегруппировка
Правильно?

40. 40
span {
color: red;
}
div {
color: green;
}
ul {
color: red;
}
span, ul {
color: red;
}
div {
color: green;
}
Правильно,
у элементов одно имя
Перегруппировка
Правильно?

41. 41
.foo {
color: red;
}
span {
color: green;
}
.bar {
color: red;
}
.foo, .bar {
color: red;
}
span {
color: green;
}
Правильно,
разная специфичность –
порядок не важен
Перегруппировка
Правильно?

42. 42
.foo[a=b] {
color: red;
}
span[c=d i] {
color: red;
}
.foo[a=b],
span[a=b i] {
color: red;
}
Перегруппировка
Правильно?
Не правильно:
не многие браузеры
поддерживают флаги в
атрибутном селекторе
НЕВЕРНО

43. 43
И т.д. и т.п.

44. 44
.foo {
color: red;
width: 100px;
}
.bar {
color: green;
width: 100px;
}
.foo, .bar {
width: 100px;
}
.foo {
color: red;
}
.bar {
color: green;
}
Вынос общих частей

45. Выносить можно в каждом
случае по-разному
45

46. 46
.foo {
color: red;
}
.bar {
color: red;
color: rgba(..);
}
.foo, .bar {
color: red;
}
.bar {
color: rgba(..);
}
Вынос общих частей
В данном примере можно только в начало

47. 47
.foo {
color: rgba(..);
}
.bar {
color: red;
color: rgba(..);
}
.bar {
color: red;
}
.foo, .bar {
color: rgba(..);
}
Вынос общих частей
В данном примере можно только в конец

48. Очень много нюансов,
нужно знать специфику
свойств и селекторов
48

49. Базовая оптимизация
• Похожие методы
• Основной выигрыш дает удаление пробелов
• Много хаков
• У всех есть ошибки
49

50. Продвинутые оптимизации

51. Usage data

52. 52
.foo {
color: red;
}
.bar {
color: green;
}
.qux {
color: red;
}
.foo, .qux {
color: red;
}
.bar {
color: green;
}
Трансформация не безопасна,
так как мы не знаем как
используется CSS в разметке
Вспомним пример

53. Но что, если мы знаем как
используется?
53

54. Фильтрация

55. 55
{
"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 }
Результат

56. Scopes

57. Пример
57
.module1-foo { color: red; }
.module1-bar { font-size: 1.5em; background: yellow; }
.module2-baz { color: red; }
.module2-qux { font-size: 1.5em; background: yellow; width: 50px; }

58. Пример
58
.module1-foo { color: red; }
.module1-bar { font-size: 1.5em; background: yellow; }
.module2-baz { color: red; }
.module2-qux { font-size: 1.5em; background: yellow; width: 50px; }
Мы можем предположить, но минификатору
нужно знать наверняка

59. Usage data
59
{
"scopes": [
["module1-foo", "module1-bar"],
["module2-baz", "module2-qux"]
]
}
Так мы гарантируем, что классы
module1-* и module2-*
не встречаются на одном элементе

60. Результат с usage data
60
.module1-foo,.module2-baz{color:red}
.module1-bar,.module2-qux{font-size:1.5em;background:#ff0}
.module2-qux{width:50px}
На 29 байт меньше, чем без usage data

61. Что это дало нашему проекту
• 823 Kb оригинальный CSS
• 596 Kb базовая минификация
• 437 Kb минификация с usage data
61
Улучшение результата на 159Kb (26%)

62. Уже поддерживается в CSSO!
62

63. Rename

64. 64
.foo { color: red }
.foo.bar { color: green }
.a { color: red }
.a.b { color: green }
{
"foo": "a",
"bar": "b"
}
rename map
Результат
CSS
+

65. 65
• 823 Kb оригинальный CSS
• 596 Kb базовая минификация
• 385 Kb rename
Улучшение результата на 211Kb (35%)
Что это дало нашему проекту

66. 66
Улучшение результата на 364Kb (61%)
Все вместе
• 823 Kb оригинальный CSS
• 596 Kb базовая минификация
• 232 Kb rename + usage data

67. Должно ли это быть
в минификаторе?
67

68. 68
.foo,
.bar {
color: red;
}
.foo:hover,
.bar:hover {
color: green
}
.a { color: red }
.a:hover { color: green }
{
"foo": "a",
"bar": "a"
}
rename map
РезультатCSS
+

69. Кто будет писать такой CSS?
69
Usage data!

70. 70
.foo {
color: red;
}
.foo:hover {
color: green
}
.bar {
color: red;
}
.bar:hover {
color: green
}
РезультатCSS + usage data
.foo,
.bar {
color: red;
}
.foo:hover,
.bar:hover {
color: green
}

71. 71
• ~10 Kb дополнительного выигрыша
• 1431 удаленный селектор из 6904
Селекторов стало на ~20% меньше
Что это дало нашему проекту

72. Но пока есть нюансы…
В разработке – скоро в CSSO
72

73. 73
Сжимать или не сжимать?

74. На что влияет минификация?
74

75. 75
Network
Paint
Parse Stylesheet
Recalculate Style
Layout
Как CSS превращается в картинку

76. 76
Network
Paint
Parse Stylesheet
Recalculate Style
Layout
Влияние характеристик CSS на скорость
Влияют количественные
характеристики CSS
(размер, кол-во селекторов и т.д.)
Влияют качественные
характеристики CSS
(сложность расчетов и отрисовки)

77. 77
Network
Paint
Parse Stylesheet
Recalculate Style
Layout
Автоматизация улучшений
Компрессия может
оказать положительный
эффект
Пока нет предпосылок,
что задача решается

78. 78
Network
Paint
Parse Stylesheet
Recalculate Style
Layout
Network
Решение: gzip
Имеет эффект только
при холодной загрузке
Неоптимизированный
CSS сжимается лучше

79. 79
Network
Paint
Parse Stylesheet
Recalculate Style
Layout
Parse Stylesheet
Решение: сжатие CSS
Тут gzip уже не играет
роли, выполняется всегда
Чем меньше текста, тем
меньше парсить

80. Без сжатия 823 Kb – 35ms
Базовое сжатие 596 Kb – 29ms
Сокращение классов 385 Kb – 24ms
Usage data 232 Kb – 22ms
80
Наколеночные тест
Влияние разного уровня сжатия на время парсинга
Размер уменьшился в ~4 раза, но время лишь на ~50%
(Chrome на MacBook Air)

81. Win10 Desktop 19ms → 11ms
Nexus 5X 68ms → 44ms
Samsung Galaxy Note 2 158ms → 108ms
81
Наколеночные тесты
Ранее, на других устройствах, были получены более
обнадеживающие цифры при улучшении сжатия
CSS 316Kb 215Kb (-39.5%)
+ usage data

82. 82
Network
Paint
Parse Stylesheet
Recalculate Style
Layout
Parse Stylesheet
Решение: rename и др.
Уменьшение кол-ва
селекторов, их сложности
Пока гипотезы, цифр нет,
но будут как только фича
появится в CSSO ;)

83. Сжимать или не сжимать?
83
Да! Хуже не будет
Но есть еще предметов для исследований

84. CSSO – новая жизнь

85. Что изменилось
• В 10+ раз быстрее
• В 8+ раз меньше потребление памяти
• Исправлена большая часть проблем и багов
• Улучшена кодовая база и API
• Больше скачиваний и звезд на GitHub ;)
85

86. 86
ВремясжатияCSS(600Kb)
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
1.4.0 1.5.0 1.6.0 1.7.0 1.8.0 2.0
1 050 ms
clean-css
Изменение по скорости
csso
500 ms
cssnano
23 250 ms

87. postcss-csso
87
Плагин для PostCSS, aльтернатива cssnano
Работает почти также быстро как CSSO отдельно
Под капотом конвертация AST
github.com/lahmatiy/postcss-csso

88. 88
1 300 000+ скачиваний в месяц
x9 с октября 2015

89. Новое
• Source Maps
• Usage data
• Лучше поддержка "новых" частей в CSS
• Лучше сообщения об ошибках
• Поддержка stdin
• Новый формат AST
89

90. Планы

91. Главная цель – лучший минификатор

92. Coming soon
• Новые оптимизации и алгоритмы: быстрее и правильно
• Учет поддерживаемых браузеров
• Семейства свойств и сортировка деклараций
• Нормализация имен и переименование
• Понимание структуры shorthand-значений
• Применение статистики
92

93. В заключении

94. Любите CSS, читайте спеки

95. 95Используйте CSSO :)

96. Роман Дворнов
@rdvornov
rdvornov@gmail.com
Вопросы?
github.com/css/csso