От автора: тема производительности CSS, ускорения CSS — достаточно актуальна сегодня. В этой статье я расскажу вам про 5 инструментов, с помощью которых можно посадить CSS на диету и ускорить загрузку страниц.
Почему скорость загрузки страниц так важна?
Быстрая загрузка – решающий фактор успеха вашего сайта. Есть результаты исследований, подтверждающие мнение о том, что пользователи быстро теряют терпение, если им слишком долго приходится ждать появления контента.
Когда сайт работает медленно, пользователи получают негативный опыт работы, что приводит к уменьшению количества посетителей и снижению конверсии. В конечном итоге это отрицательно сказывается на бизнесе.
Существует ряд факторов, влияющих на веб-производительность. Например, количество HTTP-запросов, загрязненность кода, тяжелые медиа файлы и т.д. Стиль написания CSS и загрузка стилей в браузер могут значительно повлиять на те миллисекунды, которые разграничивают пользователей на тех, кто останется на сайте и тех, кто уйдет к конкурентам.
Давайте посмотрим, как инструменты ниже могут повысить производительность вашего CSS.
TestMyCSS
TestMyCSS – бесплатный инструмент по оптимизации с массой функций. Он проверяет на избыточность, ошибки валидации, неиспользуемый CSS и на применение лучших практик.
Можете сразу же пользоваться сервисом, просто введите url к CSS-файлу с вашего сайта, а TestMyCSS найдет все, что нужно улучшить. Также вам могут помочь подсказки:
как упростить сложные селекторы;
дубли CSS-свойств и селекторов, от которых нужно избавиться;
количество объявлений !important, присутствующих в коде;
ненужная специфичность классов;
ненужные IE фиксы;
свойства с префиксами, которым префиксы уже не нужны;
классы и id с тегами, например, a.primary-link;
неправильное использование универсальных селекторов.
Stylelint
Stylelint – амбициозный CSS-линтер, работающий с PostCSS. Инструмент с открытым исходным кодом для написания современного CSS-кода. Линтер – программа, сканирующая код на потенциальные ошибки.
Stylelint умеет:
помечать флагом ошибки: опечатки, неправильные hex-значения цветов, дубликаты селекторов и т.д;
заставлять использовать лучшие практики;
обеспечивать соблюдение правил кодинга, таких как одинаковые пробелы во всех CSS-правилах и т.д;
обеспечивать поддержку нового CSS-синтаксиса;
автоматически исправлять некоторые незначительные предупреждения с помощью stylefmt, инструмента форматирования CSS-правил…
… и много другое. Stylelint крайне универсальный инструмент, его можно использовать вместе с:
Stylelint CLI (командная строка);
плагин для запаковщика (webpack, gulp и т.д.);
плагин для текстового редактора (Atom, Sublime Text и т.д.);
Stylelint Node API;
плагин Stylelint PostCSS.
Более подробно ознакомиться с сервисом можно в руководстве пользователя и разработчика.
CSS Triggers
CSS Triggers – онлайн ресурс, информирующий вас о том, в каких браузерах свойства вызывают операции макетирования, отрисовки и композиции. Эти три процесса выполняются при рендеринге страницы в браузере.
В частности:
макет: браузер генерирует геометрию и положение всех элементов;
отрисовка: браузер вычисляет пиксели всех элементов в слои;
композиция: браузер отрисовывает слои на экран.
Эта информация особенно ценна, если вы анимируете элементы в вебе. Композиционные операции затрачивают меньше всего ресурсов в браузере. Если ваш CSS-код анимирует свойства, которые повторно вызывают операции макетирования и отрисовки, вам будет сложно добиться 60fps (кадров в секунду) – решающее значение для плавной анимации.
cssnano
Как только вы поняли, что CSS критически влияет на процесс рендеринга, появляется вопрос, как писать краткий и хорошо структурированный код в стилях. Другими словами, по умолчанию браузеры откладывают рендеринг страницы до загрузки, парсинга и выполнения стилей. Поэтому если ваш CSS-файл большой и запутанный, посетителям, скорее всего, придется подождать, прежде чем они смогут прочитать контент на вашем сайте.
cssnano – плагин для PostCSS по оптимизации и минификации CSS. В частности: «cssnano берет ваш хорошо форматированный CSS и прогоняет его через множество тестов по оптимизации, чтобы на выходе получить наименьший вес файла.»
В этом инструменте масса функций, со всеми ими вы можете ознакомиться на сайте cssnano.
Critical
Critical – еще один инструмент, решающий проблемы критического маршрута CSS, о которых я писал в предыдущем разделе.
Среди правил и рекомендаций PageSpeed Insights вы найдете этот совет: «Для наилучшей производительности, возможно, придется вставить критический CSS-код напрямую в HTML-документ. Это убирает дополнительные переходы в критическом маршруте…» — Ilya Grigorik на Google Developers Blog.
Идея заключается в поиске критических CSS-правил и размещении их в теге
документа. Под критические стили попадают любые правила, отвечающие за базовый макет и типографику, а также стили видимой части страницы сайта.Critical генерирует и вставляет критический CSS-код за вас. Инструмент можно использовать с Grunt и Gulp. Более подробно о вставке критических стилей с помощью этого инструмента можете прочитать в статье Asha Laxmi «как и зачем инлайнить критический CSS».
Заключение
В этой статье я подчеркнул важность быстрой загрузки сайта, а также то, как раздутые стили могут заставить ваших пользователей ждать загрузки контента. Перечисленные 5 инструментов очистят ваши стили, уменьшат количество багов, что упростит браузерам загрузку и парсинг.
С помощью чего вы поддерживаете краткость CSS-кода? Пишите в комментариях.
Автор: Maria Antonietta Perna
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.