Доброе утро, дорогие друзья! Получилось так, что неделя посвящена, в большей степени, оптимизации и ускорению загрузки лендинг пейдж. Сегодня продолжим “маньячить” в этой области. На очереди оптимизация css кода. Я расскажу вам про онлайн сервис для оптимизации таблиц стилей.

Эти сервисы довольно просты и работают по принципу:

“Вставил неоптимизированный код. Подождал несколько секунд. Скопировал оптимизированный код”

Как видите – это довольно просто и не затратно, но не все находят время, чтобы заняться этим. А зря!

Онлайн оптимизация css

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

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

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

Поэтому оптимизируем, но не сходим с ума — это первое.

Второе — это то, что при использовании сервисов, которые предлагают оптимизацию css кода, важно понимать, что там происходит и что оптимизируется. Сейчас я покажу вам несколько примеров.

Например, цвета. Обычно, мы задаем их в стандарте RGB. Белый фон для элемента задается следующим образом

Background: #ffffff;

Но не все знают, что если первые 3 значения повторяются, то можно оставить только их. Например, так:

Background: #fff; background: #000; color: #123;

Следующее, что приходит на ум – это отступы (padding и margin)

Padding: 10px 20px 10px 20px; /*вместо*/ padding: 10px 20px; margin: 15px 20px 15px 20px; /*вместо*/ margin: 15px 20px;

Также, оптимизировать css код можно за счет сокращенного задания шрифтов:

Font: bold 18px Verdana, Arial, sans-serif;

Font-size: 18px; font-family: Verdana, Arial, sans-serif; font-weight: bold;

Как видите – одна строчка против трех. И таким образом, иногда, удается уменьшить вес таблицы стилей на 20 – 30%.

Третье, о чем стоит помнить, — это то, что всегда перед любой оптимизацией, будь то картинки или css, нужно делать резервную копию (на случай непредвиденной ошибки или еще чего). Просто возьмите себе за правило всегда делать копию перед редактированием.

Теперь – все. Переходим к сервису.

Обзор сервиса для онлайн оптимизации css кода.

Большинство людей пользуются такими популярными сайтами для оптимизации css кода:

alexvaleev.ru/cssoptimizer

css-school.ru/optimise

Функционал фактически одинаковый, простой и понятный. Но, проанализировав их, я нашел как плюсы, так и недостатки. Давайте посмотрим на один из них — css-school.ru/optimiser

Слева окно для вставки css кода, а справа настройки параметров оптимизации. Разберем подробнее окно.

Степень сжатия.

Для того, чтобы текст оставался удобочитаемым, необходимо поставить стандартную степень сжатия, в таком случае каждое новое свойство будет писаться с новой строки. Если выставить «высокую» или «максимальную», то размер файла будет меньше, но все будет записано в одну строчку. Это не очень удобно для дальнейших правок, но если их не будет, то смело можете ставить «максимальную».

Следующим идет окно для задание своих шаблонов оптимизации, его пропустим.

Далее идет вкладка, позволяющая выбрать, объединять селекторы с одинаковыми свойствами. Здесь все зависит от проекта и задач. Если вы писали css код строго в определенной последовательности и у вас все строго друг за дружкой, то не следует выбирать объединение селекторов. Так вам легче будет ориентироваться в коде.

Оптимизация стилей. Оставляем – “безопасная”

Сжатие цветов и свойств шрифтов – это то, о чем я вам говорил. Хотя и со сжатием свойств шрифтов — проблема. Он не оптимизирует код, как я вам рассказывал выше.

Остальные настройки не вызывают вопросов. В общем я заметил, что все русскоязычные сервисы для онлайн оптимизации css кода , страдают “болезнью”. Они не оптимизируют css3 код. Что заставило меня полностью отказаться от подобных оптимизаторов.

Для примера, я ввел следующий код:

Специально написал с пропусками строк, все подробно и т.д. И ожидал увидеть нечто подобное:

