Для чего используется сжатие css файла
После статей «Практический CSS/JS: архивируем все!» и «JavaScript: жать или не жать» стало ясно, что проблема уменьшения CSS-файлов в размере действительно актуальна, и общественности хотелось бы аналогичного исследования уже конкретно для такой оптимизации. Которое, собственно, и приведено ниже.
В интернете было найдено 6 различных инструментов для минимизации CSS-кода (однако, с одним из них, перловым модулем, разобраться не удалось, поэтому приведены результаты только для 5), далее ими обрабатывались несколько примеров, которые затем подвергались еще и архивированию. Результаты, опять-таки, представлены в виде графиков, ибо таблицы я нахожу менее информативными.
Что такое сжатие?
Сжатие – это просто алгоритм, который устраняет нежелательную избыточность из файла, чтобы создать файл, меньший по размеру, чем исходный. Если и сервер, и браузер понимают этот алгоритм, то он может быть применен на обоих концах схемы взаимодействия типа запрос-ответ.
Почему мне нравится использовать сжатие? Да потому, что его очень легко внедрить, а эффект заметен сразу же. Мы уже готовы приступить к использованию сжатия, но вначале необходимо разобраться в различных типах сжатия.
В качестве послесловия
В общем, если вы не хотите дополнительно морочить голову, то можно просто архивировать CSS-файлы (в среднем, выигрыш 79%) либо проводить простую «подчистку мусора» перед архивированием (в среднем, выигрыш 82%). Для тех, кто заботится о байтам, могу порекомендовать изучить действие CSS Tidy и Minifier'а (их прелесть заключается в алгоритме перегруппировки селекторов) и использовать их либо разработать собственное приложение.
Если на сайте используется CSS , сервер должен передавать их браузеру каждый раз при запросе ресурса. И это оказывает влияние на скорость загрузки. Чем сложнее и объемнее файлы стилей, тем дольше посетитель будет ждать, пока сайт полностью загрузится. С помощью сжатия CSS можно уменьшить размер кода и повысить производительность сайта.
Меньше редиректов — легче серверу
Примечание: далее идут мои рассуждения на тему и собственное решение.
Во-первых, тесты под некоторыми Konqueror'ами показали, что он тоже не понимает заархивированных файлов (CSS- и JS-), поэтому ради безопасности десятых долей процента посетителей от сердечного приступа (когда они увидят сайт без соответствующих стилей) в этот набор правил его стоит добавить.
Во-вторых, мне не нравится, что при каждом запросе (ну или при 99%) к статичному ресурсу, Apache должен что-то искать и менять физический адрес, по которому этот файл нужно брать. Я против таких решений, поэтому я предложу другой путь: давайте будем переопределять физический адрес ресурса только для «старых» браузеров, а для всех остальных отдавать рядовой файл.
В итоге, логика «переворачивается», и вместо набора «И»-условий мы получаем «ИЛИ»-условия. Первые пять строк уже достаточно подробно обсуждены вверху, я только остановлюсь на последней из них
В ней учитывается, что к статичным ресурсам можно добавлять уникальные GET-строки, чтобы перегружать кеш на клиенте (если ресурс поменялся, то стоит обновить его в кеше, иначе клиенты увидят старую версию). Например, foo.css.gz?v1234 .
Следующие строки (ForceType / set Content-Encoding) форсируют для скриптов и файлов стилей соответствующие MIME-типы и Content-Encoding (ибо как удалось нарыть здесь, так браузеры воспринимают ответ лучше). По совету Q_Zma для mod_rewrite и mod_headers добавил условие его наличия в Apache, если его нет, то браузеры, не поддерживающие gzip'а для CSS/JS-файлов (это, как было заявлено выше, и Safari), не отобразят страницу правильно. Поэтому стоит лишний раз задуматься, применять ли описанную методику в таких условиях.
Единственное неудобство, которое может возникнуть — придется поменять все вызовы JS-/CCS-файлов на аналогичные с .gz, но если изначально работать с ними, то ничего менять и не придется. При изменении самих ресурсов нужно будет снова их заархивировать и поменять строку вызова в HTML-файлах (чтобы избежать кеширования). При промышленном подходе к разработке, все эти действия автоматизируются, а при кустарном — трудозатраты не так существенны по сравнению с увеличением скорости загрузки сайта (если, конечно, не собирать проект прямо на боевом сайте, без конца gzip'я один и тот же файл :).
Старая версия правил (без учета Konqueror'а) тестировалась здесь, полет нормальный.
UPD: по информации, подчерпнутой отсюда, добавлен заголовок Header append Vary User-Agent , ибо условие для выдачи gzip'ованного содержание принимается в том числе на основе UserAgent. Однако, после этой статьи добавлено Header set Cache-control: private для предотвращения проблем с IE.
Инструменты разработки
- yui.github.io : предоставляет возможность минимизировать JS файлы для веб-проектов.
Преимущества уменьшения файлов
Решение уменьшить размер CSS , JS и HTML файлов предоставляет преимущества, как пользователям сайта, так и его владельцу. Использование минификации - это отличный способ оптимизировать ваш сайт, и это легко реализовать с помощью рассмотренных инструментов и плагинов.
Дайте знать, что вы думаете по этой теме материала в комментариях. Мы очень благодарим вас за ваши комментарии, подписки, отклики, дизлайки, лайки!
Примечание: ниже частичный перевод статьи "Compress JavaScript and CSS without touching your application code", в которой описывается статичное сжатие CSS- и JS-файлов на сервере и корректная выдача их затем клиенту. Далее даны мои комментарии с более комплексным решением. Приношу извинения, если для кого-то тема будет слишком знакома или неинтересна: в Рунете нормальной статьи на данную конкретную тематику обнаружить не удалось.
Для обеспечения корректного архивирования вашего веб-контента, по-видимому, наиболее общий подход будет заключаться в выполнении по порядку следующих пунктов:
- Проверить, умеет ли клиент принимать файлы в формате gzip-encoded.
- Обеспечить соответствующий вывод на стороне сервера через gzip-функции, либо уповать на то, что всем этим займется непосредственно Apache.
- Поиграться с .htaccess , чтобы обеспечить корректный content type.
Проблема заключается в том, что все эти шаги вам придется выполнить самостоятельно. Сжатие данных «на лету», возможно, не будет наиболее оптимальным решением, тем более, что я не являюсь фанатом архивации файлов в серверных приложениях — этим должен заниматься сам сервер.
Минификация HTML
Существует множество инструментов для минификации файлов. Многие CMS также предлагают плагины и расширения для минификации CSS , JS и HTML - файлов.
Разница между минификацией и сжатием
Минификация и сжатие CSS файлов – это не одно и то же. Хотя оба этих метода предназначены для уменьшения времени загрузки. Различие заключается в том, как они работают. Сжатие используется для уменьшения размера файла при помощи алгоритмов сжатия, таких как Gzip или brotli . Файлы сжимаются перед отправкой клиенту.
Следовательно, процесс сжатия осуществляется следующим образом:
- Файл сжимается с помощью алгоритма сжатия;
- Выполняется запрос для сжатой версии файла;
- Сжатый файл отправляется от сервера к клиенту;
- Клиент распаковывает файл и считывает информацию.
Поддерживаемые алгоритмы сжатия могут варьироваться в зависимости от сервера, а также браузеров. Когда браузер отправляет запрос серверу, он сообщает ему, какой метод сжатия поддерживает, так что сервер может оптимизировать отклик для этого браузера.
Если браузер не поддерживает конкретный алгоритм сжатия, сервер будет отправлять данные в первоначальном виде ( без обработки ).
Google Chrome и прочий зоопарк
С выходом браузера от Google, который прикидывается Safari, и появлением gzip у последнего ситуация немного изменилась. Поэтому предлагаю следующий набор правил в качестве наиболее актуального:
В Safari есть небольшой баг: этот браузер не воспринимает файлы стилей/скриптов с расширением .gz. Но это, естественно, обходится. Нам нужно на месте обычных файлов просто иметь архивы (чтобы лишний раз не перенаправлять браузеры), а на месте .nogzip -файлов (см. чуть выше по коду) должны находиться непожатые версии. Такие вот пироги.
Если что-то осталось неясным после прочтения последнего раздела, то алгоритм действий должен быть следующим (большое спасибо godfather за помощь в формулировке):
- Добавляем описанные выше инструкции в конфигурационный файл Apache или .htaccess
- Пакуем файлы (с помощью 7-zip или gzip ) и кладем на место обычных (расширение у файлов должно остаться прежним, .css или .js ). Например, вы берете файл anyname.css , пакуете его 7-zip, у вас получается файл anyname.css.gz , переименовываем его обратно в anyname.css и заливаем на сервер. Для gzip все немного проще:
Joomla! Расширение для минификации
CMS Joomla также предлагает расширение для оптимизации сайта под названием JCH Optimize , которое уменьшает размер JavaScript и производит сжатие CSS файлов . Оно также предоставляет возможность включить GZIP сжатие для агрегированных файлов.
Результаты
Что изображено на графиках? Выведен выигрыш (в процентах) относительно несжатого файла (по оси ординат отложены проценты). По оси абсцисс отложены размеры исходных файлов. Внимание: файлы не расположены по размеру. Данные упорядочены по общей степени сжатия.
Вначале по каждому инструменту отдельный график: выведены показатели для простой минимизации файлов, также для минимизации с последующим архивированием. Серым пунктиром показана степень сжатия (в процентах) файла при помощи простого gzip'а.
CSSMin:
Minify:
YUI-compressor:
Minifier 0.5:
CSS Tidy 1.3:
Далее все инструменты на одном графике (без архивирования). Действительно, заметен явный выигрыш Minifier'а.
При архивировании, однако, все минимизаторы ведут себя примерно одинаково.
Для уточнения картины при архивировании минимизированного файла я отдельно выделил их преимущество относительно обычного архивирования.
Тут уже видно лучше, что CSS Tidy ведет себя, в целом, лучше остальных скриптов (хотя, за исключением редких случаев, выигрыш не превосходит 6% относительно обычного архивирования).
Минификация JS
Онлайн
Почему нужно использовать сжатие?
Для того чтобы протестировать эффективность сжатия и оценить экономию, которую оно может дать для разных типов файлов, я взял несколько распространенных типов файлов, с которыми вы можете столкнуться, и сжал их с помощью алгоритма Gzip.
Влияние сжатия алгоритмом Gzip на размер файлов
Тип файла | Размер до сжатия | Размер после сжатия алгоритмом Gzip | Экономия |
HTML | 6,52 кБ | 2,43 кБ | 62,74% |
CSS | 91,57 кБ | 21,12 кБ | 76,93% |
CSS | 13,51 кБ | 3,89 кБ | 71,21% |
JavaScipt | 1,75 кБ | 1,18 кБ | 32,58% |
Image | 6,76 кБ | 6,51 кБ | 3,7% |
В приведенной выше таблице указана разница в размере файлов до использования сжатия и после. Для некоторых файлов разница очень существенна – экономия приблизительно 75%. Gzip сжатие основано на нахождении подобных строк в текстовом файле и временной замене этих строк, что в итоге снижает общий размер файла.
Источники CSS-кода
В качестве исходных файлов брались таблицы стилей с некоторых достаточно сильно посещаемых ресурсов: 1383, 8818, 11052, 11851, 13040, 19744, 29529, 47175, 58892, 67244, 131446. Каждый из них был подвергнут действии минимизатора (для Minifier'а дополнительно файл склеивался в одну строку, вероятно, это временный баг текущей версии), затем архивировался. Корректность минимизации не проверялась (с этим в некоторых особо агрессивных случаях могут быть проблемы: CSS Tidy с определенными настройками перегруппировывает селекторы, и часть логики теряется).
Какие-либо закономерности степени сжатия файлов от их параметров обнаружить не удалось.
Разница в размере файлов до и после применения Gzip-сжатия
Twitter Bootstrap – это популярный CSS - фреймворк, который поможет вам быстро разработать стили CSS и моментально запустить ваш проект. Данный фреймворк был разработан командой Twitter, и может оказать реальную помощь в настройке CSS.
Применяемые в Twitter Bootstrap CSS файлы содержат большое количество пробелов и style тегов, делающих их отличными экземплярами для сжатия. Нам удалось сократить размер главного файла bootstrap.css до 21,12 кБ и сэкономить почти 76%! Это отличный пример того, зачем нужно сжимать ваши файлы CSS и JavaScript.
Минификация CSS , JS , HTML файлов (не путать со сжатием CSS ) включает в себя удаление любых ненужных символов из файла, чтобы уменьшить его размер и тем самым ускорить загрузку.
Ниже приведены примеры того, что удаляется во время минификации файла:
- Символы пробелов;
- Комментарии;
- Разрывы строк;
- Разделители блоков.
В большинстве случаев процесс минификации не влияет на файл, а оптимизирует его для загрузки. Особенно полезна минификация CSS , JS и HTML-файлов . Кроме этого Google при ранжировании учитывает быстродействие ресурса, а минификация помогает ускорить работу сайта.
Чтобы различать минифицированные файлы, в их имена добавляется расширение .min ( например: foobar.min.css ).
Уменьшение времени загрузки благодаря оптимизации CSS
Нагрузка на сервер возрастает по мере того, как увеличивается размер CSS-файлов . Если сайт открывается с помощью клиента ( браузера ), все CSS-данные должны быть запрошены и переданы. Поэтому настоятельно рекомендуется осуществлять сжатие CSS и JS онлайн . Перечисленные выше инструменты помогут вам в этом. Но полная оптимизация не может быть выполнена с помощью сервисов и приложений. Эту задачу нужно выполнять самостоятельно.
Дайте знать, что вы думаете по этой теме материала в комментариях. Мы очень благодарим вас за ваши комментарии, отклики, подписки, лайки, дизлайки!
Прочитав эту статью вы узнаете, почему так важно использовать сжатие, и какое влияние оно может оказывать на ваш веб-сайт.
Эта статья основана на двух ключевых идеях, и мы рассмотрим, как они приблизят нас к нашей цели – сайту с отличной производительностью:
Инструменты
Включаем статическое сжатие
Однако, существует способ обойтись просто парой строчек в конфиге (.htaccess), если потратить пару минут и самому заархивировать все необходимые файлы. Предположим, что у нас есть JS-библиотека prototype.js на сервере. Заархивируйте ее через gzip (при помощи 7-zip или еще чего-нибудь, если вы работаете под Windows). В итоге, у вас должен появиться файл prototype.js.gz. Положите его в ту же директорию на сервере, что и исходный файл. Если вы работаете через командную строку в шеле, то достаточно выполнить:
Теперь добавим следующие строки в .htaccess в корень вашего сайта (прим. лично я бы рекомендовал записать прямо в конфиге апача). При этом нужно будет включить RewriteEngine, если он еще не подключен:
В первой строке мы сообщаем серверу, что файлы с расширением .gz нужно отдавать с gzip encoding-type, чтобы браузер понял, что перед ним архив, а не текстовый файл. Второй строкой проверяется, принимает ли браузер архивированные файлы, при этом следующие строки просто не отработают, если этот тест провалится. Далее мы исключаем Safari, у которого проблемы с правильным восприятием архивированного содержимого. На четвертой строке мы проверяем, что архивный файл существует, и если это так, то добавляем .gz к существующему имени файла.
С такой конфигурацией вы можете загружать сжатые версии ваших файлов на сервер и Apache сможет отдавать их вместо обычных, если сможет это сделать, при этом вам не придется менять теги или любые вызовы в веб-приложениях.
Возможности оптимизации CSS
Время загрузки становится проблемой, когда речь идет о передаче данных на мобильные устройства. Это привело к расширению диапазона задач, которые решаются с помощью CSS . В результате, язык каскадных таблиц стилей перенимает все больше и больше функций, за которые ранее отвечал JavaScript . Шаблоны CMS часто используют раздутые файлы CSS , которые снижают производительность сайта.
В этой статье мы приведем несколько приемов, которые можно использовать для сжатия CSS и JS .
вместо полной формы:
Минификация CSS
Онлайн
Инструменты разработки
Пример минификации
В следующем примере показано, как CSS файл выглядит до и после минификации.
ДО CSS минификации:
ПОСЛЕ CSS минификации:
После минификации CSS-файл стало сложнее читать, поскольку отсутствуют переносы строк, разделители и т.д. Но оптимизированный вариант имеет меньший размер, что ускоряет его загрузку, как и сжатие CSS онлайн .
Drupal модуль минификации
В сообществе Drupal популярным вариантом для минификации является модуль Minify . Он позволяет минимизировать HTML , JavaScript файлы и использует компилятор Google Closure , чтобы проанализировать минификацию. Конфигурация данного модуля проходит быстро.
Повторяющиеся строки
Этот вид сжатия в особенности подходит для веб-разработок, потому что файлы HTML и CSS обычно содержат изрядное количество повторяющихся строк, таких как пробелы, теги и определения стилей. Если мы опять обратимся к таблице выше, то вы заметите, что самая большая экономия получилась при применении сжатия к текстовым файлам, а применительно к графическим файлам сжатие не дает практически никакого выигрыша, потому что эти файлы уже сжаты.
Также есть прямая взаимосвязь между размером файла и получаемой экономией (степенью сжатия), и, как правило, чем больше файл, тем больше выигрыша дает сжатие. Это связано с тем, что сервер лучше сжимает большие файлы, которые содержат больше пробелов и повторяющихся символов.
Chrome Developer Tools имеет встроенный инструмент, который позволяет увидеть и сравнить разницу в размерах файлов до и после применения сжатия. Эта разница показана на рисунке ниже.
Инструменты
Выводы
Во-первых, gzip и так показывает хорошее сжатие (до 81%), поэтому в большинстве случаев можно пользоваться только им.
Во-вторых, простая «подчистка мусора» (удаление всех символов, которые можно безболезненно убрать по спецификации CSS) вместе с архивированием дает весьма неплохой результат (общее сжатие до 83%) относительно других инструментов, но при этом не теряется логика селекторов (т.е. такое сжатие абсолютно безопасно).
В-третьих, замечен локальный выброс при файле небольшого размера. Он связан с тем, что GZIP изначально его плохо сжал (вероятно, из-за маленькой исходной библиотеки слов), поэтому все минимизаторы показали себя на высоте. Однако, файлы такого размера (порядка 1Кб) стоит либо объединять с другими файлами, ибо тратить время на дополнительный запрос на сервер из-за такой мелочи не очень рационально, либо включить в сам HTML-файл. Так что данный выброс я не считаю серьезным основанием действительно использовать какой-либо минимизатор только из-за выигрыша в 3–4% от размера исходного файла.
В-четвертых, повторяется ситуация со сжатием JS-файлов, когда библиотека, жмущая лучше всего, проигрывает более умеренной сопернице при дополнительном архивировании результата. Только в данном случае это Minifier и CSS Tidy.
Все полученные файлы можно также скачать единым архивом здесь (всего 12х12 = 144 файла).
WordPress плагины для минификации
- Better WordPress Minify ;
- Autoptimize .
Многие плагины кэширования также предлагают возможность минификации. Например, Cache Enabler поставляется с возможностью включения минификации HTML и JS . Использование этой функции позволяет уменьшить время загрузки веб-страниц, но в некоторых случаях это может привести к конфликту с другим плагином сжатия CSS WordPress .
Циклические редиректы
В некоторых случаях возможны проблемы со внутренними редиректами для Apache (они превращаются во внешние из-за взаимодействия с текущей логикой редиректов для сайта). В таких случаях (если возникла проблема циклического перенаправления запроса к несжатым ресурсам) стоит прописать в конфигурации следующее:
Таким образом мы запрещаем редиректы для файлов, имеющих .nogzip в своем имени, и предотвращаем образование циклов. Спасибо anycolor за указание на такую проблему.
Сжатие 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 и выше.
Читайте также: