Сжатие CSS для уменьшения времени загрузки
Если на сайте используется CSS, сервер должен передавать их браузеру каждый раз при запросе ресурса. И это оказывает влияние на скорость загрузки. Чем сложнее и объемнее файлы стилей, тем дольше посетитель будет ждать, пока сайт полностью загрузится. С помощью сжатия CSS можно уменьшить размер кода и повысить производительность сайта.
Возможности оптимизации CSS
Время загрузки становится проблемой, когда речь идет о передаче данных на мобильные устройства. Это привело к расширению диапазона задач, которые решаются с помощью CSS. В результате, язык каскадных таблиц стилей перенимает все больше и больше функций, за которые ранее отвечал JavaScript. Шаблоны CMS часто используют раздутые файлы CSS, которые снижают производительность сайта.
В этой статье мы приведем несколько приемов, которые можно использовать для сжатия CSS и JS.
- Избегайте чрезмерного использования встроенных стилей CSS (размещенных в HTML), если это не относится к началу страницы. То же самое касается тегов стилей (отдельных CSS-свойств, отклоняющихся от установленных стандартов);
- Объединяйте нескольких файлов CSS в PHP-скрипте. Таким образом, клиент должен вызвать только файл PHP вместо отправки HTTP-запроса для каждого файла стилей;
- Сжатие CSS подразумевает использование сокращенных форм свойств, если это возможно:
body { margin: 20px 10px 5px 10px }вместо полной формы:
body { margin-top: 20px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px }- Избегайте ненужного использования кода. Если определенные теги размещаются только в одном теге (например, в списке), то элемент не должен упоминаться дважды;
- Используйте для установки цвета значения HEX, а не RGB;
- Универсальный селектор "*" следует использовать только в исключительных случаях. Установки стиля, заданные через универсальный селектор, применяются ко всем элементам, поэтому браузеру нужно сначала обеспечить выполнение соответствующих указаний для всех элементов;
- Минимизируйте файлы CSS, удаляя ненужные пробелы, пустые строки и комментарии. Пробелы не нужны, например, после двоеточия или точки с запятой. Окончательная точка с запятой после последнего символа списка также может быть опущена;
- Так как минимизация CSS является сложным процессом, обязательно нужно создавать резервную копию файла. Так вы сможете исправить ошибки.
Сжатие 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 онлайн. Перечисленные выше инструменты помогут вам в этом. Но полная оптимизация не может быть выполнена с помощью сервисов и приложений. Эту задачу нужно выполнять самостоятельно.
Дайте знать, что вы думаете по этой теме материала в комментариях. Мы очень благодарим вас за ваши комментарии, отклики, подписки, лайки, дизлайки!