Сжатие CSS для уменьшения времени загрузки

Если на сайте используется CSS, сервер должен передавать их браузеру каждый раз при запросе ресурса. И это оказывает влияние на скорость загрузки. Чем сложнее и объемнее файлы стилей, тем дольше посетитель будет ждать, пока сайт полностью загрузится. С помощью сжатия CSS можно уменьшить размер кода и повысить производительность сайта.

Возможности оптимизации CSS

Время загрузки становится проблемой, когда речь идет о передаче данных на мобильные устройства. Это привело к расширению диапазона задач, которые решаются с помощью CSS. В результате, язык каскадных таблиц стилей перенимает все больше и больше функций, за которые ранее отвечал JavaScript. Шаблоны CMS часто используют раздутые файлы CSS, которые снижают производительность сайта.

В этой статье мы приведем несколько приемов, которые можно использовать для сжатия CSS и JS.

  1. Избегайте чрезмерного использования встроенных стилей CSS (размещенных в HTML), если это не относится к началу страницы. То же самое касается тегов стилей (отдельных CSS-свойств, отклоняющихся от установленных стандартов);
  2. Объединяйте нескольких файлов CSS в PHP-скрипте. Таким образом, клиент должен вызвать только файл PHP вместо отправки HTTP-запроса для каждого файла стилей;
  3. Сжатие CSS подразумевает использование сокращенных форм свойств, если это возможно:
body { margin: 20px 10px 5px 10px }

вместо полной формы:

body { margin-top: 20px;
margin-right: 10px; 
margin-bottom: 5px;
margin-left: 10px }
  1. Избегайте ненужного использования кода. Если определенные теги размещаются только в одном теге (например, в списке), то элемент не должен упоминаться дважды;
  2. Используйте для установки цвета значения HEX, а не RGB;
  3. Универсальный селектор «*» следует использовать только в исключительных случаях. Установки стиля, заданные через универсальный селектор, применяются ко всем элементам, поэтому браузеру нужно сначала обеспечить выполнение соответствующих указаний для всех элементов;
  4. Минимизируйте файлы CSS, удаляя ненужные пробелы, пустые строки и комментарии. Пробелы не нужны, например, после двоеточия или точки с запятой. Окончательная точка с запятой после последнего символа списка также может быть опущена;
  5. Так как минимизация CSS является сложным процессом, обязательно нужно создавать резервную копию файла. Так вы сможете исправить ошибки.
csm_code-c_0187f356c7

Сжатие CSS: онлайн и оффлайн инструменты

Существуют различные онлайн и оффлайн приложения, предназначенные для сжатия кода CSS. Инструменты берут на себя задачу по удалению пробелов, отступов, комментариев и разрывов строк. Большинство программ также поддерживают функцию преобразования кодов цветов. Они позволяют загрузить результат в виде файла CSS или скопировать код.

К таким приложениям относятся:

CSS Minifier

Скопируйте код CSS в поле «Input CSS» и нажмите на кнопку «Minify«, чтобы начать процесс. В поле «Minified Output» вы увидите результат, который можно скопировать вручную или скачать. CSS Minifier сокращает код, удаляя разрывы строк и пробелы, последнюю в списке точку с запятой. Инструмент может легко преобразовывать код RGB в сжатый вариант HEX.

CSS Compressor

Этот сервис для сжатия CSS онлайн немного отличается от предыдущего, поскольку поддерживает больше возможностей для сжатия кода. Вставьте CSS-код в поле «CSS Source Code Input«. Затем выберите степень сжатия. В разделе «Show advanced options» можно установить флажок для параметров минимизации. Например, сжатие цветов цвета, удаление последнюю точку с запятой и т.д. Нажмите «Compress«, чтобы начать процесс сжатия CSS. Также инструмент предоставляет информацию о размере входного и выходного файла, а также процент минимизации.

Free CSS Toolbox

Бесплатная программа для веб-разработчиков. Она включает в себя целый ряд инструментов и может выполнять форматирование и проверку CSS-кода. На вкладке меню «CSS Formatting Options» выберите параметры CSS, которые нужно оптимизировать и запустите сжатие, нажав «Re-format now«. Free CSS Toolbox без проблем удаляет пробелы и конечные точки с запятой, минимизирует коды цветов. Эта программа работает во всех операционных системах, начиная с Windows от XP и выше.

Уменьшение времени загрузки благодаря оптимизации CSS

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

Перевод статьи «CSS compression for consistent loading times» был подготовлен дружной командой проекта Сайтостроение от А до Я.