Общие методы для оптимизации 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 (не заставляйте браузер работать с транформацией картинок).