Сжимаем и минимизируем CSS при помощи Code Beautifier / Мастерская интернет-разработчика

14 ноября 2008 г. CSSGZipОптимизацияСервисы

Сжимаем и минимизируем CSS при помощи Code Beautifier


И снова обратимся к webo.in для оптимизации блога, теперь он предлагает:

CSS-файлы можно уменьшить в размере.
Рекомендуется воспользоваться инструментом для сжатия CSS-файлов (основанном на проекте CSS Tidy). После этого можно отдавать CSS-файлы в виде архивов с сервера (общий выигрыш до 85%).

Сжатие мы настроили, пришло время минимизировать CSS и рассказать про инструмент для минимизации CSS-файлов (основанном на проекте CSS Tidy) — Code Beautifier.

Что делает данный инструмент?

Он заменяет определённые части кода на более короткие записи, например:

а также уменьшает количество отступов, переводов строк, объединяет блоки и удаляет комментарии. Короче, CSS превращаеться в кашу… и тем самым минимизирует размер файла.

Но, вы скажете: «а как же редактировать эту кашу»? Ответ прост, вам надо хранить резервную и читабельную версию файла, а в продакшн запускать минимизированную!

  • Продакшн версия
  • Резервная версия

После минимизации, мой основной CSS файл стал в два раза меньше размером. Но, на этом не остановимся и включим сжатие CSS файлов, это ещё больше повысит скорость вашего сайта на данном этапе!

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

Есть и подобные инструментарии, но с ними больше возни…

Так как вам придётся также переименовывать все классы и прочие структуры в (x)HTML файлах.

А также изменять пути хранения подключаемых файлов. Хотя можно настроить mod_rewrite конечно для этого дела, но это уже извращение на мой взгляд. Лучше тогда уж повесить все картинки на другой сервер, например с nginx на борту.

Более подробнее о сжатии CSS с результатами тестирования CSS: все о сжатии

P.S. Правда у меня была проблема с CSS, поплыл <blockquote> на страничках, проблема была в том что для тега blockquote{} стили в нормальном CSS были позже вызваны чем body *{} и все было в порядке. Но минимизатор решил объединить одинаковые по содержимому стили и получилось что body *{} вызываеться после вызова blockquote{}, тем самым перекрывая его часть стилей. Я просто передвинул блок с body *{} выше blockquote{} и все заработало нормально 🙂

Несколько дней подряд работаю над шаблоном, который недавно поменял. До этого стоял фиксированный шаблон, как бы я не бился с ним, адаптированным сделать я его не смог, поэтому пришлось поступить иначе – установить уже адоптированный шаблон и переделать его под себя. Сделал всю работу и решил проверить скорость загрузки сайта в PageSpeed, результаты меня, мягко говоря, поразили. Счетчик скорости показывал всего лишь 22/100, так никуда не годиться, что-то надо делать и я начал все оптимизировать. В итоге результат смог улучшить до 65/100, но и на этом я не собираюсь останавливаться. Своими методами, я с радостью поделюсь с вами, так что подписывайтесь на обновления в низу статьи и будьте всегда в курсе.


В этой статье мы рассмотрим плагин Autoptimize, вклад, конечно, он внес не большой, но все-таки немного помог, увеличив хоть как-то показатели. Перед показом страницы, плагин собирет все JS файлы в один и выводит в конце страницы, то же самое происходит и с CSS файлами. Кроме этого вдобавок он еще оптимизирует и код HTML. Рекомендаций его обязательно ставить, я не даю, но и не ставить тоже. В общем, выбор за вами, а за мной описание настроек.

Проходим стандартный процесс установки, после чего в настройках у вас появиться новый пункт Консоль > Настройки > Autoptimize


Основные настройки.

Отмечаем обязательно эти пункты:

  • Оптимизировать код HTML
  • Оптимизировать код JavaScript
  • Оптимизировать код CSS

Сохранять комментарии HTML – если в коде страницы есть какие-то важные комментария о работе плагинов (например, Super Cache выдает инфорцию на сколько страница стала загружаться быстрее) то нужно отметить этот пункт, в других же случаях отмечать его не стоит.

