Вчера вечером потратил время для того, чтобы научиться пользоваться спрайтами. Воспользовался генератором спрайтов просто для того, чтобы получить готовые координаты (мне надо было понять логику), потом в Photoshop’e отредактировали и уменьшил вес готового рисунка. Кстати, png-24 без прозрачности на мелких рисунках дает лучший результат, чем jpg, gif или png! Я удивился.
Далее я внес необходимые изменения в файл стилей CosyDale.com – и теперь в верхнем правом углу за блоком поиска вы можете видеть изображение карты сайта и ссылки на .
Естественно, нужды в этом пока не было и я просто тренировался. Но в ближайшем будущем думаю объединить большинство фоновых рисунков (которые грузятся на каждой странице) в один – для уменьшения количества http запросов и, следовательно, ускорения обработки браузерами моего сайта.
Чуток поправил весь блок с Поиском и теми двумя ссылками справа от него для лучшей логики отображения. Все нормально отображается в IE 7 и выше, а также во всех остальных нормальных браузерах.
Под шестого ослика я уже ничего делать не буду. Простите, пользователи, но вас 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 Если кому надо, то могу сделать на заказ оптимизацию дизайна :)
@Александр:
Еще большой плюс – уменьшилось количество объектов.
Манипуляций достаточно много… Но если трафик большой на сайте, то такое уменьшение положительно скажется на производительности сайта.
И да, на своем сайте я делал для получения опыта. В три спрайта могу забросить 95% графики…
Вчера довел до ума apache, nginx, mysql, php & etc – время загрузки стартовой с 6.5сек до 4.. , а там где контента много (ну как у тебя стартовая) – с 9 до 4.5
Но графику трогать не хочется – так как сам себе дизайнер.. сказать на каком то этапе что все супер и больше менять не буду… не могу :(
18 декабря 2009 в 20:11
Чуток поправил весь блок с Поиском и теми двумя ссылками справа от него для лучшей логики отображения. Все нормально отображается в IE 7 и выше, а также во всех остальных нормальных браузерах.
Под шестого ослика я уже ничего делать не буду. Простите, пользователи, но вас 2% у меня на сайте.
25 декабря 2009 в 21:47
Объединил в 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 Если кому надо, то могу сделать на заказ оптимизацию дизайна :)
27 декабря 2009 в 1:26
Тут вопрос в плюсах и минусах:
+ время загрузки снизилось на 20%
- а если переделать дизайн – сколько нужно проделать манипуляций?
Если бы разница была между 10сек и 2 сек.. это да! однозначно оно того стоит :) а при 20% – это скорее всего опыт ;)
27 декабря 2009 в 10:42
@Александр:
Еще большой плюс – уменьшилось количество объектов.
Манипуляций достаточно много… Но если трафик большой на сайте, то такое уменьшение положительно скажется на производительности сайта.
И да, на своем сайте я делал для получения опыта. В три спрайта могу забросить 95% графики…
27 декабря 2009 в 12:45
Вчера довел до ума apache, nginx, mysql, php & etc – время загрузки стартовой с 6.5сек до 4.. , а там где контента много (ну как у тебя стартовая) – с 9 до 4.5
Но графику трогать не хочется – так как сам себе дизайнер.. сказать на каком то этапе что все супер и больше менять не буду… не могу :(