Как уменьшить размер CSS файла, чтобы он быстрее грузился?

Как вы знаете, уменьшение времени загрузки сайта - это одна из самых важных тем вебдизайна. Одним из таких элементов, который необходимо оптимизировать для достижения этой цели является CSS. Давайте посмотрим, какие существуют способы его оптимизации.

1. Стандартный CSS код.

Следующий пример является стандартом написания CSS.

html {

margin: 0;

padding: 0;

}



body { 

font: 75% georgia, sans-serif;

line-height: 1.88889;

color: #555753; 

background: #fff url(/001/blossoms.jpg) no-repeat bottom right; 

margin: 0; 

padding: 0;

}



p { 

margin-top: 0; 

text-align: justify;

}



h3 { 

font: italic normal 1.4em georgia, sans-serif;

letter-spacing: 1px; 

margin-bottom: 0; 

color: #7D775C;

}



a:link { 

font-weight: bold; 

text-decoration: none; 

color: #B7A5DF;

}

Размер приведенного файла 3.39 Кб. Это много.

В этой статье мы воспользуемся помощью сайта автоматической оптимизации кода CleanCSS.

2. Базовая оптимизация.

Первая операция, которую мы применим к файлу CSS, должна удалить точку с запятой после последнего свойства каждого стиля.

      html {

        margin:0;

        padding:0

        }

        

        body {

        background:#fff url(/001/blossoms.jpg) no-repeat bottom right;

        color:#555753;

        font:75% georgia, sans-serif;

        line-height:1.88889;

        margin:0;

        padding:0

        }

        

        p {

        margin-top:0;

        text-align:justify

        }

        

        h3 {

        color:#7D775C;

        font:italic normal 1.4em georgia, sans-serif;

        letter-spacing:1px;

        margin-bottom:0

        }

        

        a:link {

        color:#B7A5DF;

        font-weight:bold;

        text-decoration:none

      }

Размер файла после первого шага уже 3.02 Кб, а это значит, что файл загрузится быстрее.

3. Каждый стиль пишем в одну строку.

Применение этого приема может существенно уменьшить размер.

    html{margin:0;padding:0}

      body{background:#fff url(/001/blossoms.jpg) no-repeat bottom right;color:#555753;

      font:75% georgia, sans-serif;line-height:1.88889;margin:0;padding:0}

      p{margin-top:0;text-align:justify}

      h3{color:#7D775C;font:italic normal 1.4em georgia, sans-serif;letter-spacing:1px;

      margin-bottom:0}

      a:link{color:#B7A5DF;font-weight:bold;text-decoration:none}

Теперь размер файла стал 2.57 Кб. т.е. меньше первоначального на 25%, однако код стало не так комфортно читать.

4. Весь файл CSS пишем в одну строку.

html{margin:0;padding:0}body{background:#fff url(/001/blossoms.jpg) no-repeat...

Мы достигли размера файла 2.53 KB.

Я советую применять этот способ непосредственно перед копированием файла на хостинг. Однако не забудьте сделать копию CSS в первоначальном виде для более удобного редактирования.

5. Общие рекомендации для оптимизации CSS кода.

1. Используйте свободное место только тогда, когда это действительно вам необходимо.
2. Используйте способы сокращения СSS.
3. Не ставьте точку с запятой после последего свойства каждого стиля
4. Используйте "700" вместо "полужирный" (например "font-weight:700;" вместо "font-weight: bold;")
5. Используйте "400" вместо "нормальный"
6. Используйте 0 вместо 0px
7. Объединяйте стили с одинаковыми свойствами.

Выбирайте тот способ оптимизации, который вам подходит, но не забывайте и о стандартах!