Generate data: URIs for images – что делает эта настройка, я так до конца не понял, какие-то изображения станут фоновыми, что в свою очередь тоже должно ускорить сайт.

Можно отметить, но толку большого не будет.


Дополнительные настройки.

В вверху страницы есть кнопочка под названием “Show advanced settings”, после ее нажатия, всплывут дополнительные настройки.

Force JavaScript in <head> – плагин подключает JavaScript в конце страницы, но из-за этого могут появляться различные ошибки, при подобных проблемах просто отметьте этот пункт.

Look for scripts only in <head> — работать только со скриптами в <head> . Использовать желательно с предыдущей настройкой.

Exclude scripts from Autoptimize – список скриптов которые нужно исключить. Эти настройки лучше вообще не трогать.

Add try-catch wrapping – исключать нерабочие скрипты. Если вы не уверены в работоспособности скриптов на вашем сайте, отметьте этот пункт, и они будут исключены.

Look for styles only in <head> — производить работу только со стилями расположенными в <head>. Не понимаю, зачем вообще данная опция.

Inline and Defer CSS – стили CSS будут загружаться после загрузки HTML. Опять что-то странное, естественно не отмечаем.

Inline all CSS – встраивает стили CSS в HTML документ. Вес HTMLстраниц очень сильно увеличиться, активировать, тоже не стоит.

Exclude CSS from Autoptimize – та же история что и с исключением скриптов, только на этот раз со стилями. Как и в прошлый раз, советую вам ничего не изменять.

CDN Options – это тоже лучше не трогать.

Информация о КЭШе – при активации дополнительных настроек вылезает еще и статистика. Показывается место хранение кеша, сколько файлов храниться в кеше (на скрине подчеркнул). Если их количество превышает 80, то советую насторожиться, хорошо проверить ваш сайт и удалить плагин.

Save aggregated script/css as static files – отметить если у вас есть подозрение что сервер не правильно обрабатывает и сжимает файлы.

Было отмечено по умолчанию, так решил и оставить.

Ну и самое веселое это странный вопрос – “Начнем?” И ответ “Да”. Конечно, я понимаю, что это, скорее всего информация, что плагин работает, но все равно выглядит забавно.


Создавайте хорошие сайты. До встречи.

Еще 4 материала, которые возможно Вам понравятся:

Minify your CSS

Online CSS Minifier/Compressor. Free! Provides an API. Simple Quick and Fast.

Input CSS

Minified Output

Language Examples

Click on the language of your choice:

wgetCurlNode.jsPythonRubyPerlPHPC#

More Languages

I’d love to add more examples in your favourite programming language, so feel free to send them my way. Email andychilton at that gmail place in the sky or tweet to me @andychilton.

API — General

To minify/compress your CSS perform a POST request to with the parameter set to the CSS you want to minify.

POST https://cssminifier.com/raw?input=…

To see implementations in other languages see the Language Examples pages above.

Plugins

Many of our users have made plugins for various editors which are listed on the plugins page.

Programs

Lots of people are making little programs to use CSS Minifier — see the programs page.

(Ends)

.

Further Reading

In my investigation, I discovered coding patterns that prevented YUI Compressor from performing variable name replacement. By modifying or avoiding these coding patterns, you can improve the YUI Compressor’s performance.

Better JavaScript Minification

Running your JavaScript code through YUI Compressor results in tremendous savings by default, but there are things you can do to increase the byte savings even further.

Helping the YUI Compressor

A minifier removes the comments and unnecessary whitespace from a program. Depending on how the program is written, this can reduce the size by about half.

An obfuscator also minifies, but it will also make modifications to the program, changing the names of variables, functions, and members, making the program much harder to understand, and further reducing its size in the bargain.

Minification vs Obfuscation

When we talk of style here, we are not talking about fads and fashions, nor are we talking about CSS or conventions of layout or typography.

We are talking about timeless qualities of expression which can substantially increase the value of a codebase. For companies whose valuations are are inextricably bound to their codebases, style should be a vital concern.

The Elements of JavaScript Style [ Part 1 | Part 2 ]

Добавить комментарий

Закрыть меню