Създаване на CSS спрайтове в онлайн генератора Sprites Me за намаляване на броя на заявките към сървъра
Здравейте, скъпи читатели на блога KtoNaNovenkogo.ru. Днес изглежда краят на поредицата от статии, посветени на увеличаването на скоростта на зареждане на сайт. Както вероятно знаете, напоследък това е един от факторите, влияещи върху успеха на промотирането на проекти.
Намалете броя на изтеглените файлове, за да ускорите сайта
Но нека първо ви напомня за това, което беше обсъдено в предишните четири публикации, защото всички аспекти на ускоряването на уебсайтове са много важни и можете да получите максимален ефект само от използването на всички функции.
Както казах в предишната статия, за зареждане на всяко изображение в браузъра на потребителя от уеб сървър, независимо от това как е формирано (с помощта на IMG тага или в CSS с помощта на свойството "background"), се използва отделна http заявка. Ако във вашия проект има доста графики, тогава броят на такива заявки ще бъде неприлично голям.
Например, в началния етап от развитието на моя блог, услугата Pingdom (може да измерва скоростта на изтегляне, както и да настрои проверка и наблюдение на наличността на сайта - време за работа) даде следното заключение:
Откъде може да дойде толкова голям брой снимки? Естествено, това ще бъдат тези, които вмъквате във вашите статии, но все пак по-голямата част ще бъдат изображенията, които са част от шаблона (елементи на дизайна). Именно техния брой ще се опитаме да оптимизираме.
В предишната статия вече споменах, че преди всичко ще трябва внимателно да прецените дали всички тези чертежи наистина трябва да бъдат заредени или някои от тях могат да бъдат премахнати от CSS файла, без да се компрометира външният вид на проекта.
Обръщам внимание на факта, че е необходимо дапремахнете свойствата на "фон", които инициират тяхното зареждане, ине просто физически премахване на графичните файлове от сървъра, т.к. като направите това, можете значително да влошите скоростта на изтегляне - времето ще бъде изразходвано за търсене на несъществуващи изображения.
Лично аз премахнах няколко дузини незначителни изображения, използвани в шаблона на моя блог, като по този начин намалих няколко дузини ненужни извиквания към уеб сървъра при всяко зареждане на страница, като по този начин леко ускорих общата й скорост.
Е, и онези фонови изображения, които все още се оказват необходими в дизайна, ще се опитаме да ги комбинираме в един или повече големи графични файлове (спрайтове), което ще ни позволи леко да намалим броя на заявките към уеб сървъра. CSS sprite технологията е известна отдавна, тя е добре разработена и се поддържа от всички браузъри.
Единственият недостатък, който имат в сравнение с отделните графични файлове за всяко фоново изображение, е сложността на създаване и поддържане. Какво представлява, т.е. да го направите сами и да опишете позицията на отделните фонови изображения в CSS кода не е лесна задача.
Но за щастие можете да намерите много онлайн услуги в Интернет, които ви позволяват да създавате спрайтове от качените от вас снимки. След това ще трябва да видите кои свойства в style.css трябва да бъдат променени, за да работят правилно.
Най-добрата онлайн услуга според мен е "Sprites me " - широко известна и популярна сред буржоазията, но не заслужено пренебрегвана в RuNet. Дори не е необходимо да качвате вашите фонови изображения, които искате да обедините в него.
В какво, истинска буржоазна услуга - ол инклузив, и освен това е безплатна. Работата с него е наистина много проста и сега ще ви кажа как точно да създадете и приложите спрайтове на вашия сайт за нула време.
Между другото, следНаправих всички стъпки, които описах в тази серия от статии за увеличаване на скоростта на изтегляне, в услугата Pingdom резултатът вече се оказа много по-приятен за окото:
Като цяло, чрез ускоряване на моя блог, успях да намаля наполовина броя на http заявките, като същевременно намалих наполовина броя на изображенията, изтеглени в браузърите на потребителите от уеб сървъра. Частично бяха премахнати ненужните снимки на шаблона, а останалите бяха обединени, доколкото е възможно. Също така общото тегло на всички заредени обекти намалява с една трета, поради тяхната оптимизация (компресия).
Между другото, CSS спрайтовете не само намаляват броя на обажданията към сървъра, но и до известна степеннамаляват общото тегло на заредените обекти. Факт е, че няколко фонови изображения поотделно ще тежат повече от същите, но комбинирани в едно. Нека разликата е малка, но все пак ще бъде.
Създавайте CSS спрайтове от фонови изображения на уебсайтове
Не знам колко добре работи този онлайн генератор в различни браузъри, но в Opera работи без проблеми и с гръм и трясък.
Отворете отметките в страничната лента на браузъра и изберете папката, в която искате да запазите връзката на генератора, след което просто щракнете с левия бутон върху надписа „Sprites me“ и го плъзнете в лентата с отметки на вашия браузър.
След това отворете всяка страница от вашия ресурс в него и просто щракнете в лентата с отметки върху новосъздадената отметка на услугата „Sprites me“. На фона на вашата страница с ресурси в горния десен ъгъл ще се отвори прозорец на тази добавка, където можете да създадете спрайт специално за вашия проект и след това да го изтеглите. Удивително удобен.
Огледайте внимателно района„Предложени спрайтове“ за моя блог предлага създаване на три спрайта от фоновите изображения на моята WordPress тема. Първият ще включва девет графични файла, а останалите два. В най-долната част на прозореца на генератора, в зоната "Изображения без спрайт", има картини, които не могат да се комбинират.
Забележително е, че в случай, че не сте съгласни с мнението на генератора, можете да плъзгате и пускате изображения между тези области с левия бутон на мишката. Имах нужда от това, например, след като се опитах да приложа първия от предложените спрайтове в моя блог, се сблъсках с неработоспособността на две от деветте комбинирани изображения.
След като опитах това и онова и си поиграх с CSS кода, открих, че е полезно, когато създавам първия спрайт, просто да плъзгам проблемните изображения от него в долната област „Изображения без спрайт“. След това не е имало проблеми с работата му. Както казах, всичко е много просто и ясно. Браво на създателите на този онлайн генератор.
И така, какво трябва да направите, за да създадете спрайт? Да, просто щракнете върху бутона „направи спрайт“, разположен в горния десен ъгъл на всяка област с изображения, които могат да се комбинират, ако желаете.
След това генераторът ще помисли известно време и след това вместо URL адреси на отделни изображения ще покаже връзка, от която можете да изтеглите готов CSS спрайт (всички изображения ще бъдат комбинирани в едно ). Задържането на мишката върху тази връзка ще ви покаже как ще изглежда:
За да изтеглите създадения спрайт, щракнете с десния бутон върху неговия URL адрес и изберете елемента за запазване на обекта чрез връзка от контекстното меню. След това се свържете с вашия ресурс чрез FTP и копирайте графичния файл със спрайта в папката, където се съхраняват снимкитевашия шаблон (въпреки че можете и към всяка друга директория, защото няма значение).
По същия начин вие създавате останалите (като просто щракнете върху бутона „make sprite“), които генераторът предлага да създадете. Изтеглете получените спрайт файлове и ги качете в папката със снимки на вашия ресурс.
Правене на промени в CSS файла при свързване на спрайтове
Но тази работа още не е завършена. В крайна сметка все още ще е необходимо да кажете на браузъра на потребителя как да извлече желаните фонови изображения от създадените спрайтове.
Това ще изисква някои малки промени във файла със стилова таблица на вашия проект, който обикновено се намира в папката с шаблони на двигателя, който използвате - най-често се нарича style.css, но са възможни вариации.
Но тук не би трябвало да имате особени затруднения, защото този генератор ще ви даде подробни инструкции какво точно във вашия CSS файл ще трябва да промените. За тази инструкция ще трябва да щракнете върху бутона „експортиране на CSS“, намиращ се в горния десен ъгъл на прозореца „Sprites me“.
Това ще отвори страница с препоръки за извършване на промени конкретно във вашия style.css, за да работят обединените изображения, които сте създали. Конкретните свойства на CSS, които трябва да бъдат променени, ще бъдат изброени, както и тези, които трябва да бъдат премахнати, и тези, които трябва да бъдат написани на мястото на премахнатите, ще бъдат зачеркнати.
Но имайте предвид, че в инструкциите по-горе ще трябва да промените пътя до графичните файлове на спрайтовете на вашия собствен. Например, ето част от моя style.css код, преди да направя промяната:
Ако свойството „background-position“ вече се появява в свойството, заменете стойностите в него с тези, предлагани от този генератор.
След като направите всички предписани промени в style.css, опреснете страницата на вашия ресурс, отворена в браузъра, докато държите натиснатклавиша Shift на клавиатурата (в този случай статичните обекти на уеб страницата ще бъдат повторно поискани от уеб сървъра).
Ако не забележите промени и изкривявания в дизайна, тогава можем да ви поздравим за успешното увеличаване на скоростта на зареждане на сайта чрез намаляване на броя на http заявките - защото сега няма да се зареждат десетки графични файлове, а само няколко (няма значение, че ще тежат повече, защото никой не ви притеснява да ги оптимизирате, както беше описано в една от цитираните в началото статии).
Ако изкривяванията все още се появяват след прилагане на CSS спрайта, опитайте се да определите причината им и ако е невъзможно да го премахнете, просто го създайте отново в генератора, но вече изключвайки от него тези изображения, които не са били показани правилно (плъзнете ги с мишката в областта „Изображения без спрайт“).