Web-automation.ru

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

• Использовать спрайты
  При помощи спрайтов можно грамотно реализовать элементы интерфейса
  http://habrahabr.ru/post/159027/
• Загружать картинки параллельно с разных доменов
  Для параллельной загрузки держите картинки на разных доменах. Браузер может с одного адреса грузить параллельно только определенное количество ресурсов. Если будет задействовано несколько доменов, то загрузка будет быстрее.
• Минифицировать CSS
  Используйте специальные средства для этого, например, CSS Minify или http://webliberty.ru/minify/.
• Минимизировать вывод html
  http://omari-o.blogspot.ru/2009/09/aspnet-white-space-cleaning-with-no.html
• Использовать gzip сжатие на сервере
• Кешировать вывод статичных данных
  Используйте кеширование вывода для статичных данных – картинки, css, js, шрифты.
• Собирать весь css в один файл
• Указывать атрибуты height и width в тегах
• Указывать двоичные данные в css для небольших картинок
  Если картинки небольшие, имеет смысл указывать двоичные данные в css для картинки.
• Выполнять предзагрузку картинок через jQuery
  Делайте предзагрузку картинок через jquery. Например, так:

   $(''); 
  

• Сжимать картинки до нужного уровня качества
  Сразу хорошо сжимайте картинки до приемлимого уровня качества в специальных программах.
• Не трансформировать картинки через браузер
  Не выводите большие картинки в теге img с малыми размерами width & height (не заставляйте браузер работать с транформацией картинок).