Здрастуйте, шановні читачі блогу . Сьогодні, схоже, завершується серія статей, присвячених збільшення швидкості завантаження сайту. Як вам, напевно, відомо, віднедавна вона є одним з факторів, що впливають на успішність просування проекту.
Це вже п’ята стаття. У попередніх публікаціях для аналізу швидкості завантаження сайту та отримання рекомендацій щодо її збільшення, ми скористалися дуже зручним і ефективним інструментом під назвою Page Speed. Сьогодні ж поговоримо про таке поняття, як CSS спрайт (sprites).
Знижуємо кількість підвантажуваних файлів для прискорення сайту
Але давайте я спочатку нагадаю вам те, про що йшла мова в чотирьох попередніх публікаціях, бо всі аспекти прискорення сайту дуже важливі і максимальний ефект ви зможете отримати тільки від застосування всіх можливостей.
Як я говорив у попередній статті, для завантаження кожного зображення в браузер користувача з web сервера, незалежно від того, як воно формується (за допомогою тега IMG або ж в CSS властивості «background»), використовується окремий http запит. Якщо графіки на вашому проекті досить багато, то і кількість таких запитів буде непристойно великим.
Наприклад, на початковому етапі розвитку мого блогу сервіс Pingdom (на ньому можна виміряти швидкість завантаження, а так само налаштувати перевірку та моніторинг доступності сайту — аптайм) давав такий висновок:
Звідки ж може взятися така велика кількість картинок? Природно це будуть ті, які ви вставляєте в свої статті, але все ж основну масу будуть складати зображення, що входять до складу шаблону (елементи дизайну). Ось саме їх кількість ми і спробуємо оптимізувати.
В попередній статті я вже згадував, що насамперед треба буде уважно подивитися, чи дійсно потрібно завантаження всіх цих малюнків, або частина з них можна без збитку для зовнішнього вигляду проекту видалити з файлу CSS.
Звертаю вашу увагу на те, що потрібно саме видалити властивості «background», ініціюють їх підвантаження, а не просто фізично прибрати графічні файли з сервера, оскільки цим ви можете істотно погіршити швидкість завантаження — буде витрачатися час на пошук не існуючих зображень.
Особисто я видалив кілька десятків незначних картинок, які використовуються в шаблоні мого блогу, скоротивши тим самим пару десятків зайвих звернень до web-серверу при кожному завантаженні сторінки, тим самим трохи прискоривши його загальну швидкість роботи.
Ну, а ті фонові картинки, які все ж виявляться необхідними в оформленні, ми спробуємо об’єднати в один або кілька великих графічних файлів (спрайтів), які дозволять ще трохи знизити число запитів до веб-сервера. Технологія CSS спрайтів відома досить давно, добре відпрацьована і підтримується всіма браузерами.
Єдиний мінус, який вони мають у порівнянні з окремими графічними файлами під кожне фонове зображення — це складність створення і підтримування. Що є, то є — зробити його самому і описати становище окремих фонових картинок в коді CSS — завдання не з простих.
Але, на щастя, в інтернеті можна знайти багато онлайн сервісів, що дозволяють створювати спрайт з завантажених вами картинок. Вам потрібно буде потім подивитися, які саме властивості style.css потрібно поміняти для їхньої коректної роботи.
Кращим онлайн сервісом, на мій погляд, є «Sprites me« — широко відомий і популярний в буржунете, але незаслужено обійдене увагою в рунеті. Вам навіть не потрібно завантажувати в нього свої фонові зображення, які ви бажаєте об’єднати.
Цей генератор все зробить за вас — сам перегляне ваш сайт, дасть рекомендації про те, які саме картинки можна буде об’єднати в спрайт, а які ні.
Як, справжній сервіс по буржуйськи — все включено, та й до того ж безкоштовно. Працювати з ним дійсно дуже просто і я зараз розповім, як саме в два рахунки створити і застосувати на своєму сайті спрайт.
До речі, після того, як я зробив усі дії, описані мною в цій серії статей про збільшення швидкості завантаження, в сервісі Pingdom результат вже вийшов набагато більш приємний оку:
В цілому, прискорюючи свій блог, мені вдалося в два рази знизити кількість http запитів, при цьому так само в два рази знизити кількість завантажуваних в браузери користувачів з web сервера зображень. Частково були видалені не потрібні картинки шаблону, а решта були по можливості поєднані. Так само на третину зменшився загальна вага всіх підвантажуваних об’єктів, за рахунок їх оптимізації (стиснення).
До речі, CSS спрайт не тільки дозволяють зменшити кількість звернень до сервера, але і в деякій мірі зменшують загальну вагу завантажуваних об’єктів. Справа в тому, що кілька фонових зображень окремо будуть важити більше, ніж ті ж самі, але об’єднані в одне. Нехай різниця буде невелика, але вона все ж таки буде.
Після проведення всіх описаних у цих п’яти статтях заходів щодо підвищення швидкості завантаження, Page Speed дає моєму блогу оцінку 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(https:///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»).
Оптимізації зображень присвячений другий ролик з 6 відеоуроків по темі прискорення сайту, які, на мій погляд, має сенс подивитися, щоб сприймати картинку оптимізації в цілому (потрібний ролик можна вибрати з випадаючого списку в лівому верхньому куті вікна плеєра):
«alt=»»>
Удачі вам! До зустрічей на сторінках блогу
