Создание CSS спрайтов в онлайн генераторе Sprites Me для снижения числа запросов к серверу — где скачать и как установить их на сайт

10 января, 2011Рубрика: Полезные программы, Скорость загрузки сайта

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня, похоже, завершается серия статей, посвященных увеличению скорости загрузки сайта. Как вам, наверное, известно, с недавних пор она является одним из факторов, влияющих на успешность продвижения проекта.

Это уже пятая статья. В предыдущих публикациях для анализа скорости загрузки сайта и получения рекомендаций по ее увеличению, мы воспользовались очень удобным и эффективным инструментом под названием Page Speed. Сегодня же поговорим о таком понятии, как CSS спрайты (sprites).

Снижаем число подгружаемых файлов для ускорения сайта


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

  1. Как измерить скорость загрузки сайта и установить Page Speed
  2. Как объединить и сжать CSS файлы
  3. Как включить Gzip сжатие в .htaccess
  4. Снижение числа http запросов и сжатие изображений

Как я говорил в предыдущей статье, для загрузки каждого изображения в браузер пользователя с web сервера, вне зависимости от того, как оно формируется (с помощью тега IMG или же в CSS с помощью свойства «background»), используется отдельный http запрос. Если графики на вашем проекте довольно много, то и количество таких запросов будет неприлично большим.

Например, на начальном этапе развития моего блога сервис Pingdom (на нем можно измерить скорость загрузки, а так же настроить проверку и мониторинг доступности сайта — аптайм) давал такое заключение:

Откуда же может взяться такое большое количество картинок? Естественно это будут те, которые вы вставляете в свои статьи, но все же основную массу будут составлять изображения, входящие в состав шаблона (элементы дизайна). Вот именно их количество мы и попытаемся оптимизировать.

В предыдущей статье я уже упоминал, что перво-наперво нужно будет внимательно посмотреть, а действительно ли требуется загрузка всех этих рисунков, или часть из них можно без ущерба для внешнего вида проекта удалить из файла CSS.

Обращаю ваше внимание на то, что нужно именно удалить свойства «background», инициирующие их подгрузку, а не просто физически убрать графические файлы с сервера, т.к. этим вы можете существенно ухудшить скорость загрузки — будет тратиться время на поиск не существующих изображений.

Лично я удалил пару десятков незначительных картинок, используемых в шаблоне моего блога, сократив тем самым пару десятков лишних обращений к web серверу при каждой загрузке страницы, тем самым немного ускорив его общую скорость работы.

Ну, а те фоновые картинки, которые все же окажутся необходимыми в оформлении, мы попробуем объединить в один или несколько больших графических файлов (спрайтов), которые позволят еще немного снизить число запросов к web серверу. Технология CSS спрайтов известна довольно давно, хорошо отработана и поддерживается всеми браузерами.

Единственный минус, который они имеют по сравнению с отдельными графическими файлами под каждое фоновое изображения — это сложность создания и поддерживания. Что есть, то есть — сделать его самому и описать положение отдельных фоновых картинок в CSS коде — задача не из простых.

Но к счастью в интернете можно найти много онлайн сервисов, позволяющих создавать спрайты из загруженных вами картинок. Вам нужно будет потом посмотреть, какие именно свойства в style.css нужно поменять для их корректной работы.

Лучшим онлайн сервисом, на мой взгляд, является "Sprites me" — широко известный и популярный в буржунете, но не заслужено обойденный вниманием в рунете. Вам даже не потребуется загружать в него свои фоновые изображения, которые вы желаете объединить.

Этот генератор все сделает за вас — сам просмотрит ваш сайт, даст рекомендации о том, какие именно картинки можно будет объединить в спрайты, а какие нет.

Во как, настоящий сервис по буржуйски — все включено, да и к тому же бесплатно. Работать с ним действительно очень просто и я сейчас расскажу, как именно в два счета создать и применить на своем сайте спрайты.

Кстати, после того, как я произвел все действия, описанные мною в этой серии статей про увеличение скорости загрузки, в сервисе Pingdom результат уже получился гораздо более приятный глазу:

В общей сложности, ускоряя свой блог, мне удалось в два раза снизить количество http запросов, при этом так же в два раза снизить количество загружаемых в браузеры пользователей с web сервера изображений. Частично были удалены не нужные картинки шаблона, а оставшиеся были по возможности объединены. Так же на треть уменьшился общий вес всех подгружаемых объектов, за счет их оптимизации (сжатия).

Кстати, CSS спрайты не только позволяют уменьшить количество обращений к серверу, но и в некоторой степени уменьшают общий вес загружаемых объектов. Дело в том, что несколько фоновых изображений по отдельности будут весить больше, нежели те же самые, но объединенные в одно. Пусть разница будет небольшая, но она все же будет.

После проведения всех описанных в этих пяти статьях мероприятий по повышению скорости загрузки, Page Speed дает моему блогу KtoNaNovenkogo.ru оценку в 93 балла из ста возможных, и при этом отсутствуют строки помеченные красным, что означает практически полное исполнение мною всех основных требований (см. скриншот выше).

Создание CSS спрайтов (sprites) из фоновых изображений сайта


Итак, для начала вам нужно открыть главную страницу сервиса «Sprites me». Дальнейшие действия могут показаться вам не совсем обычными, ибо потребуется перетащить ссылку под таким же названием «Sprites me» с этой страницы в закладки вашего браузера.

Не знаю, насколько корректно работает этот онлайн генератор в различных браузерах, но в Opera он работает без проблем и на ура.

Открываете в боковой панели обозревателя закладки и выбираете папку, куда требуется сохранить ссылку генератора, а затем просто хватаете левой кнопкой мыши надпись «Sprites me» и тащите ее на панель закладок своего браузера.

Дальше открываете в нем любую страницу своего ресурса и просто щелкаете в панели закладок по только что созданной закладке сервиса «Sprites me». На фоне страницы вашего ресурса в правом верхнем углу откроется окно этой надстройки, где вы сможете осуществить создание спрайта именно для вашего проекта, а затем его скачать. Потрясающе удобная штука.

Посмотрите внимательно, в области «Suggested Sprites» для моего блога предлагается создать три спрайта из фоновых изображений моей темы оформления WordPress. В первый будет включено девять графических файлов, а в остальные по два. В самом низу окна генератора в области «Non-Sprited Images» приведены картинки, которые не представляется возможности объединить.

Что примечательно, в случае, если вы не согласны с мнением генератора, то можете левой кнопкой мыши перетаскивать изображения между этими областями. Мне это понадобилось, например, после того, как я, попробовав применить первый из предлагаемых спрайтов к своему блогу, столкнулся с неработоспособностью двух из девяти объединенных картинок.

Попробовав и так, и эдак поиграться с CSS кодом, я счел за благо при создании первого спрайта просто перетащить из него проблемные изображения в нижнюю область «Non-Sprited Images». После этого проблем с его работой уже не наблюдалось. Как я и говорил — все очень просто и наглядно. Хвала создателям этого онлайн генератора.

Итак, что же нужно сделать для создания спрайта? Да просто щелкнуть по кнопке «make sprite», расположенной в верхнем правом углу каждой области с изображениями, которые при вашем желании могут быть объединены.

После этого генератор на некоторое время задумается, а затем вместо Урлов на отдельных картинок покажет ссылку, по которой вы сможете скачать уже готовый CSS спрайт (все изображения будут объединены в одно). Подведя курсор мыши к этой ссылке вы увидите, как он будет выглядеть:

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

Точно таким же образом создаете и остальные (просто щелкнув по кнопке «make sprite»), которые вам предлагает создать генератор. Скачиваете полученные файлы спрайтов и заливаете их в папку с картинками на своем ресурсе.

Вносим изменения в файл CSS при подключении спрайтов


Но на этом работа еще не закончена. Ведь нужно еще будет подсказать браузеру пользователя, как именно извлекать нужные фоновые изображения из созданных спрайтов.

Для этого потребуется внести небольшие изменения в файл стилевого оформления вашего проекта, который обычно находится в папке с шаблоном используемого вами движка — чаще всего он называется style.css, но возможны варианты.

Но тут у вас не должно возникнуть особых трудностей, ибо данный генератор даст вам подробную инструкцию, что именно в вашем файле CSS нужно будет изменить. Для получения этой инструкции вам нужно будет щелкнуть по кнопке «export CSS», расположенной в правом верхнем углу окна «Sprites me».

В результате откроется страница с рекомендациями по внесению изменений именно в ваш style.css для того, чтобы заработали созданные вами объединенные изображения. Будут указаны конкретные CSS свойства, в которые потребуется внести изменения, а так же будут зачеркнуты те, которые потребуется удалить и те, которые нужно будет прописать заместо удаленных.

Но обратите внимание, что в приведенной инструкции путь до графических файлов спрайтов вам нужно будет поменять на свой. Для примера приведу участок кода моего style.css до внесения изменения:

#content .post_bottom{background:#bce3ff url(images/post_bottom.png) no-repeat bottom;padding:0 0;clear:both;overflow:hidden;height:100%;margin-bottom:5px;font:13px Arial, Helvetica, sans-serif;}

И после:

#content .post_bottom{background:#bce3ff url(http://ktonanovenkogo.ru/wp-content/themes/Organic/images/spriteme1.png) no-repeat bottom; background-position: -10px 0px;padding:0 0;clear:both;overflow:hidden;height:100%;margin-bottom:5px;font:13px Arial, Helvetica, sans-serif;}

Если в свойстве уже окажется прописанным свойство «background-position», то замените значения в нем на те, которые предлагает данный генератор.

После внесения всех предписанных изменений в style.css обновите открытую в браузере страницу вашего ресурса, удерживая при это нажатой клавишу Shift на клавиатуре (в этом случае статические объекты на вебстранице будут заново запрошены с web сервера).

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

Если перекосы после применения CSS спрайта все же появились, то попробуйте определить их причину, и при невозможности устранения, просто создайте его заново в генераторе, но уже исключив из него те изображения, которые не корректно отображались (перетащите их мышью в область «Non-Sprited Images»).

Анализ сайта: Проверка Траста
Подписаться на новости:
Предыдущие:
  1. Как получить быстрый сайт — оптимизация (сжатие) изображений и скриптов, а
  2. Gzip сжатие для ускорения загрузки сайта — как его включить для
  3. Оптимизация (сжатие) CSS в Page Speed — как отключить внешние
  4. Как измерить скорость загрузки сайта онлайн, а потом ее увеличить
  5. Графика для Web — как подготовить изображение в Фотошопе и вставить
  6. Site-Auditor — SEO анализ и проверка позиций сайта в
Рубрика : Полезные программы, Скорость загрузки сайта

Комментарии
Андрей

Как всегда четко и полезно, большое спасибо.

Владимир

Так непривычно видеть новый вид меню...прям потерялся...но думаю так будет лучше...удачи !!!

talisman

Прочитал все четыре статьи про ускорение сайта. Шаг за шагом применил все методы к новому сайтику. Тоже получил 93 балла в PageSpeed :). Кстати, оказывается, я рассматривал только главную страницу своего сайта, а по внутренним страницам баллы поменьше показывает. И замечания по ним тоже разные. Но все равно успех по оптимизации сайта большой. Прикрепил дополнительно Hyper Cache и сайт на wordpress просто летает. Объявляю благодарность автору блога за проделанный немаловажный труд. Ежедневно захожу на блог и узнаю для себя что то новое. Спасибо. Удачи!

Василий

Не так давно тоже занялся скоростью загрузки одного из своих сайтов, в том числе стал использовать спрайты. Заменил js-скрипт, который менял изображение при наведении курсора, на css. Теперь считаю, что это вообще изврат, использовать для таких целей js. В результате всех манипуляций скорость загрузки увеличилась в два раза. Если посмотреть диаграмму загрузки моего сайта в настоящее время, то основное время занимают рекламные баннеры.

Дмитрий

Очень полезный блог, вне всяких сомнений. Огромное спасибо автору.

Reprisal

удерживая при это нажатой клавишу Shift на клавиатуре (в этом случае статические объекты на вебстранице будут заново запрошены с web сервера вашего ресурса)

Наверное, имелось в виду клавиша Ctrl?

За статью большое спасибо. Всё забывал осуществить идею создания спрайтов, а тут статья подходящая

Максим

Дмитрий!

предлагаю css вставить в head, а все ява скрипты, по возможности перенести перед

Отображение страницы у вас не начнётся пока не загрузятся скрипты, так уж лучше пусть сначала визуальное оформление покажется просматриваемому а потом в конце и сами скрипты, тем самым вы ещё больше ускорите свой сайт

Павел

Помогите пожалуйста.Где этот файл со стилями (css style) находится в Joomla???

Дмитрий

Павел: в папке с используемом вами шаблоном для Joomla (/templates/название шаблона),но называться он может и иначе.

Максим

Павел

отключите в joomla — web optimizer или же используя WO делайте спрайты не пригая к SpriteMe.

Короче говоря используйте для оптимизации сайта полностью функционал Web Optimizer или же плагины разных разработчиков

