Оптимизация CSS
Сайт с оптимизированным CSS быстрее загружается и работает более плавно, а пользователи в результате получают лучший опыт.
Советы ниже показывают, как этого добиться:
1. Используйте простые селекторы
Сложные селекторы требуют больше времени на обработку, поэтому по возможности отдавайте предпочтение простым.
Плохой пример
Длинный селектор с глубокой вложенностью, как этот, замедляет разбор.
body #navlist ul li a.button:hover {
background-color: blue;
}
Лучший пример
Этот более короткий и простой селектор работает быстрее и легче поддерживается.
.button:hover {
background-color: blue;
}
2. Избегайте универсального селектора для стилизации
Поскольку универсальный селектор (*) затрагивает каждый элемент страницы, он может замедлить рендеринг. Оставьте его для случаев, когда он строго необходим.
Пример
* {
margin: 0;
padding: 0;
font-size: 16px;
}
3. Избегайте инлайн-стилей
Инлайн-стили утяжеляют HTML и усложняют его поддержку, поэтому не используйте их без необходимости.
Плохой пример
<div style="color: red; font-size: 18px;">Hello</div>
<p style="color: blue; font-size: 16px;">Test</p>
4. Избегайте @import
Загрузка внешнего CSS через @import задерживает таблицу стилей, поэтому её лучше избегать.
Лучше использовать тег <link> в разделе head, поскольку тогда CSS загружается до рендеринга страницы.
Пример
<link rel="stylesheet" href="style.css">
5. Используйте сокращённые свойства
Сокращённые свойства занимают меньше места и быстрее разбираются, поэтому используйте их при любой возможности.
Пример
/* Long version */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
/* Shorthand version */
margin: 10px 20px;
6. Сократите ненужные анимации
Производительность страдает, когда анимаций много или они сложные, потому что они требуют больше вычислительной мощности. Оставляйте только те, которые вам нужны.
7. Используйте свойства, не вызывающие перерисовку анимаций
Производительность анимации зависит и от того, какие свойства вы анимируете.
Не анимируйте такие свойства, как width, height, left и top, потому что каждое изменение вызывает пересчёт компоновки.
По возможности отдавайте предпочтение свойствам, которые не вызывают перерисовку, таким как transform, opacity и filter.
8. Объединяйте и минифицируйте CSS
Файлы становятся меньше, если удалить пробелы и комментарии, а один CSS-файл по возможности лучше нескольких.
В этом помогают, например, такие инструменты, как CSS Minifier, PostCSS и онлайн-компрессоры.
9. Кэшируйте свой CSS
Длительное время истечения срока действия в настройках сервера позволяет браузеру кэшировать ваш CSS-файл, поэтому пользователям приходится загружать его заново реже.
Итог
- Лучше всего работают короткие и простые селекторы
- Операций, вызывающих пересчёт компоновки, лучше избегать
- Приёмы анимации должны быть эффективными
- Таблицы стилей должны быть внешними, минифицированными и кэшированными