Оптимизация веб-страниц является неимоверно важной составляющей при создании веб-сайта. К ней относится не только оптимизация программного кода сайта, но и оптимизация каскадных таблиц стилей (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, но они есть и вполне работоспособны.