Для чего используется сжатие css файла
Для чего используется сжатие css файла
После статей «Практический CSS/JS: архивируем все!» и «JavaScript: жать или не жать» стало ясно, что проблема уменьшения CSS-файлов в размере действительно актуальна, и общественности хотелось бы аналогичного исследования уже конкретно для такой оптимизации. Которое, собственно, и приведено ниже.
В интернете было найдено 6 различных инструментов для минимизации CSS-кода (однако, с одним из них, перловым модулем, разобраться не удалось, поэтому приведены результаты только для 5), далее ими обрабатывались несколько примеров, которые затем подвергались еще и архивированию. Результаты, опять-таки, представлены в виде графиков, ибо таблицы я нахожу менее информативными.
Инструменты
Источники CSS-кода
В качестве исходных файлов брались таблицы стилей с некоторых достаточно сильно посещаемых ресурсов: 1383, 8818, 11052, 11851, 13040, 19744, 29529, 47175, 58892, 67244, 131446. Каждый из них был подвергнут действии минимизатора (для Minifier’а дополнительно файл склеивался в одну строку, вероятно, это временный баг текущей версии), затем архивировался. Корректность минимизации не проверялась (с этим в некоторых особо агрессивных случаях могут быть проблемы: CSS Tidy с определенными настройками перегруппировывает селекторы, и часть логики теряется).
Какие-либо закономерности степени сжатия файлов от их параметров обнаружить не удалось.
Результаты
Что изображено на графиках? Выведен выигрыш (в процентах) относительно несжатого файла (по оси ординат отложены проценты). По оси абсцисс отложены размеры исходных файлов. Внимание: файлы не расположены по размеру. Данные упорядочены по общей степени сжатия.
Вначале по каждому инструменту отдельный график: выведены показатели для простой минимизации файлов, также для минимизации с последующим архивированием. Серым пунктиром показана степень сжатия (в процентах) файла при помощи простого gzip’а.
CSSMin:
Minify:
YUI-compressor:
Minifier 0.5:
CSS Tidy 1.3:
Далее все инструменты на одном графике (без архивирования). Действительно, заметен явный выигрыш Minifier’а.
При архивировании, однако, все минимизаторы ведут себя примерно одинаково.
Для уточнения картины при архивировании минимизированного файла я отдельно выделил их преимущество относительно обычного архивирования.
Тут уже видно лучше, что CSS Tidy ведет себя, в целом, лучше остальных скриптов (хотя, за исключением редких случаев, выигрыш не превосходит 6% относительно обычного архивирования).
Выводы
Во-первых, gzip и так показывает хорошее сжатие (до 81%), поэтому в большинстве случаев можно пользоваться только им.
Во-вторых, простая «подчистка мусора» (удаление всех символов, которые можно безболезненно убрать по спецификации CSS) вместе с архивированием дает весьма неплохой результат (общее сжатие до 83%) относительно других инструментов, но при этом не теряется логика селекторов (т.е. такое сжатие абсолютно безопасно).
В-третьих, замечен локальный выброс при файле небольшого размера. Он связан с тем, что GZIP изначально его плохо сжал (вероятно, из-за маленькой исходной библиотеки слов), поэтому все минимизаторы показали себя на высоте. Однако, файлы такого размера (порядка 1Кб) стоит либо объединять с другими файлами, ибо тратить время на дополнительный запрос на сервер из-за такой мелочи не очень рационально, либо включить в сам HTML-файл. Так что данный выброс я не считаю серьезным основанием действительно использовать какой-либо минимизатор только из-за выигрыша в 3–4% от размера исходного файла.
В-четвертых, повторяется ситуация со сжатием JS-файлов, когда библиотека, жмущая лучше всего, проигрывает более умеренной сопернице при дополнительном архивировании результата. Только в данном случае это Minifier и CSS Tidy.
Все полученные файлы можно также скачать единым архивом здесь (всего 12х12 = 144 файла).
В качестве послесловия
В общем, если вы не хотите дополнительно морочить голову, то можно просто архивировать CSS-файлы (в среднем, выигрыш 79%) либо проводить простую «подчистку мусора» перед архивированием (в среднем, выигрыш 82%). Для тех, кто заботится о байтам, могу порекомендовать изучить действие CSS Tidy и Minifier’а (их прелесть заключается в алгоритме перегруппировки селекторов) и использовать их либо разработать собственное приложение.
Как сжать код HTML, CSS, JavaScript с помощью плагинов и без
Когда вы сжимаете файлы CSS, HTML и JavaScript на своем веб-сайте, то вы тем самым ускоряете его. И хотя, в данном случае, речь не идёт о глобальном ускорении сайта на WordPress, но хоть и немного, но скорость сайта за счет этого увеличивается.
Термин сжатие или, по другому, «минимизация» (Minify) — это процессы удаления ненужных символов в исходном коде.
Эти символы включают в себя пробелы, разрывы строк, комментарии и разделители блоков, которые полезны для нас, людей, но не нужны для машин.
Мы минимизируем файлы сайта, содержащие код CSS, HTML и JavaScript, и тогда, браузер посетителя будет читать их чуть быстрее.
Вот пример того, как выглядит минимизация CSS.
Конечно, это всего лишь небольшой пример использования фрагмента кода CSS, но вы можете представить, сколько места это сэкономит при сжатии тысяч строк кода.
Итак, если вы хотите сделать это вручную, то технически это возможно. Но стоит сделать всего одну ошибку, и сайт может стать кривым.
И что самое плохо, не факт, что вы это сразу увидите (у посетителя может быть другое устройство, с другим разрешением и даже ориентацией экрана).
Поэтому, такую оптимизацию лучше сделать с помощью специальных сервисов.
Как сжать HTML, CSS и JavaScript с помощью онлайн-инструментов.
Общий принцип работы онлайн инструментом для сжатие просты и обычно включают следующие шаги:
В этом примере я использовал инструмент для минимизации кода с сайта minifycode.com. На этом сайте собраны инструменты сжатия кода сразу для всех трёх типов файлов: HTML, CSS, JavaScript.
Для начала, найдите и скопируйте нужные файлы и откройте его с помощью простого редактора (лучше всего использовать Блокнот или его аналоги, или специализированный софт для программистов, такой как Sublime Text. Программы наподобие Word, не пойдут).
После этого, выделите и скопируйте код. (Ctrl+A, Ctrl+C).
Перейдите на minifycode.com и откройте вкладку CSS minifier. Затем вставьте код CSS в поле ввода и нажмите кнопку «Minify CSS».
После того, как код будет готов, скопируйте его и вставьте обратно в свой текстовый редактор (только не забудьте перед этим удалить предыдущее содержимое файла).
Вот и всё! Теперь загрузите обратно файл на хостинг, и ваш сайт станет чуточку быстрее. Вот какой результат получился у меня.
Точно также, нужно поступить и с файлами JavaScript, HTML.
Другие сайты для сжатия.
Есть и другие сервисы для сжатия. Вот основные из них.
Closure Compiler (только JS) — является частью Closure Tools, набора инструментов от разработчиков Google. Он позволяет минимизировать Javascript файл и имеет ряд других полезных опций. Вы можете загрузить Javascript, введя URL-адрес файла, а затем выбрать способ оптимизации и форматирования кода. Например, вы можете выбрать оптимизацию своего кода путем удаления пробелов, только если вы это заходите.
cssminifier.com и javascript-minifier.com (CSS и JS) — эти два мини-сжимателя просты в использовании. Просто вставьте свой код и затем нажмите кнопку Minify для вывода сжатого кода.
Все эти инструменты бесплатны и просты в использовании. Вы можете попробовать каждый из них, и сравнить степень их сжатия.
Сжатие файлов HTML, CSS и JavaScript с помощью плагинов WordPress.
Самый простой способ минимизировать ваши HTML, CSS и JavaScript файлы в WordPress — это использовать плагин. Это позволит автоматически оптимизировать файлы сайта для ускорения загрузки страницы с помощью нескольких нажатий кнопок.
Есть много плагинов, которые позволяют сжать код файлов, но я кратко упомяну только несколько самых известных.
Autoptimize
Это, пожалуй, самый популярный плагин для минимизирования HTML, CSS и JavaScript. Он популярен, прост в использовании и полон мощных функций для улучшения производительности. Он может объединять скрипты, минимизировать и кэшировать код сайта. В качестве бонуса у вас есть дополнительные опции для оптимизации Google Fonts, изображений и многое другое.
Чтобы использовать Autoptimize, его нужно скачать, установить и активировать плагин из панели инструментов WordPress в разделе «Плагины» — «Добавить новый».
Теперь переходим к пунктам: Оптимизировать код JavaScript?,
Оптимизировать код CSS?, Оптимизировать код HTML? и выставляем соответствующие галочки.
WP Fastest Cache
Это бесплатный плагин для кеширования WordPress, пользующийся огромной популярностью. Плагин выполняет различные оптимизации производительности, включая объединение и минимизацию файлов HTML, CSS и JavaScript для повышения производительности.
После того, как плагин установлен, просто перейдите на вкладку WP Fastest Cache на боковой панели управления сайтом WordPress Dashboard. На вкладке настроек вы найдете опции для объединения и минимизации файлов HTML и CSS. Хотя минимизация JavaScript доступна только в профессиональной версии.
И не забудьте нажать кнопку Submit, для того, чтобы применить новые настройки.
W3 Total Cache
Это еще один популярный плагин для ускорения сайта. И здесь, для сжатия файлов HTML, CSS и JavaScript нужно выставить всего одну галочку.
Заключение.
Если вам нужно чтобы ваш сайт быстрее загружался, и как следствие, занимал более высокие позиции в поиске, то вам нужно сжать HTML, CSS и Javascript.
И хотя они не дают прям совсем мощного прироста скорости, но прирост есть. А если учесть, насколько это просто сделать, то это нужно сделать.
С любым доступным онлайн-инструментом вы можете легко минимизировать свой код для любого веб-сайта. А для пользователей WordPress есть несколько мощных плагинов, позволяющих автоматически минимизировать эти файлы в несколько щелчков мыши.
Вышеперечисленные плагины – это, лишь некоторые из лучших плагинов, которые позволяют ускорить сайт. На самом деле, у вас уже может быть установлен плагин для ускорения, в котором уже есть своя функция по сжатию файлов.
Например, многие плагины для кэширования включают параметр минимизации. Я надеюсь, что эта статья обратит ваше внимание на этот способ, и ваш сайт станет чуточку быстрее.
Ну а если у вас остались еще вопросы, то задавайте их в разделе с комментариями
GZip сжатие CSS и JS файлов без дополнительной нагрузки на хостинг на Apache2
Современный интернет не стоит на месте и постоянно развивается. Еще совсем недавно все сайты были построены с помощью неповоротливых таблиц, а уже сегодня рулит легкая блочная верстка.
Но не смотря на то, что div`ная верстка позволила уменьшить «тяжесть» сайтов, грузиться быстрее они не стали. В чем же причина?
С ростом скоростей интернета у конечных пользователей, большинство вебмастеров начали обвешивать свои сайты разными JS-красивостями: Greygox, Fancybox, красивыми галереями и другими вещами. Это все круто и красиво, но это существенно уменьшает скорость загрузки сайта, делая его тяжелее.
GZip-сжатие js-файлов – это та золотая середина, которая может облегчить страдания вашего посетителя.
Зачем нужно GZip сжатие CSS и JS файлов?
С каждым днем в интернете появляется огромное количество сайтов, а это непосредственные конкуренты, которые стремяться отвоевать себе место под солнцем, сместив ваш сайт на нижние позиции.
Наверное, никто не будет спорить, что успех компании по продвижению сайта в поисковых системах зависит не только от количества ссылок на ваш сайт и их качества. В первую очередь любой специалист по продвижению обращает внимание на внутреннюю оптимизацию сайта, которая определяет легкость успеха в продвижении. Скорость отклика вашего сайта и быстрота вывода информации – это не самое последнее дело во внутренней оптимизации. Об этом уже заявил Google и не скрывает Yandex, поэтому не стоит пренебрегать этим.
К примеру, всем известная библиотека jQuery, подключаемая практически на каждом сайте, весит примерно 90 Кб. Сжатая GZip`ом она будет занимать порядка 30 Кб. Согласитесь, что это не мало. Если учесть, что помимо jQuery у Вас подключены еще несколько сторонних JS-файлов, то это точно занимает половину всего веса загружаемой страницы. А в некоторых случаях и того больше. Можете проверить работоспособность этого метода на денвере. Я уверен, что Вы почувствуете даже на нем разницу в скорости работы.
Как это работает?
Каждый браузер, вплоть до мобильных, уже давно научился обрабатывать GZip сжатие, поэтому со стороны клиента никаких проблем возникнуть не должно.
В интернете я находил, очень много способов, которые позволяли использовать GZip сжатие, но почему-то делали это как-то извращенно. Распространенным методом является сжатие JS файлов при обращении пользователя. Допустим зашел я на ваш сайт, запросил мой браузер файл jquery.js с вашего хостинга, и сервер хостинга сжал GZip`ом мне его и отправил. Для меня это хорошо, но если таких пользователей как я зайдет 100 человек, которым потребуется интерактивно заархивировать этот файл, то сервер просто ляжет. Ну или хостер просто вырубит ваш аккаунт из-за превышения допустимой нагрузки.
Это легко реализовать такой замечательной штукой как htaccess.
Организовываем GZip сжатие CSS и JS файлов
Для того, чтобы внедрить у себя на сайте эту «технологию», необходимо:
Этот кусок кода при запросе любого js- или css-файла перенаправляет на файл с таким же именем в этой директории, но с другим расширением. Поэтому изменять в нем ничего не нужно.
Как проверить работоспособность сжатия CSS и JS?
Проверить можно плагином http-header-live для Firefox. Открываем окно плагина Live HTTP Headers и переходим на подопытный сайт.
Несомненных плюса у этого метода два:
Комментарии
Может надо и попробовать, хотя сейчас действительно скорости интернета возросли и если ещё и сайт лежит на нормальном хостинге, то проблем со скоростью загрузки элементов сайта нет.
Динамическое и статическое сжатие передаваемых данных
Статическое и динамическое сжатие CSS-стилей и JS-скриптов
Я уже писал статью про сжатие передаваемых данных на сайте под руководством CMS WordPress методом gzip. Тогда я описал два способа сжатия передаваемых данных: динамическое и статическое сжатие. Для динамического сжатия я предложил пользоваться услугами специального плагина, а для статического сжатия привел код для файла .htaccess и некоторые необходимые действия. Данный пост полностью повторит ту тему, с той лишь разницей, что тут будут представлены другие инструменты сжатия. А это значит, что Вы можете использовать любой из приведенных методов статического и динамического сжатия.
Ну и пару слов про необходимость сжатия передаваемых данных. Если данные с Вашего сайта, которые запрашивает пользователь, будут передаваться в сжатом виде, то их передача будет проходить гораздо быстрее. А это поможет Вам избежать отказов пользователей и получить довольно ощутимый плюс в карму от поисковых роботов. Ну, а кому не нравится, когда сайт открывается быстро?
Динамическое сжатие передаваемых данных
На момент написания предыдущей статьи, я пользовался услугами плагина Hyper Cache для динамического сжатия передаваемых данных. Это означает то, что данные, которые запросил конечный пользователь, сначала сжимаются на сервере и только потом отправляются конечному пользователю. Браузер пользователя принимает эти данные, разархивирует их и предоставляет на суд пользователя. Минус динамического сжатия состоит в том, что необходимость сжатия передаваемых данных тяжелым грузом ложится на плечи Вашего сервера. Разархивировать сжатый пакет для браузера пользователя не большая проблема. А вот сервер один. И если много пользователей одновременно будут просить сервер уделить им своё процессорное время, то очень скоро Ваш хостер может попросить Вас перейти на более дорогой и более производительный тариф, что может ударить по Вашему карману. А посему, необходимо запастись хорошим хостингом.
Кроме данного минуса, я нашел еще один минус. Только не в динамическом сжатии передаваемых данных, а в самом плагине. Лишний плагин не к чему, особенно если его функционал можно заменить всего лишь одной строчкой, которую необходимо добавить после первой строчки в файле index.php в корневом каталоге Вашего сайта:
Сразу скажу, что данная функция не заменяет весь функционал выше озвученного плагина, но он прекрасно справляется с динамическим сжатием передаваемых данных.
Статическое сжатие передаваемых данных
А теперь по-подробнее про процесс статического сжатия. Для сжатия используйте программу 7-Zip(думаю, что вполне возможно использование любого другого архиватора, который имеет нижеприведенные настройки). При создании архива убедитесь в том, что выставлены следующие настройки:
После этого, Вам необходимо залить(если Вы скачивали корневой каталог к себе на компьютер) корневой каталог обратно на сервер. Убедиться в том, что статическое сжатие данных работает, можно с помощью сервиса Page Speed от Google. Если после анализа Вашего сайта Вы увидите сообщение Включите сжатие, в котором не будут перечислены файлы .css и .js, или Вы вообще не увидите такое сообщение, то всё шикарно. Если же такое сообщение появилось, то либо Вы где-то ошиблись, либо я не так объясняю…
Всего Вам доброго. Да прибудет с Вами динамическое и статическое сжатие передаваемых данных.
Сжатие gzip для js/css/html
Современные браузеры поддерживают сжатый контент, т.к. он является частью спецификации протокола HTTP 1.1. Сжатие текстовых форматов (CSS, Javascipt и HTML) может уменьшить их объем на 70%. Работает все очень просто. Перед отправкой ответа сервер сжимает данные. Браузер при получении сжатого ответа разжимает его и показывает результат. 
Чтобы проверить, использует ли ваш сайт компрессию, используйте Gzip Checker.
Что нужно сжимать?
Сжимать следует все текстовые файлы:
Как включить сжатие?
Nginx
Чтобы включить Gzip в Nginx, добавьте эти строки в конфигурацию сервера:
Apache
Убедитесь, что подключен модуль mod_deflate.
Уровень сжатия
Gzip поддерживает несколько уровней сжатия – от быстрого и худшего до медленного и самого компактного результата. В Nginx его можно регулировать таким образом:
поддерживает значения от 1 (худший) до 9 (лучший)
Имеет смысл использовать значение 5, как среднее для получения лучшего результата и снижения нагрузки на процессор.
Самое важное
Обязательно используйте сжатие (Gzip), это существенно повысит скорость работы вашего сайта для пользователей.
Этот текст был написан несколько лет назад. С тех пор упомянутые здесь инструменты и софт могли получить обновления. Пожалуйста, проверяйте их актуальность.
Как перезапустить nginx после обновления конфигурации
Включение и использование log-файлов для проверки работы Nginx
Уменьшение размера картинок при сохранении качества
Как и зачем используется заголовок Cache-control
Что такое Etag и как его настроить в Nginx
Как исправить ошибку 405 Not Allowed в Nginx
Причины и методы исправления ошибки Gateway Timeout, Nginx
Архитектурные принципы высоконагруженных приложений
301 redirect в Nginx’e
Основы оптимизации работы Web сервера
Минификация (minify) JS/CSS
Как настроить Nginx на максимальную эффективность
Как использовать try_files в настройках Nginx’a
Работа приложения с несколькими бэкендами при помощи Nginx
Где находится nginx.conf и пример настроек
Как пофиксить ошибку «110: connection timed out» while reading response header from upstream
Как исправить ошибку Primary script unknown в Nginx
Как работает Server-Sent API с примерами
Причины возникновения ошибки Ошибка 502 bad gateway в Nginx и методы исправления