da

Спасибо, очень познавательно

Дмитрий Бессуднов

Скажите пожалуйста где и как удалить пропись тех фотографий, которые были удалены с блога. Просто когда к ним идет обращение тратиться дополнительное время на загрузку сайта

Олег

Здравствуйте. Почему-то один из спрайтов из 6 картинок получился в 10 раз больше, чем весят эти картинки все вместе. Почему так? Подскажите, пожалуйста.

Александр

Здравствуйте. Подскажите, что можно сделать в такой ситуации.

Page speed выделят красным, что нужно объединить изображения в CSS-спрайты. А SpriteMe показывает только область «Non-Sprited Images» и все. Что нужно сделать, чтоб объединить то, что советует Page speed?

Mark

Дмитрий скажите пожалуста, возможноли вырезаную часть из спрайта повторить свойством repeat-x ? Пробовал по разному, но картинка упорно не хочет повторяться, вставляется только один раз (((

хочу организовать примерно следующее:

#menu a:hover {

background-image: url (image.png); /*это мой спрайт*/

background-repeat: repeat-x; /* Повторение фона */

background-position: 0 -1017px ; /* Положение фона */

}

Ольга

Добрый день! нашла у вас очень интересную и полезную статью! только вот у меня не совсем получилось :(... делала всё как рассказано и показано, а в итоге сайт, коненчо, ускорился и стал меньше вешать, но все объединенные картики с сайта куда-то пропали:((( с чем это могло быть связано? повторное использование spriteme показало в колонке non-sprited images — ошибка запроса картинки.

Спасибо!

Марина

Уф, добрый вечер! часто попадаю на ваш сайт, даже подписана на рассылку! так и охота сказать «краткость сестра таланта!» ))))

А за информацию спасибо! не понятно только 2 вопроса! это что делать с образовавшимся спрайтов с правой стороны экрана своего сайта... экспорт их не получается... может что не так сделала...

и имеет ли смысл делать спрайты для сайта на котором главная страница обновляется раз в неделю и установлены слайд шоу! или как часто их делать???

Марина

прошу прощения, не заметила кнопку оповещения на e mail... если можно оповестите меня о ответе! Буду признательна!

Марина

кажется разобралась! у меня все изображения «Non-Sprited Images»... ох а что тогда можно сделать для ускорения загрузки изображений!?

Роман

Спасибо за цикл статей! Не всё помогло и заработало, но зато натолкнуло на другие решения что в общем итоге дало хороший результат!!!

Сергей

Здравствуйте. Спасибо за интересные статьи. Читаю Ваши статьи регулярно.

Эта статья не исключение. Но у меня к Вам несколько вопросов:

1. Я пошагово сделал как Вы написали, но на конечном этапе у меня пропали картинки объединенных изображений ( скайп, поиск, корзина, адрес и тел.). Подскажите пожалуйста где искать и исправить.

2. Непонятно ваши слова:

Но обратите внимание, что в приведенной инструкции путь до графических файлов спрайтов вам нужно будет поменять на свой. Для примера приведу участок кода моего style.css до внесения изменения:

#content .post_bottom{background:#bce3ff url (images/post_bottom.png) no-repeat bottom;padding:0 0;clear:both;overflow:hidden;height:100%;margin-bottom:5px;font:13px Arial, Helvetica, sans-serif;}

И после:

#content .post_bottom{background:#bce3ff url (http://ktonanovenkogo.ru/wp-content/themes/Organic/images/spriteme1.png) no-repeat bottom; background-position: -10px 0px;padding:0 0;clear:both;overflow:hidden;height:100%;margin-bottom:5px;font:13px Arial, Helvetica, sans-serif;}

Что это такое и где можно посмотреть смс платформа opencartю

За ранее благодарен.

Сергей

на хрена писать, если не отвечаете.

Дмитрий

Сергей: я Вам что-то должен? Вы заплатили за мой курс? Может быть на этот сайт доступ платный и в договоре указана обязательная техподдержка? Нет, ну тогда без претензий попрошу. Распространяется «как есть», а комментарии добавлены на сайт для Ваших дополнений, вопросов и ответов на вопросы других читателей (лично Вы многим ответили?). Я отвечаю, когда есть время и есть что ответить. Возможно, что Вы спутали меня с работником техподдержки.

Написать

(обязательно)

(обязательно)

При вставке любого кода, пишите его между [php] и [/php]

Это не спам (обязательно)

Подписаться без комментирования