H1 { color: #fff; padding: 20px 25px; font: 700 18px Verdana, Arial, sans-serif }

Но к сожалению получилось всего лишь так:

Семь строчек, вместо пяти. Это меня не устраивало. Я же хотел найти и рассказать вам о более качественном материале. Так как понимаю, что некоторые не знакомы с сокращенными видами записей стилей.

А некоторый функционал сервисов мне показался лишним, ну или псевдофункционалом. Для того, чтобы создать видимость “навороченности” ресурса. Ну зачем мне галочка напротив «сокращать цвета». Конечно, если я пришел оптимизировать свой код, то мне нужно более короткое описание всего, что возможно! (Мое мнение)

Итак, я продолжил поиск и нашел тот самый ресурс, который удовлетворил мои потребности в оптимизации css кода. Это — devilo.us

Действительно потрясающий сервис, который я смело могу рекомендовать вам. Функционал такой же, как и у прошлых сайтов. Но этот справился с задачей на 100%. Смотрите:

Как вы могли заметить, процент сжатия 43.3%, а на прошлом сайте было 25%. В байтах – это вышло 58 > 37. Вот такой я зануда. Но когда css файл имеет 3000 строк, то такая оптимизация может сократить вес документа вдвое.

Конечно, со временем вы научитесь писать сразу оптимизированный css код, и подобные сервисы вам будут нужны все реже и реже, но проверить себя не мешает. Хотя бы на наличие лишних пробелов и пропусков строк.

А на сегодня – все. До скорых встреч.

Оптимизация веб-страниц является неимоверно важной составляющей при . К ней относится не только оптимизация программного кода сайта, но и оптимизация каскадных таблиц стилей (CSS), которую упускают из виду многие вебмастеры.

Как и оптимизация программного кода, оптимизация CSS нужна для ускорения загрузки страниц и экономии трафика. Поскольку файл CSS весит до 100 кб, многие не поймут всей важности его оптимизации, но если подсчитать, сколько времени и трафика можно сэкономить на оптимизированном файле в год, вы поймёте, насколько её недооценивали.

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

Во-первых, обязательно используйте обобщённые свойства. Вы можете сэкономить несколько строчек, если вместо margin-bottom, margin-left, margin-right и margin-top будете использовать один margin со значениями четырёх предыдущих, например: body { margin: 10px 2px 10px 5px; }.

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

Никто не сомневается в важности комментариев. Устранив их полностью, вам будет сложнее найти нужную часть кода без плагина Firebug. Но не стоит забывать, что львиную долю содержимого файла style.css занимают именно они. Для того, чтобы исправить это недоразумение, рекомендуется использовать более краткие описания. К примеру, вместо ///* длинного лирического отступления */// можно использовать запоминающееся /* Logo */.

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

Самым образцовым из них оказался CleanCSS.com. Данный сайт предлагает несколько вариантов сжатия: низкий, стандартный, высокий, высочайший и собственный. Стандартный вариант сжатия является наиболее сбалансированным между весом и читабельностью. Высокий и высочайший рекомендуется использовать только в том случае, если вы не будете вносить в дальнейшем никаких изменений в CSS, ибо код станет полностью нечитаемым. Также предлагается ряд дополнительных опций, таких как сжатие цветов и шрифтов, сортировка селекторов и т.д. Готовый результат вы можете получить как в виде текста, так и экспортировать в файл.

Среди российских сервисов достойные результаты показал оптимизатор CSS на сайте CY-PR.com. Его функционал практически не отличается от CleanCSS. При стандартных настройках коэффициент сжатия может достигать 25%, при максимальных - свыше 30%. К несчастью, отсутствует экспорт в файл.

Другие сервисы описывать не имеет смысла, так как работают они по той же схеме, что и вышеупомянутые CleanCSS.com и CY-PR.com, но они есть и вполне работоспособны.

Дамы и господа, давайте включим параною:

Однако, если рассматривать средний результат, то с достаточно большим отрывом выделяются 2 инструмента:

1. cssresizer.com (84,13%);

whois спойлер

nikitas@pentagon:~$ whois cssresizer.com

Whois Server Version 2.0

Domain names in the .com and .net domains can now be registered
with many different competing registrars. Go to http://www.internic.net
for detailed information.

Domain Name: CSSRESIZER.COM
Registrar: REGISTRAR OF DOMAIN NAMES REG.RU LLC
Sponsoring Registrar IANA ID: 1606
Whois Server: whois.reg.com
Referral URL: http://www.reg.ru
Name Server: NS1.MCHOST.RU
Name Server: NS2.MCHOST.RU
Name Server: NS3.MCHOST.RU
Name Server: NS4.MCHOST.RU
Status: clientTransferProhibited https://icann.org/epp#clientTransferProhibited
Updated Date: 21-apr-2016
Creation Date: 08-apr-2016
Expiration Date: 08-apr-2017

For more information on Whois status codes, please visit https://icann.org/epp

NOTICE: The expiration date displayed in this record is the date the
registrar"s sponsorship of the domain name registration in the registry is
currently set to expire. This date does not necessarily reflect the expiration
date of the domain name registrant"s agreement with the sponsoring
registrar. Users may consult the sponsoring registrar"s Whois database to
view the registrar"s reported date of expiration for this registration.

TERMS OF USE: You are not authorized to access or query our Whois
database through the use of electronic processes that are high-volume and
automated except as reasonably necessary to register domain names or
modify existing registrations; the Data in VeriSign Global Registry
Services" ("VeriSign") Whois database is provided by VeriSign for
information purposes only, and to assist persons in obtaining information
about or related to a domain name registration record. VeriSign does not
guarantee its accuracy. By submitting a Whois query, you agree to abide
by the following terms of use: You agree that you may use this Data only
for lawful purposes and that under no circumstances will you use this Data
to: (1) allow, enable, or otherwise support the transmission of mass
unsolicited, commercial advertising or solicitations via e-mail, telephone,
or facsimile; or (2) enable high volume, automated, electronic processes
that apply to VeriSign (or its computer systems). The compilation,
repackaging, dissemination or other use of this Data is expressly
prohibited without the prior written consent of VeriSign. You agree not to
use electronic processes that are automated and high-volume to access or
query the Whois database except as reasonably necessary to register
domain names or modify existing registrations. VeriSign reserves the right
to restrict your access to the Whois database in its sole discretion to ensure
operational stability. VeriSign may restrict or terminate your access to the
Whois database for failure to abide by these terms of use. VeriSign
reserves the right to modify these terms at any time.

The Registry database contains ONLY .COM, .NET, .EDU domains and
Registrars.

Domain name: cssresizer.com
Domain idn name: cssresizer.com
Status: clientTransferProhibited http://www.icann.org/epp#clientTransferProhibited
Registry Domain ID:
Registrar WHOIS Server: whois.reg.com
Registrar URL: https://www.reg.com/
Registrar URL: https://www.reg.ru/
Registrar URL: https://www.reg.ua/
Updated Date:
Creation Date: 2016-04-08T14:01:10Z
Registrar Registration Expiration Date: 2017-04-08
Registrar: Registrar of domain names REG.RU LLC
Registrar IANA ID: 1606
Registrar Abuse Contact Email: [email protected]
Registrar Abuse Contact Phone: +7.4955801111
Registry Registrant ID:
Registrant ID:
Registrant Name: Protection of Private Person
Registrant Street: PO box 87, REG.RU Protection Service
Registrant City: Moscow
Registrant State/Province:
Registrant Postal Code: 123007
Registrant Country: RU
Registrant Phone: +7.4955801111
Registrant Phone Ext:
Registrant Fax: +7.4955801111
Registrant Fax Ext:
Registrant Email: [email protected]
Admin ID:
Admin Name: Protection of Private Person
Admin Street: PO box 87, REG.RU Protection Service
Admin City: Moscow
Admin State/Province:
Admin Postal Code: 123007
Admin Country: RU
Admin Phone: +7.4955801111
Admin Phone Ext:
Admin Fax: +7.4955801111
Admin Fax Ext:
Admin Email: [email protected]
Tech ID:
Tech Name: Protection of Private Person
Tech Street: PO box 87, REG.RU Protection Service
Tech City: Moscow
Tech State/Province:
Tech Postal Code: 123007
Tech Country: RU
Tech Phone: +7.4955801111
Tech Phone Ext:
Tech Fax: +7.4955801111
Tech Fax Ext:
Tech Email: [email protected]
Name Server: ns1.mchost.ru
Name Server: ns2.mchost.ru
Name Server: ns3.mchost.ru
Name Server: ns4.mchost.ru
DNSSEC: Unsigned
URL of the ICANN WHOIS Data Problem Reporting System: http://wdprs.internic.net/
>>> Last update of WHOIS database: 2016-07-27T00:49:39Z <<<

For more information on Whois status codes, please visit
https://www.icann.org/resources/pages/epp-status-codes-2014-06-16-en.

% By submitting a query to REG.RU Whois Service
% you agree to abide by the following terms of use:
% http://www.reg.ru/whois/servpol (in Russian)
% http://www.reg.com/whois/servpol (in English)

И снова:

с достаточно большим отрывом выделяются 2 инструмента

чуть не забыл

Оптимизация или сжатие css-стилей ускорит загрузку страницы сайта, ускорит выполнение синтаксического анализа и уменьшит объем передаваемых данных. При этом сайт ни капли не потеряет в своей красоте, потому что сжатие css-стилей проходит без вреда для работоспособности его кода. Для этих целей я предлагаю Вам использовать специальный онлайн-инструмент, размещенный на следующей страницеhttp://www.cssdrive.com/index.php/main/csscompressor/ который сможет адекватным образом сжать Ваш CSS-файл.

Как происходит сжатие CSS ?

Сжатие CSS-стилей происходит путем использования нескольких доступных действий:

1. Удаление пустых строк.
2. Удаление лишних пробелов.
3. Удаление отступов.
4. Удаление комментариев.
5. Использование сжатых цветовых кодов там, где это возможно.
6. Удаление ненужных символов.

Чтобы увидеть все действия, которые происходят с CSS-стилями во время сжатия, нажмите кнопку Advanced mode на указанном выше сайте. Как видите, среди приведенных действий по оптимизации CSS-стилей нет такого, которое повредило бы функциональности CSS . Приблизительно такие же действия доступны для

Как оптимизировать css ?

Интерфейс приведенного мною сайта для сжатие CSS-файлов весьма прост:

В первом пункте Вам необходимо выбрать степень сжатия стиля. Я предлагаю выбирать степень сжатия Normal , потому что она обеспечивает баланс между сжатием и работоспособностью кода. Использование же уровня сжатия Super Compact может привести к ошибкам в коде.

Второй пункт предназначен для удаления комментариев. На главную форму выведено именно эта настройка потому, что комментарии могут понадобиться веб-мастеру в будущем. Поэтому стирать их под ноль без предупреждения - плохая идея. Первый checkbox в данном пункте не будет стирать комментарии, второй - сотрёт все комментарии. А вот третий пункт будет удалять комментарии, длина которых не менее выбранного Вами значения.

Так же Вы всегда можете перейти в Расширенный режим сжатия CSS-стилей и выбрать только те пути сжатия, которые Вам нужны.

Нажатием кнопки Compress-it Вы запустите сжатие css -файла и получите долгожданный результат в виде оптимизированного файла стилей. Теперь остается только заменить содержимое оригинального css-файла оптимизированным кодом.

Продолжаю , теперь передо мной ещё один пункт, который мне подсказал Google: Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение . Сейчас попробую разобраться, что там лишнего и как удалить лишний JavaScript и CSS?

Тесты, я напомню, я произвожу этим сервисом: , где в отношении JavaScript и CSS мне был дан конкретный совет:

Как видите, у меня это самая большая проблема, 8 скриптов подгружается сразу и из-за этого первый экран загружается не так быстро, как хотелось бы. Так же есть 10 css файлов, которые тоже не оптимизированы. Ну что же, будем решать проблему!

По этому вопросу претензии примерно такие:

Удалите код JavaScript, препятствующий отображению:

• https://prostolinux.ru/…-includes/js/jquery/jquery.js?ver=1.10.2
• https://prostolinux.ru/…s/jquery/jquery-migrate.min.js?ver=1.2.1
• https://prostolinux.ru/…query-ui-1.8.10.custom.min.js?ver=1.8.10
• https://prostolinux.ru/…ial-textboxes/js/wstb.js.php?ver=3.10.60
• https://prostolinux.ru/wp-includes/js/tw-sack.min.js?ver=1.6.1

Недавно нашел интересное решение: в function.php нужно вставить код, который будет давать команду нужным нам скриптам загружаться не сразу:

function jquery_in_footer() { wp_register_script(‘tie-tipsy’, get_template_directory_uri() . ‘/js/jquery.tipsy.js’, array(‘jquery’)); wp_register_script(‘tie-easing’, get_template_directory_uri() . ‘/js/jquery.easing.1.3.js’, array(‘jquery’)) ; }

В примере добавлено два скрипта, но мы добавляем сколько угодно, и именно те, которые тормозят загрузку страницы. Попробовал применить это решение — у меня оно не сработало, может что-то не так делал?

Сам google советует в скрипт вставить атрибут async , который делал бы его загрузку асинхронной. Но это решение подходит только для внешних скриптов, например, этот атрибут async можно вставить в script рекламы Яндекс Директ, если у вас его реклама выводится в первом экране. У Яндекса есть и асинхронный код, но он у меня вызывал проблемы — если один блок с асинхронной загрузкой, а второй нет, то показываться будет только один из них. Но сейчас не об этом…

Оптимизировать плагины таким образом трудно, нужно лезть в код каждого плагина и прописывать в него этот атрибут, или его альтернативу. Я не программист и так поступать не буду. К тому же если вы постоянно обновляете плагины, то все ваши труды пропадут после обновления.

На удивление себе я нашел другое, очень простое решение этого вопроса — установил плагин Asynchronous Javascript . После его установки получил результат:

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

Вот так просто решается первый пункт, но как видно — этого еще мало, нужно оптимизировать css, как это сделать?

Как оптимизировать работу CSS?

Напомню список претензий:

Оптимизируйте работу CSS на следующих ресурсах:

• https://prostolinux.ru/…wp-special-textboxes.css.php?ver=3.10.60
• https://prostolinux.ru/…plugins/wp-ds-blog-map/wp-ds-blogmap.css
• https://prostolinux.ru/…t/themes/rockwell_new/rockwell/style.css

В идеале нужно сделать так: взять все данные из этих css файлов и переместить в основной stile.css, а в самих плагинах отключить запрос к ним. Но как понимаете — это дело долгое и нудное, таящее под собой много подводных камней. Может быть в будущем я так и сделаю, но пока у меня нет столько времени и опыта.

Решить же вопрос можно установкой плагина, который сам объединит все стили в один файл. Плагина, который бы выполнял только эту функцию не нашел, поэтому расскажу о плагине, который делает все сразу, и удаляет скрипты, и оптимизирует css.

Как оптимизировать все сразу?

Я решил себе установить плагин Autoptimize , который оптимизирует и скрипты, и css одновременно. После установки плагина нужно лишь зайти в его настройки и поставить галочки в нужном месте:

После этого Google Page Speed выдает такое:

Ни одного скрипта не грузится, только два файла css, которые включают в себя все стили, а все скрипты перемещаются в область подвала. Если теперь посмотреть на исходный код страницы, то там оптимизированная КАША, в которой без бутылки не разобраться.

Сначала я подумал, что этот плагин не решит моих проблем полностью, но как оказалось, это было из за того, что я его не до конца настроил! После выставления галочек в нужном месте я получил ОТЛИЧНЫЙ результат! ВСЕ ПРОБЛЕМЫ ИСЧЕЗЛИ!

Чтобы так получилось нужно нажать кнопку вверху Show advanced settings и тогда появятся дополнительные настройки. Нужно, чтобы стояли галочки в пунктах:

Оптимизировать код HTML?

Оптимизировать код JavaScript?

Look for scripts only in ? (deprecated)

Оптимизировать код CSS?

Inline all CSS?

Save aggregated script/css as static files

После этого правда у меня перестал работать плагин, который фиксирует виджет, но это совсем не проблема, скорость загрузки сайта намного важнее. А еще важнее угодить дяде Гуглу…

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

Еще один подобный плагин — это WP Minify Fix , делает он тоже самое, но он мне меньше понравился, а может я просто в нем не до конца не разобрался.

Я понимаю, что идеально все это делать без плагинов, вручную, но это очень долго и муторно и оно того на самом деле не стоит, ведь даже добившись оценки 100 , вы не выведете сайт в топ — скорость загрузки сайта лишь ОДИН из сотни факторов ранжирования, путь и достаточно важный. Но сделать все что можно — нужно!

Удаление кода JavaScript и CSS Google PageSpeed

Не нашли ответ? Воспользуйтесь поиском по сайту