Уменьшаем размер CSS файла и ускоряем его загрузку
Вопрос оптимизации загрузки web-странички был актуален всегда, даже не смотря на всевозрастающую скорость передачи данных в сети. Уменьшение времени загрузки сайта - это одна из самых важных тем вебдизайна. Обычно основное внимание уделяется уменьшению размеров изображений и оптимизации запросов к БД. Но также стоит уделить внимание и усечению ненужных символов как в самом файле кода странички так и в файле с описаниями его стилей. Тем более, что часто файл с описанием стилей съедает довольно ощутимое пространство трафика.
Но это ведь нас не может устраивать. Давайте научимся делать все лаконично и экономично! Рассмотрим несколько способов уменьшения стандартного файла СSS и проверим эффективность каждого из способов на деле, выполняя замеры его веса в байтах. Итак, какие же существуют способы оптимизации описания стилей? Сперва, рассмотрим пример обычного CSS файла.
html { margin: 0; padding: 0; } body { font: 90 verdana, arial, sans-serif; color: #ffffff; background: #fаfаfа url(/img/fn.jpg) no-repeat bottom left; margin: 0; padding: 0; } table { margin-top: 0; text-align:right; } p { margin: 2; text-align:right; } h1 { font: italic normal verdana, arial, sans-serif; letter-spacing: 2px; margin-bottom: 0; color: #7c7d7e; } a { font-weight: bold; text-decoration: underline; color: #7c7d7e; }
Размер приведенного файла 515 байт. Теперь перейдем к процессу оптимизации. В сети существуют ресурсы с помощью которых оптимизация может происходить автоматически. Воспользуемся услугой одного из таких ресурсов.
Автоматическая оптимизация
Первая операция, которую мы применим к файлу CSS, должна упростить наш код, удалив не нужные символы как, например, двойной пробел или точка с запятой не к месту. Заходим на www.cleancss.com/ и процессируем наш код.
a { color:#7c7d7e; font-weight:700; text-decoration:underline } body { background:#fаfаfа url(/img/fn.jpg) no-repeat bottom left; color:#fff; font:90 verdana, arial, sans-serif; margin:0; padding:0 } h1 { color:#7c7d7e; font:italic normal verdana, arial, sans-serif; letter-spacing:2px; margin-bottom:0 } html { margin:0; padding:0 } p { margin:2px; text-align:right } table { margin-top:0; text-align:right }
После не сложных манипуляций размер файла уменьшился до 448 байт, а это значит, что мы хоть и немного, но сделали загрузку файла быстрее. А это уже успех.
Сжатие стилевых свойств
Перейдем к простым манипуляциям, которые не испортят читабельности, но вместе с тем уменьшат размер нашего CSS файла. Запишем все стилевые свойства построчно, исключив пробелы после знаков ';'
a {color:#7c7d7e;font-weight:700;text-decoration:underline} body {background:#fаfаfа url(/img/fn.jpg) no-repeat bottom left;color:#fff;font:90 verdana, arial, sans-serif;margin:0;padding:0} h1 {color:#7c7d7e;font:italic normal verdana, arial, sans-serif;letter-spacing:2px;margin-bottom:0} html {margin:0;padding:0} p {margin:2px;text-align:right} table {margin-top:0;text-align:right}
Теперь размер нашего файла уменьшился до 400 байт. т.е. уже меньше на 115байт от первоначального.
Пишем стили в одну строку
Теперь уменьшим наш файл еще на 20 байт, но сделаем его уже не читабельным, вытянув все его содержимое в одну строчку.
a {color:#7c7d7e;font-weight:700;text-decoration:underline} body {backg...
Учтите, что лучше работать с нормальным СSS файлом и заниматься его оптимизацией непосредственно перед его закидкой на хостинг.
Рекомендуем почитать