DEV Community

Andrew Elans
Andrew Elans

Posted on

CSS performance notes

Ref https://t.me/AsForJsTalks

Summary from this group on CSS performance.

TLDR

CSS problems these days:

  • Big bundles with multiple unused selectors which are still being analyzed by browsers in painting stage.
  • CSS is performant when (numbers are provisional but based on analysis of Google):
    • your page has max 2000 nodes
    • CSS file is max 100kb unpacked
    • Abstract-Syntax-Tree (AST) with nesting of nodes max 10
  • Main problem is the search in the selector database, where more than 80% of the data is not used in any way. At the same time, the complexity of the selector language leads to complex chains of checking whether a particular selector is suitable for the current situation.
  • Solutions (either ... or)

More on BEM style: csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

Good Example 

<style>
.countDown {
    width: 100%;
    height: 100%;
    display: block;
}

.countDown__text {
    text-align: center;
    font-size: 10vw;
    line-height: 100vh;
}

.countDown__text_inform {
    color: black;
}
</style>

<span class="countDown countDown__text countDown__text_inform">
    Some text
</span>
Enter fullscreen mode Exit fullscreen mode

POSTS

t.me/AsForJsTalks/101758

Современные проблемы CSS сосредоточены в двух вещах:
1) Большой обьем селекторов, которые никак не используются.
То есть общий бандл содержащий все стили всех возможных ситуаций всех частей проекта, содержит более 80% селекторов которые не используются, однако обьязательно принимают участие в анализе при формировании области отображения
2) Сам по себе язык CSS прекрасен, но только для случаев, когда у Вас страница содержит до 2000 узлов, и обьем вашего CSS файла не больше 100 килобайт в распокованном виде вместе с кодом страницы. (Цифры 2000 узлов и 100 килобайт - полуусловны. Они показывают порядок. То есть речь не идет о мегабайте)
Недостатки языка всплывают тогда, когда колличество узлов, а главное вложенность этих узлов превышает 10. (Цифры от гугла, они могут быть больше или меньше - для нас важна не конкретная цифра, а сам принцип вложенности)
Как следствие - проблемой становится сам по себе поиск по базе селкторов, где больше 80% данных никак не используются. При этом сложность языка селекторов заставляет создавать сложные цепочки проверки подходит тот или иной селектор к текущей ситуации.
Ответом на все это безобразие - стали решения подобные БЭМ. Которые фактически вводят правила, которые заставляют иметь CSS файл состоящий (в основном) из быза селекторов классов и только их. Никаких каскадов. И сведения к минимуму любых псевдоклассов.
То есть дефакто сейчас - если Вы хотите спать спокойно, то вы должны использовать всегда системы подобные БЭМ, которые приводят к тому, что описание отображение строиться не на особенностях самого каскада:

.class {}
.class .subClass {}
.class .subClass .themeRed {}
tag .class{}

но на самой его примитивной форме:

.class {}
.class__subClass {}
.class__subClass_themeRed {}
.tag__class {}

тем самым нивелируя все недостатки описанные выше.
То есть, фактически, если вы работаете с проектом, у которого мегабайтные CSS файлы - нужно забыть о каскадах навсегда.

t.me/AsForJsTalks/151771

Про Google, SEO и CSS
В современных реалиях, CSS это прежде всего инструмент как для сокрытия информации от индексации, но при этом видимой пользователю, так и большая проблема производительности вашего проекта.
А производительность формирования первой области отображения - один из важнейших для Google показателей при ранжировании проекта.
CSS может сильно просадить производительность при условии:
1) Большого обьема подключенных селекторов, даже не используемых.
2)Использовании сложных каскадов, в том числе условий in и прочих.
Сложный каскад - это когда вы в УЖЕ в правиле CSS используется больше одного селектора:

> .class1 .class2 {
>   color: red;
> }
> p .class2 {
>   font-size: 14em;
> }
> #blockID .highLight {
>   background-color: blue;
> }
Enter fullscreen mode Exit fullscreen mode

ВСЕ эти селекторы и любые более сложные - пиздец производительности.
Безусловно имеет существенное значение уровень вложенности тегов.
Эффективным решением двух выше-обозначенных проблем, является:
Либо минимизация CSS дерева.
Либо использования что-то наподобие БЭМ. Где де факто исключены каскады.
Еще раз подчеркну - это касается больших обьемов CSS правил.
Ну чтобы было понятно, условно - 1МБ в несжатом виде уже стоит серьезно задуматься.

Top comments (0)