Ускорение CSS. 5 инструментов для повышения производительности CSS, которые ускорят ваш сайт

Ускорение CSS. 5 инструментов для повышения производительности CSS, которые ускорят ваш сайт

От автора: тема производительности CSS, ускорения CSS — достаточно актуальна сегодня. В этой статье я расскажу вам про 5 инструментов, с помощью которых можно посадить CSS на диету и ускорить загрузку страниц.

Почему скорость загрузки страниц так важна?

Быстрая загрузка – решающий фактор успеха вашего сайта. Есть результаты исследований, подтверждающие мнение о том, что пользователи быстро теряют терпение, если им слишком долго приходится ждать появления контента.

Когда сайт работает медленно, пользователи получают негативный опыт работы, что приводит к уменьшению количества посетителей и снижению конверсии. В конечном итоге это отрицательно сказывается на бизнесе.

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

Давайте посмотрим, как инструменты ниже могут повысить производительность вашего CSS.

TestMyCSS

Ускорение CSS. 5 инструментов для повышения производительности CSS, которые ускорят ваш сайт

TestMyCSS – бесплатный инструмент по оптимизации с массой функций. Он проверяет на избыточность, ошибки валидации, неиспользуемый CSS и на применение лучших практик.

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

как упростить сложные селекторы;

дубли CSS-свойств и селекторов, от которых нужно избавиться;

количество объявлений !important, присутствующих в коде;

ненужная специфичность классов;

ненужные IE фиксы;

свойства с префиксами, которым префиксы уже не нужны;

классы и id с тегами, например, a.primary-link;

неправильное использование универсальных селекторов.

Stylelint

Ускорение CSS. 5 инструментов для повышения производительности CSS, которые ускорят ваш сайт

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. 5 инструментов для повышения производительности CSS, которые ускорят ваш сайт

CSS Triggers – онлайн ресурс, информирующий вас о том, в каких браузерах свойства вызывают операции макетирования, отрисовки и композиции. Эти три процесса выполняются при рендеринге страницы в браузере.

В частности:

макет: браузер генерирует геометрию и положение всех элементов;

отрисовка: браузер вычисляет пиксели всех элементов в слои;

композиция: браузер отрисовывает слои на экран.

Эта информация особенно ценна, если вы анимируете элементы в вебе. Композиционные операции затрачивают меньше всего ресурсов в браузере. Если ваш CSS-код анимирует свойства, которые повторно вызывают операции макетирования и отрисовки, вам будет сложно добиться 60fps (кадров в секунду) – решающее значение для плавной анимации.

cssnano

Ускорение CSS. 5 инструментов для повышения производительности CSS, которые ускорят ваш сайт

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

cssnano – плагин для PostCSS по оптимизации и минификации CSS. В частности: «cssnano берет ваш хорошо форматированный CSS и прогоняет его через множество тестов по оптимизации, чтобы на выходе получить наименьший вес файла.»

В этом инструменте масса функций, со всеми ими вы можете ознакомиться на сайте cssnano.

Critical

Ускорение CSS. 5 инструментов для повышения производительности CSS, которые ускорят ваш сайт

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.

Метки:

Похожие статьи:

Комментарии Вконтакте: