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

Как уменьшить размер 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. Объединяйте стили с одинаковыми свойствами.

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.graphicrating.com
Перевел: Сергей Патин
Урок создан: 1 Марта 2009
Просмотров: 29334
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 1 Марта 2009 22:21
    Сергей
    Спасибо. Полезный сайт. И статья хорошая.
  • 2 Марта 2009 10:09
    Apxu
    Ну сейчас же не 90-е, когда выходили через диалап соединение, а широкополоска. На мой взгляд нужно просто приводить код в читабельный вид. Код, записанный в одну строчку, читается крайне сложно. Опять же это только моё мнение. Просто не так уж сильно и выигрываешь на 1 кб больше на 1 меньше..
  • 2 Марта 2009 12:04
    Андрей
    Хорошая статья, но всё равно считаю это не очень актуальным в эпоху выделенных линий
  • 2 Марта 2009 13:42
    Сергей
    К сожалению, не у всех пока скорость хорошая. Очень много людей живет в деревнях и провинциальных городах, где стоимость интернета 450 руб./мес за 64 кб/с. А еще больше людей сидит на gprs, где скорость тоже не радует. Конечно, скорости растут быстро, а цена снижается, но "эпоха выделенных линий" еще не до всех дошла.
  • 2 Марта 2009 18:04
    Django
    Как ни сокращай css-код, радости не прибавится. Согласно статье, текстовый файл стал весить менее, чем на 1 кб. Это смешно! Даже пользователь сидящий на диал-апе абсолютно не заметит никакой разницы во времени загрузки страницы. Лучше использовать поменьше графики на сайте, тем более той, без которой вполне можно обойтись (это касается клипартов, которые безмерно любят лепить многие начинающие веб-дизайнеры). Это же касается и навороченных логотипов. Заходишь порой на некоторые сайты с запредельным дизайном и диву даешься. Для чего все это? Владельцы стремятся покорить своих посетителей дизайном? Человек приходит на сайт за информацией, а не с целью полюбоваться вычурным оформлением страниц. Почему гугл пользуется такой популярностью? Ведь их дизайн оставляет желать лучшего? То-то. Лучше меньше - да лучше... :-)
  • 2 Марта 2009 21:17
    Макс
    Уменьшился на 1 кб.Я думаю не стоит даже из-за этого заморачиваться.Хотя,если css-файлов много...
  • 3 Марта 2009 12:35
    Игорь
    Вы чё совсем чтоли? да я за 1 килобайт всех порву!!! нее 1 килобайт это ооочень круто! только вот не организовано получается Я предлагаю свою схему: 1 код делаем для себя с комментариями и тп, а второй будет реально работать! и ещё раз повторяю 1 килобайт это ооочень много ! а вообще ещё почитайте организацию css Вы не указали одной очень важной вещи: те цвета которые можно написать 3-мя цифрами лучше так и писать ибо это тоже уменьшает размер файла, например: вместо #cccccc можно написать #ccc вот
  • 3 Марта 2009 14:55
    Сергей
    Цитата: "Однако не забудьте сделать копию CSS в первоначальном виде для более удобного редактирования." Поэтому это не совсем "Ваша" схема.
  • 4 Марта 2009 07:56
    dima75
    я пользуюсь online-оптимизаторами CSS. очень удобно))
  • 4 Марта 2009 07:59
    Андрей
    Отличный урок! Евгений, спасибо вам огромное за ваши курсы и обширную информацию на ваших сайтах, за которую не надо платить ни копейки. :)
  • 4 Марта 2009 17:01
    Max
    статья больше на флуд смахивает
  • 5 Марта 2009 15:24
    nord
    вообще то как ни крути - а другой раз короче написать не получается приходится писать как положено хоть и длинно и много. нада привыкать читать коды как бы они написаны не были - автомат их читает, а вы что не прочитаете? к сожалению не мы их придумали- как коды писать - вся наша история сводится к одному посадить и растрелять. так что не придумыайте велосипед изучайте правила и соблюдайте их.
  • 7 Марта 2009 18:37
    Олеж
    Ну, знаете ли... Жень, спасибо тебе за твои труды, конечно, но один кб - это даже для моего gprs и скорости в 5 кб/сек - смешно. каждый стиль в одну строчку я пишу - но не ради одного кб. Просто если количество стилей превышает несколько сот в одном css-нике - тогда лучше написать в строчку, а то не очень удобно листать такой листик...
  • 19 Марта 2009 14:30
    Саша
    http://www.codebeautifier.com/ - Вот это именно то что гараздо облегчит ваше редактирование стилей! Сажмет стили и покажет все сделаные изменения, а также там достаточно настроек для того, чтобы сделать все правильно, хорошо и удобно! Юзайте ;)
  • 18 Января 2010 13:30
    seacon
    Спасибо за ссылку Саша!
  • 6 Июля 2010 22:10
    lemonad
    Ну ви ламери! Подивіться який маленький код даний в прикладі. А якщо у файлі 500 строк то буде на 10кб менше як мінімум!
    • 10 Августа 2013 16:40
      Віталій Гордій
      правильно
  • 14 Ноября 2010 20:45
    peshekhonov
    Отлично!!)
    • 26 Июля 2012 18:55
      aurfon
      Я так понимаю, что автор говорит, что исходный файл пускай будет у Вас на локальной машине, а то что пойдет на сервер лучше оптимизировать. И один килобайт это в данном случае, вы посмотрите на каком маленьком куске кода Вы уже экономите. В реальной жизни Вы сэкономите еще больше. Пара пунктов была действительно полезной, но в одну строку я буду делать если оживут динозавры.
      • 16 Мая 2013 15:49
        kakabal
        простите, что пишу в ответе на комментарий, но я не могу не поддержать комментарий представленный выше - "К сожалению, не у всех пока скорость хорошая. Очень много людей живет в деревнях и провинциальных городах, где стоимость интернета 450 руб./мес за 64 кб/с. А еще больше людей сидит на gprs, где скорость тоже не радует. Конечно, скорости растут быстро, а цена снижается, но "эпоха выделенных линий" еще не до всех дошла." вааще респект тебе и уважуха!!! Сам живу в деревне, где скорость скачивания составляет 6 - (в праздники) 20 КБ/с. Хоть ты и писал это в 2009 году с тех пор ничего не изменилось =(
        • 10 Августа 2013 16:41
          Віталій Гордій
          в мене взагалі 1-2+
^ Наверх ^