Уменьшаем размер 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 файлом и заниматься его оптимизацией непосредственно перед его закидкой на хостинг.




Рекомендуем почитать

 

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


Ваше имя:


Комментарий:


Введите: Картинка