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

Каскадные таблицы стилей (CSS) — это язык таблиц стилей, который помогает отдельно определять содержание сайта и параметры оформления (например, цвета и макет). Документы HTML и XML содержат информацию только о содержании, внутренней структуре или отдельных компонентах сайта, в то время как элементы дизайна указываются отдельно в файлах CSS. Если используются таблицы стилей, веб-сервер должен передавать их браузеру при каждом обращении к сайту. Все это делается в дополнение к HTML-документу и внедренному мультимедийному контенту (изображениям, видео и т.д.), что влияет на время загрузки. Чем сложнее и больше файлы CSS, тем дольше посетителю приходится ждать, пока сайт полностью загрузится. Сжимая CSS, вы можете уменьшить размер CSS-файла и увеличить производительность вашего сайта.

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

1. Избегайте чрезмерного использования inline-CSS (стилей, размещаемых непосредственно на элементе HTML), если они не находятся в начале HTML-страницы. То же самое касается тегов стилей (отдельных свойств CSS, которые отклоняются от стандарта соответствующих таблиц стилей).  
2. Объедините несколько CSS-файлов в PHP-скрипте. Таким образом, клиенту придется вызывать только PHP-файл вместо того, чтобы отправлять HTTP-запрос для каждой таблицы стилей и ждать его. 
3. По возможности используйте сокращенные формы:

   body { margin: 20px 10px 5px 10px }

   вместо длинных формул, таких как:

   body { margin-top: 20px;
   margin-right: 10px;
   margin-bottom: 5px;
   margin-left: 10px }

4. Избегайте чрезмерного использования. Если определенные теги встречаются исключительно в элементе (например, в списке), то этот элемент не нужно упоминать второй раз.
5. Используйте для цветов значения HEX, а не нотацию RGB.
6. Универсальный селектор ‘*’ следует использовать только в экстренных случаях. Настройка дизайна с помощью универсального селектора применяется к каждому элементу, поэтому браузер должен сначала обеспечить всем элементам соответствующие требования.
7. Минимизируйте файл CSS, удаляя ненужные пробелы, пустые строки и комментарии. Пробелы не нужны, например, после двоеточия или точки с запятой. Последнюю точку с запятой после последнего символа списка также можно не ставить. Выполнив этот процесс, CSS-файл потеряет свою систематическую структуру и четкость, но будет значительно быстрее читаться браузером.
8. Поскольку сворачивание CSS-файла является довольно сложным процессом, вам обязательно нужно позаботиться о том, чтобы у вас была резервная копия, пока CSS еще понятен. Так вы сможете внести небольшие изменения или исправить ошибки задним числом.

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

CSS Minifier

Онлайн-приложение CSS Minifier можно найти на этом сайте https://cssminifier.com/. Просто скопируйте ваш CSS-код в поле ‘Input CSS’ и нажмите на ‘Minify’, чтобы начать процесс. В поле ‘Minified Output’ вы увидите результат, который можно скопировать вручную или загрузить, нажав на кнопку ‘Download as file’. CSS Minifier сокращает код, удаляя переносы строк и пробелы, а также удаляя последнюю точку с запятой в списке. Кроме того, инструмент может легко преобразовать RGB-код в сжатый HEX-вариант.

CSS Compressor

Веб-приложение CSS Compressor немного отличается от CSS Minifier, поскольку в нем есть несколько дополнительных опций для сжатия кода. Зайдите на сайт http://csscompressor.com/ и вставьте свой CSS в поле ‘CSS Source Code Input’. Затем вы можете выбрать степень сжатия. В разделе ‘Show advanced options’ вы можете отметить галочкой, какие поля вы хотите сжать, например, ‘Compress colors’ или ‘Remove last semicolons’. Нажмите на ‘Сжать’, чтобы запустить процесс с помощью CSS Compressor. Помимо результатов в поле ‘Сжатый JavaScript’, инструмент также предоставляет информацию о входном и выходном размере вашего CSS файла, а также процент полученной минимизации.

Бесплатный набор инструментов CSS

Free CSS Toolbox — это бесплатное программное обеспечение для веб-разработчиков, которое можно загрузить с сайта разработчиков Blumentals Software. Как и следует из названия, она включает в себя набор инструментов и может выполнять множество задач, включая форматирование и проверку CSS-кодов. На вкладке меню ‘CSS Formatting Options’ выберите параметр CSS, который вы хотите оптимизировать, и запустите сжатие, нажав на кнопку ‘Re-format now’. Free CSS Toolbox без труда удаляет пустые пробелы и завершающую точку с запятой, а также минимизирует размер цвета. Эта программа работает на всех операционных системах Windows, начиная с XP.

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