Оптимизация CSS своими силами

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

Оптимизация (сжатие) CSS - отличный способ уменьшить вес сайта - в браузер конечного пользователя будет отдаваться меньше данных, за счет минимизации кода и стилей в CSS-файлах. Не важно, сколько объема занимают на вашем сайте CSS стили, в любом случае, 50 и более % их содержимого можно просто удалить (!) без какого-либо ущерба для вашего сайта, что, безусловно, является важной составляющей в оптимизации скорости сайта.

Оптимизацию CSS можно и нужно проводить на любой платформе. В зависимости от ПО сайта, это можно реализовать с помощью плагинов и модулей для вашей CMS. Также это можно реализовать с помощью онлайн-инструментов.

Оптимизация CSS в WordPress

В WordPress оптимизацию CSS можно реализовать автоматически с помощью плагинов. Как работают эти дополнения? Плагины по оптимизации CSS минимизируют и сжимают CSS-файлы:

  • удаляют комментарии из CSS
  • удаляют новые и пустые строки, двойные пробелы, табуляции и т.д.
  • объединяют однотипные стили
  • переводят значения цветов в короткие (#ffffff и #fff - работают одинаково хорошо)
  • используют GZIP компрессию для оптимизированного CSS

Среди популярных плагинов можно назвать:

Кстати, оптимизацию CSS целесообразно проводить вместе с JavaScript. И два последних плагина работают как раз в обоих направлениях (умеют оптимизировать JS наравне с CSS).

Оптимизация CSS онлайн-инструментами

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

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

http://www.cssdrive.com/index.php/main/csscompressor/
http://www.cy-pr.com/tools/css/
http://www.css-school.ru/optimiser/
http://www.pagecolumn.com/tool/css_compressor.htm
http://www.online-code.net/minify-css.html
http://csscompressor.com
http://www.askapache.com/online-tools/compress-css/
http://refresh-sf.com
и т.д.

Проверка валидности CSS

Популярный и признанный онлайн сервис проверки валидации CSS от W3C может найти все ошибки в стилях и автоматически сгенерировать валидный файл стилей для Вашего сайта. Валидный - значит "удовлетворяющий спецификации CSS". В сервисе можно указать url сайта (в таком случае будут подгружены и проверены все подключаемые CSS файлы), полный путь к требуемому CSS файлу или CSS стили текстом.

Как и где оптимизировать CSS?
Сервис оптимизации CSS от W3C: очистит невалидный код из стилей Вашего сайта

Не забудьте сделать резервную копию CSS файла перед тем, как Вы его перезапишете "валидной версией" от сервиса W3C. Сервис осуществляет проверку Ваших стилей на соответствие спецификации CSS2.1 или CSS3 и некоторые старые темы и шаблоны могут пострадать от результата валидации! Поэтому, старательно все проверьте, заботясь о своих
посетителях!

Оцените материал:
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (8 голоса, рейтинг: 3,38 из 5)
Загрузка...

Вячеслав - типичный интернетчикВячеслав Скоблей (ака files) - типичный интернетчик. Скитаюсь интернетом, пишу на PHP, увлекаюсь созданием веб-сайтов на Wordpress, решаю многочисленные проблемы, которые до появления интернета не существовали...

Специализируюсь на безопасности сайтов: защищаю сайты от атак и взломов, занимаюсь лечением вирусов на сайтах и профилактикой...

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *