Combine images into CSS sprites. Google Page Speed
осваиваю интересную фишку, с которой знакомы почти все оптимизаторы)
так как сайт мой тяжеловат, а скорость загрузки может повлиять на показ в гугле — советую использовать)
Google Page Speed
Скачать её можно в панели управления вебмастерами google, хотя у меня подозрение что она с firebug уже в комплекте идет. Если кто в курсе - в комменты можете написать, мне лень переустанавливаться)))
Не врубался сперва куда она устанавливается, так вот - она устанавливается прямо на firebug
итак, открываем сайт, включаем firebug и видим на панельке PageSpeed
там очень много факторов, влияющих на скорость) нас в первую очередь интересуют все красные
я о них постараюсь позже написать.
Но сегодня напишу о Combine images into CSS sprites
Фишка в том, что если мы хотим использовать кучу мелких изображений для сайта, загрузка каждого такого малыша в отдельности будет гораздо больше, чем если их загрузить одним небольшим файлом и разбить прямо из браузера.
По-русски об этом ещё в техногрете у Лебедева написано
но там все настолько лаконично, что голову сломать))) Я так и плюнул три года назад.
А сегодня для себя нашел оптимальное готовое решение =) Спасибо зарубежным разработчикам =)
итак:
сперва заходим и видим под словом INSTALLATION ссылку SPRITEME, её и тащим на закладки (там javascript, а его банит ЖЖ, потому только оттуда стянуть получится)
Далее открываем наш сайт, который хочется чуть ускорить и в нем открываем ту закладку, которую получили
Cправа откроется панелька такого вида (всвязи с тем, что часть изображений я уже частично оптимизировал — то покажу на примере только двух картинок, которые я ещё не трогал:
Итак, он указывает нам, что эти две картинки можно сложить в одну и ускорить загрузку сайта.
Что мы и делаем: Кликаем на "make sprite" и смотрим изменения.
теперь картинка стала одним целым! УРА! но, теперь зададимся вопросом:
"И что мне с этого? я и в обычном редакторе так сделать могу"
идем дальше - нам надо подобные изображения закрепить в таблице стилей либо в исходном коде.
на вопрос: "А как это сделать?"
отвечаю - на той панели есть кнопка Export CSS нажмем её и попадем в хелпер, где указано в каком файле указать какой адрес картинки и какие параметры смещения
понятное дело - нечего попусту мучить сервер, такчто готовые изображения скачиваем на хостинг и адреса заменяем на родные, а параметры вида
background-position: -10px -42px;
добавим в таблицу стилей или в атрибут style, если элемент в стилях не описан
и перезапустим страницу - вуаля! теперь скорость стала чуть выше
Tips:
Итак, важный на данный пункт подводный камень: как только вы склеили картинки и нажали кнопку export - сохраните эту страницу локально, так как в следующий раз если вы выполните не полную склейку - в ней будет участвовать и новое изображение. А там уже будут другие координаты и придется делать все сначала. неприятно...
Второй подводный камень — советую перед работой сделать бэкап стилей, так как при склейке бывают всякие неприятности и к примеру можно поломать фон, если он из мелких спрайтов состоит
Успеха!
Добавить комментарий