Внедрение спрайтов на CD.com

Вчера вечером потратил время для того, чтобы научиться пользоваться спрайтами. Воспользовался генератором спрайтов просто для того, чтобы получить готовые координаты (мне надо было понять логику), потом в Photoshop’e отредактировали и уменьшил вес готового рисунка. Кстати, png-24 без прозрачности на мелких рисунках дает лучший результат, чем jpg, gif или png! Я удивился.

Далее я внес необходимые изменения в файл стилей CosyDale.com – и теперь в верхнем правом углу за блоком поиска вы можете видеть изображение карты сайта и ссылки на Twitter.

Естественно, нужды в этом пока не было и я просто тренировался. Но в ближайшем будущем думаю объединить большинство фоновых рисунков (которые грузятся на каждой странице) в один – для уменьшения количества http запросов и, следовательно, ускорения обработки браузерами моего сайта.

комментариев 7

  1. Чуток поправил весь блок с Поиском и теми двумя ссылками справа от него для лучшей логики отображения. Все нормально отображается в IE 7 и выше, а также во всех остальных нормальных браузерах.
    Под шестого ослика я уже ничего делать не буду. Простите, пользователи, но вас 2% у меня на сайте.

  2. Объединил в 2 спрайта 16 рисунков. Теперь меньше стал весить сайт, должен быстрее грузиться. Еще надо 10 рисунков объединить..
    Вот вам для сравнения данные по главной странице моего сайта (использую tools.pingdom.com)
    До оптимизации: 8.83 sec | 54 объекта (318.2 KB) | 47 рисунков (141.8 KB)
    После оптимизации: 6.9 sec | 36 объектов (294.8 KB) | 30 рисунков (121 KB)
    Вот так :)
    PS Если кому надо, то могу сделать на заказ оптимизацию дизайна :)

  3. Тут вопрос в плюсах и минусах:
    + время загрузки снизилось на 20%
    – а если переделать дизайн – сколько нужно проделать манипуляций?

    Если бы разница была между 10сек и 2 сек.. это да! однозначно оно того стоит :) а при 20% – это скорее всего опыт ;)

  4. @Александр:
    Еще большой плюс – уменьшилось количество объектов.
    Манипуляций достаточно много… Но если трафик большой на сайте, то такое уменьшение положительно скажется на производительности сайта.
    И да, на своем сайте я делал для получения опыта. В три спрайта могу забросить 95% графики…

  5. Вчера довел до ума apache, nginx, mysql, php & etc – время загрузки стартовой с 6.5сек до 4.. , а там где контента много (ну как у тебя стартовая) – с 9 до 4.5

    Но графику трогать не хочется – так как сам себе дизайнер.. сказать на каком то этапе что все супер и больше менять не буду… не могу :(

  1. 09.01.2010

    […] ускорения сайта. Но это еще не все! Я также применял технику спрайтов (и не только) на своем сайте и включал zlib сжатие. Как […]

  2. 12.10.2011

    […] (спрайты, стили, другие виды […]

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *