Для чего используется сжатие css файла

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

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

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

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

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

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

body

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

body

1. Избегайте ненужного использования кода. Если определенные теги размещаются только в одном теге ( например, в списке ), то элемент не должен упоминаться дважды;
2. Используйте для установки цвета значения HEX , а не RGB ;
3. Универсальный селектор «*» следует использовать только в исключительных случаях. Установки стиля, заданные через универсальный селектор, применяются ко всем элементам, поэтому браузеру нужно сначала обеспечить выполнение соответствующих указаний для всех элементов;
4. Минимизируйте файлы CSS , удаляя ненужные пробелы, пустые строки и комментарии. Пробелы не нужны, например, после двоеточия или точки с запятой. Окончательная точка с запятой после последнего символа списка также может быть опущена;
5. Так как минимизация CSS является сложным процессом, обязательно нужно создавать резервную копию файла. Так вы сможете исправить ошибки.

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

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

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

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

Этот сервис для сжатия 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 файлов

На изображении выше многие увидят известную картину. Так выглядит большинство CSS файлов на продакшене. Мы все стараемся, чтобы наши веб-страницы загружались быстро; для достижения этой цели используем различные инструменты и техники оптимизации загрузки и рендеринга страниц. Об одном, но редко используемом методе, я бы хотел поговорить и рассказать, как мне удалось сократить размер CSS файла почты mail.ru на 180Кб.

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

Далее мы попробуем выжать все соки из этого файла.

Если приглядеться, то мы заметим в этом файле кое что интересное.

Прошу обратить внимание на имена классов. Наверное, вы уже догадались, о чем пойдет речь — о сокращении длины этих имен. Потому что с приходом БЭМ и других техник написания CSS названия классов стали весьма длинными, а порой неприлично длинными.

Примеры из жизни

Я провел анализ CSS файлов, некоторых популярных ресурсов и подтвердил свое предположение:

На изображение указаны классы, встречающиеся в продакшан версиях CSS файлов указанных сайтов

Наверное, никому не надо объяснять значимость скорости первоначальной загрузки страницы и ее влияние на удовлетворенность пользователей, конверсию, посещаемость сайтов. С приходом мобильных девайсов и мобильного интернета эта проблема стоит очень остро. Например, загрузка 40Кб на 4G интернете в среднем займет 700мс, а если рассмотреть 3G, EDGE, GPRS, WiFi в час пик в кафе или метро, то время загрузки значительно увеличится. Каждые сэкономленные килобайты на вес золота.

Если мы боремся за каждый пробел и перенос строки в CSS файлах, беспощадно вырезая их, то почему бы не сжимать названия классов и идентификаторов до двух или трех символов? Ведь вашим пользователям абсолютно не важно, как будет называться класс блока на странице, но им будет очень важна скорость загрузки страницы. Возможно, именно поэтому ребята из Google используют эту технику (на сайте google.com):

От слов к делу

Итак, с тем, зачем это нужно, надеюсь, разобрались. Приступим к делу. Первая проблема в том, что мы не можем просто так взять и сократить классы и идентификаторы в CSS файлах, потому что они используются в верстке, шаблонах и JS файлах. Заменив только в одном месте — все поломается. Становится очевидно, что надо заменить названия во всей связке файлов. В своих проектах для минификации, склеивания и прочих таких задач я использую Grunt.js. Эта система сборки является одной из самых популярных мире фронтенд-разработки. Занимаясь беглым поиском плагинов, реализующих такую задачу, я ничего не обнаружил и решил написать свой велосипед плагин.

grunt-revizor

Так родился grunt-revizor. При его написании я столкнулся с несколькими проблемами. В CSS файлах все просто, синтаксис заранее известен, .name или #name, но в других файлах это может выглядеть иначе. Например, в HTML

т.е. name уже без точки или в JS файлах

document.getElementById('name')

тоже без #, что усложняет проблему поиска и замены имен. Что наиболее страшно — можно поломать что-нибудь, например, если имя CSS класса будет «.success» и в JS файле у нас будет переменная «success», заменив ее мы поломаем JS код. А этого мы допустить не можем, поэтому пришлось ввести требования к написанию имен, а именно — имя должно оканчиваться на уникальный префикс, который однозначно даст возможность отличить класс от чего либо другого JS, HTML и других файлах. Например, .b-tabs__title-block—, в данном случае префикс ‘—‘.

grunt.initConfig(< revizor: < options: < namePrefix: '__', compressFilePrefix: '-min' >, // Найдет файлы: test/css/style1.css, test/css/style2.css, 'test/js/main.js и др. src: ['test/css/*.css', 'test/html/*.html', 'test/js/*.js'], dest: 'build/' >, >); 

После запуска этого таска grunt найдет все CSS, HTML и JS файлы, которые соответствуют путям из src, найдет в CSS файлах все имена классов и идентификаторов, оканчивающихся на префикс __, сожмет найденные имена до двух и трех символьных, например .b-tabs—notselected__ -> .zS, после чего сохранит новые файлы, в которых будут заменены все найденные совпадения, и сохранит их в папке build, с именами style1-min.css, index-min.html, main-min.js.

/* Original: style1.css */ .b-tabs__title-block-- < color: red; font-size: 16px; >.b-tabs__selected-- < font-weight: bold; >/* ======================================= */ /* Result: style1-min.css */ .eD < color: red; font-size: 16px; >.rt

/* Original: main.js */ var $tabmenu = $('#tabmenu--'); var tabmenu = document.getElementById('tabmenu--'); if ($tabmenu.hasClass('b-tabs__selected--')) < $tabmenu.removeClass('b-tabs__title-block--'); >; /* ======================================= */ /* Result: main-min.js */ var $tabmenu = $('#j3'); var tabmenu = document.getElementById('j3'); if ($tabmenu.hasClass('rt')) < $tabmenu.removeClass('eD'); >; 

Такой же принцип и для HTML, template и прочих фалов.

• Сначала генерируются 2-х символьные имена. После того, как количество имен перевалит за 2500, начнутся генерироваться 3-х символьные имена;
• Для генерации имен используются строчные и заглавные буквы латинского алфавита, цифры, символы — и _;
• Есть проверка на коллизию, т.е. сжатое имя может соответствовать только одному полному имени.

Оптимизации на примерах

Попробуем выяснить потенциальную выгоду такой оптимизации на примере тех же популярных ресурсов. Расскажу, как я буду считать. Конечно же, не буду пропускать CSS файлы через grunt-revizor, потому что в них не используется уникальный префикс. С помощью нехитрого Node файла я буду считать общее количество классов, высчитывать их длину в байтах и из этого высчитывать потенциальный размер файлов. Упрощенная формула выглядит так:

names = ['b-block1','b-block2','b-block3', . ]; saveSize = allNamesSize - (names.length*3) // allNamesSize - Общая длина всех символов всех найденных классов // 3 - Итоговое количество символов в сжатом название 

Сайт	Размер оригинального файла	Сжато	В процентах
Mail.ru почта (Desktop version)	849 Кб	182,5 Кб	26,4%
hh.ru (Desktop version) два файла	109,8 Кб	30 Кб	27,3%
vk.com (Mobile version) два файла	184,1 Кб	48,5 Кб	26,4%
Яндекс.Такси (Mobile version)	127 Кб	13 Кб	10,3%
2gis.ru (Mobile version)	1293 Кб	172 Кб	13,3%

Использовались обычные файлы, не gzip. Данные оптимизации примерные, потому что по мимо CSS файлов стили иногда были в html странице, соответственно, здесь не учитывались. Использовалась простенькая регулярка для парсинга, которая искала только классы, притом не все возможные, и она не искала идентификаторы. Помимо сжатия CSS будет выигрыш на других файлах, html, шаблонах и т.д., которые здесь тоже не учтены. Отмечу сразу, что некоторые файлы мало подаются такой оптимизации, например, файлы где мало классов или используются короткие имена, или много изображений, вставленных через data:URL, что демонстрируется на файлах 2gis и Яндекс.Такси.

Заключение

Конечно же, я не придумал ничего нового. Этот способ знаком многим, но он используется редко, т.к. в нем есть как минусы, так и плюсы. Например, он вносит трудности в разработку, чистоту кода и т.д. По большому счету gzip частично решает проблему длинных имен и здорово сжимает файлы, но все же определенный выигрыш в размере и времени декомпрессии файлов можно получить и с использованием gzip. Например, оптимизированный сжатый файл mail.ru на 20Кб меньше того же не оптимизированного сжатого файла.

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

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

В общем, есть о чем поговорить и над чем задуматься.

UDP: Скоро отвечу на все вопросы, приведу конкретные файлы, и сравню выигрыш при использование GZIP.

Ускоряем работу сайта за счёт оптимизации CSS

Время загрузки и отрисовки сайта в браузере можно заметно снизить, если воспользоваться следующими советами.

Если какие‑то стили не нужны на странице — их надо отключить. В процессе разработки часто подключаются те стили, которые потом не используются. Например, стили для отладки или стили для подключенных скриптов, которые не используются. Не надо заставлять пользователя загружать ненужные файлы.

Загружайте стили с поддоменов, с других доменов или CDN — файлы с одного домена загружаются в ограниченное число потоков, количество этих потоков даже у самых продвинутых браузеров не более десяти. Поэтому если картинок, файлов стилей и скриптов на странице много, то некоторым из них придется ждать своей очереди. Лимит количества потоков распространяется только на домен, поэтому если CSS‑файлы будут загружаться с другого домена, то скорость загрузки возрастет за счёт параллельности.

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

CSS надо сжать, минимизировать и оптимизировать. Удаление пробелов, комментариев, переносов строк, сокращение кодов цветов и другие оптимизации уменьшают размер файлов и ускоряют загрузку. При использовании сторонних библиотек — просто подключайте минимизированную версию. Для собственных скриптов используйте специальные библиотеки, сжимающие и оптимизирующие CSS, — CSSO или YUI Compressor.

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

Используйте GZIP для сжатия данных. Почти все современные браузеры могут обрабатывать сжатые в GZIP стили CSS. Оптимальный способ — предварительное сжатие используемых CSS‑файлов на максимальном (девятом) уровне компрессии и последующая отдача веб‑сервером уже сжатых файлов. Сжатие «на лету» вызывает нагрузку на процессор сервера, поэтому его на нагруженных проектах не стоит использовать.

Кэшируйте CSS на стороне клиента — не заставляйте пользователей многократно скачивать один и тот же файл: задайте соответствующие заголовки в ответе веб‑сервера (Expires или Cache-Control max-age + Last-Modified или ETag).

Сократите каскады в CSS — на «слабых» устройствах быстрее отрисовываются страницы, где для определения стиля элемента не требуется обработка многократно вложенных правил.

Сжатие CSS сайта для улучшения скорости загрузки

После MFI Google стал особое внимание уделять оптимизации под мобильные устройства, и как следствие это влияет на все основные факторы отрисовки страницы, которые “проповедуются” оптимизаторами, программистами и верстальщиками. Одним из них является быстрое взаимодействие и обработка браузером стилей страницы— CSS.

Прежде чем браузер сможет отобразить содержимое, он должен обработать всю информацию о стиле и макете для страницы. Браузер полностью обходит файлы js и CSS, несмотря на исключенные правила и классы, которые не используются в теле html.

Как это работает?

Давайте разберем это на примере ресурса https://www.mazda.ru/

В случае с ресурсом mazda.ru к нему подключен основной css-файл main.min.css состоящий, в свою очередь, из древа внутренних css ресурсов.

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

Основная проблема CSS-ресурсов вызвана размером файла и содержащимися в нем правилами:

main.min.css — 27 181 строка. При сжатии и удалении лишних (неиспользуемых) правил css мы смогли сократить количество строк до 3 345 для главной страницы. Из чего следует: CSS ресурса включает в себя свод незадействованных правил, которые, в свою очередь, влияют на нагрузку браузера, сервера и интернета конечного пользователя.

В том числе нам удалось сжать данный файл примерно на 30кб, что теоретически сокращает время загрузки сайта на 0,4 сек.

Решение: удаление лишних символов, правил, пробелов и комментариев.

Для сокращения CSS использовали ресурс https://uncss-online.com/

Для анализа и выявления недочетов был использован сервис Google — lighthouse.

Минимизация CSS в webpack

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

По умолчанию результат из пакета JS, создаваемый web pack, будет содержать все правила встроенных CSS-файлов. Поскольку мы хотим использовать отдельные CSS-файлы, мы прибегнем к двум дополнтиельным плагинам:

• mini-css-extract-plugin извлечет каждую таблицу стилей в отдельный файл.
• webpack-fix-style-only- records исправит проблемы в wepback 4, чтобы избежать создания дополнительного JS-файла для каждого CSS, указанного в webpack-config.js.

Теперь внесем некоторые изменения в проект:

1. Откройте проект Fav Kitties в Glitch .

2. Нажмите “Remix” для редактирования, чтобы сделать проект редактируемым.