Оптимизация CSS и HTML кода

Смысл оптимизации прост — чем меньше размер Ваших CSS и (X)HTML файлов, тем они быстрее загрузятся в браузер и сэкономят больше копеек Вашего драгоценного посетителя. 

Например, если в CSS не ставить точку с запятой ; перед закрывающей скобкой }, Вы сэкономите один байт, а если в (X)HTML не ставить перевод строки (<br />) перед закрытием блочного тега (display: block), то целых шесть байт. Сколько у Вас таких точек с запятой и переводов строк? 

• В место "кавычек" используйте 'апострофы'.
• Сокращайте RGB–цвета у которых оттенки равны цвету.
  Например, в место #ffaa00 достаточно написать #fa0.
• Сокращайте свойства.
  Например, в место:
  

  .zagolovok{
  border-syle: solid;
  border-color: red;
  border-width: 1px;
  backround-color: #ffffff;
  backround-image: url(fon.gif);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: right bottom;
  }
  

  достаточно написать (значения могут идти в любом парядке):

  .zagolovok{
  border: solid 1px red;
  background: #fff url(fon.gif) fixed no-repead right bottom
  }
  

• Нулю единица измерения не нужна.
• Используйте сокращение числовых свойств:
  • .class{cвойство: 3px 4px 5px 6px} — все стороны разные
    (отсчет начинается с верху и идет по часовой стрелке (верх, право, низ, лево)).
  • .class{cвойство: 3px 0 5px} — связка лево–право имеюет одно значение (ноль), а верх и низ разные.
  • .class{cвойство: 3px 5px} — связки верх–низ и лево–право.
  • .class{cвойство: 5px} — все стороны равны.
• Старайтесь отводить для мобильных браузеров на CSS код не более 1Кб, а на (X)HTML не больше 3 – 5Кб.
• Для оформления кода используйте табуляцию, а не пробелы.
• Удаляйте лишние пробелы.
• Не забывайте, что Вы в мобильном веб (или WAP). Отвоевывайте каждый байт!