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