Дорогая цена стилей (конспект)

Слайды

Видео

 

1. Bootstrap можно собрать, оставив только сетку и ещё что то. Использовать правильную сборку Bootstrapa современные фреймворки это умеет.

2. Ребята из гугла говорят использовать БЭМ. Найти ссыклу и изучить статью

3. CurrentColor полезно если нужен Бордер и Цвет шрифта одного цвета

4, Кртикал CSS

5. Filamentgroup как загружать Асинхронно, не блокируя рендеринг и прочее

6. Современные браузеры поддерживают медиавыражения. Например, если видим, что чел с мобильника <767 px - не грузим ему эти стили

7. Ленивая загузка - Interection Observer API

8. Заголовки сервере: Cache Control

9. Сервис воркеры: Есить доклад рускоязычный

10. Изучить атрибут <link rel="...">

11. Web Performance 101 Иван Акулов

 

Вопрос можно задать на mefody@yandex-team.ru

 

 

// Интересный комент:

Противоречивое ощущение от доклада. С одной стороны заявляется, что с материалами относительно CSS оптимизации все плохо и с этим нужно бороться, с другой стороны выдается на гора спич, который в основной своей массе пересказывает очевидные вещи, а в тех редких случаях когда касается чего-то интересного - может еще выдать и неверное толкование. Судите сами: 4:05 Замеряйте Именно потому, что люди замеряют, они обнаруживают, что ресурсы которыми они обладают, выгоднее всего потратить не на занятия с CSS, а на тысячу других проблем которые сейчас существуют у типичного проекта: от нагрузки создаваемых 3d party модулями, до даже своей собственной логики. Даже работа с оптимизацией медиа ресурсов, может быть эффективнее по соотношению качество цена в сравнении с оптимизацией CSS. Я подчеркиваю, я не говорю о том, что CSS это нечто неважное, напротив, я утверждают только то, что в в текуших реалиях, проекты имеют намного большие проблемы в других областях. Которые кажутся людям знакомыми - та же производительность JS кода. А как известно, самая короткая дорога известная. 21:08 Минификация В рамках решения проблем с CSS почти бесполезное занятие. Потому что основная проблема которая есть в CSS это не его обьем в килобайтах. А количество используемых селекторов помноженная на их сложность. Именно это первейшая проблема которую нужно решать. Сжатый бандл до 150 килобайт типичной вордпресс темы, в распакованном виде занимающий 500 килобайт, затормозит первый рендеринг страницы на две секунды. При этом не сжатый бандл в 1 мегабайт но написанный согласно наприер томуже БЭМ не создаст значимой нагрузки на рендер. Почему? ПОТОМУ ЧТО есть большая разница в том в каком обьеме и какие селекторы мы используем. 21:36 Бротли Это совершенно не очевидная тема. Нет однозначного ответа на вопрос выгоден ли бротли. Потому что сам факт получения на 25% меньшего обьема страницы не говорит о выгодности алгоритма уже потому, что кроме трафика считают как миниму процессорное время. Которое, в случае с бротли, не всегда показывает его с выгодной стороны. Потому как гарантированный выигрыш по сжатию от бротли идет на максимальном уровне сжатия, который оказывает неприлично затратным. Неприлично настолько, что его отключают. Однозначный ответ относительно бротли есть только в одном случае если сжатие ресурса вы делает однажды, а не при каждом запросе. В любом другом случае, однозначного ответа относительно бротли нет, и нужно замерять конкретно ваш случай. Или сильно поморочить себе голову с адаптацией сажтия бротли под наши ресурсы. Что опять, имеет безусловную пользу в случае когда у вас миллионы запросов, и ваш выигрыш даже в 10мс в проекции на этим миллионы становится значимым, но не в случае типичного проекта. Где исследования и замеры с бротли, это тоже самое что геморрой подорожником лечить. Поможет? Может чуть чуть, проблема то основная в другом. 24:18 Автоматизация процесса приведения стилей в порядок Крис Коин ошибается. Такие инструменты есть. Они намного проще всего того о чем он говорит. Более того, о этих инстурментах знал ранее почти каждый. И незаслуженно забыл, начав полагаться как раз на коверэдже из дев тулс и использование его в связке с папитир. Именно доклад Антона Холкина и рассказывает о таком решении, только отличие доклада Антона в том, что он находился в условиях, когда проект не располагает возможностью просадить даже на час производительность проекта, от того весь его доклад был скорее посвящен тому как они выходили из этой ситуации. А суть метода простая как три копейки, имея список селекторов из вашего CSS кода, нет ничего проще проверить наличие этих селекторов на странице. Да это будет долго. Да есть ньюансы с тем, что любая динамика предполагает возможность изменения имени классов на нодах, что не может гарантировать 100% точности для этих случаев, но она гарантирует получение как минимум 100% точного файла стилей для первого рендера страницы. Чего БОЛЕЕ ЧЕМ ДОСТАТОЧНО для того, чтобы получить достаточный запас в ресурсах и времени, чтобы разрешить дальнейшие проблемы производительности. Ненужно делать ни ховеры ни фокусы. Вы думаете о проблемах которых нет. Решение проблемы способом описанным выше, который гарантирует вам получения файла стилей решающего основную его проблему. А если у вас, проблему создают стили зависящие от ховера и фокуса, и вы хотите отфильтровать гарантированно их часть, то у вас серьезные проблемы с проектом, которые я лично очень хотел бы увидеть, и готов только ради этого потратить свое время чтобы решить проблему для этих людей совершенно бесплатно. Только за то, чтобы на нее посмотреть. 27:18 Бэм и ребята из гугла Господи боже мой. БЭМ решает самую основную проблему типичного CSS бандла - количество используемых CSS селекторов помноженные на их сложность. БЭМ в силу своих особенностей автоматически минимизирует эту задача. Именно поэтому бандл с БЭМ стилями, может быть и два раза больше но при этом не создать значимой нагрузке при рендере или при рефлов. ------------- Все дальше слушать и смотреть не стал.

Связаться с автором

Комментарии

Если у вас есть вопрос, критика или другое мнение - напишите в комментариях.