Увеличение скорости сайта используя CSS Sprites

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

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

Какой вывод нужно из этого сделать? Ели вы хотите, чтобы ваш сайт был удобным и хорошо позиционировался в рядах основных поисковых системах, то вы должны искать пути увеличения скорости сайта. Можно реализовать сжатие подключаемых внешних файлов, пересмотреть HTML структуру сайта и т.д. Но сегодня хотелось бы остановится на использовании изображений в вашем веб-дизайне. Одним из лучших методов увеличения скорости сайта, в плане изображений, есть использование CSS спрайтов (CSS Sprites).

Что такое CSS Sprites?

Есть распространенное заблуждение, что спрайт подразумевает ряд небольших изображений. Напротив, CSS спрайт – это одно большое изображение.

Наверняка вы видели кнопки, которые меняют стиль при наведении (использование атрибута :hover), такие кнопки создаются с помощью CSS Sprites. CSS Sprite - это по сути, отображаемая область данного изображения, которая определяется в вашем CSS коде. Кто-то может сказать, что кнопки можно сделать отдельными изображениями, но тогда их придется заранее подгружать с помощью JS.

Преимущества использования CSS спрайтов

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

Использование CSS спрайтов уменьшает количество HTTP запросов и может реально увеличить скорость загрузки сайта. Использование CSS Sprites также позволяет быстрее реагировать на пользователя, так как элементы интерфейса загружаются, прежде чем пользователь обрабатывает их. Эта техника может быть полезной, в ситуациях множества мелких изображений, например иконок меню.

Основы построения фоновой картинки методом CSS Sprites

Для примера, я создал картинку с логотипами компаний и сохранил ее под именем logos.jpg.

Расстояния между логотипами составляют 100px, а начальные координаты первого логотипа x=0, y=0. Наглядный пример подан ниже:

Для указания позиции CSS спрайта, используем атрибут background-position

Для вывода второго спрайта, нужно всего лишь корректировать ось абсцисс (x).

Все станет понятнее, посмотрев примеры поданные ниже:

CSS код для создания CSS Sprites

#logos {height: 64px; margin: 0; padding: 0; position: relative;}

#logos li {background: url(/logos.jpg) no-repeat top left; margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}

#logos a {height: 64px; display: block;}

// First logo

#logos li a.jaz {background-position: 0 0}

// Second logo

#logos li a.iberotel {background-position: 0 -100px;}

// Third logo

#logos li a.solymar {background-position: 0 -200px;}

// Fourth logo

#logos li a.travcotels {background-position: 0 -300px;}

// Fifth logo

#logos li a.intercity {background-position: 0 -400px;}

Анализ результатов использования CSS Sprites

В приведенном выше примере, можно было уменьшить размер файла от 52kb до 22kb и количество запросов HTTP с 5 до 1. Это представляет собой реальный пример увеличения скорости сайта.

Использование спрайтов тестировалось на разных браузерах и дало отличные результаты.

Если желаете что-то дополнить по поводу увеличения скорости сайта или об использовании CSS Sprites, просим отписаться в комментариях. 

Дальше: PHP сниппеты | 10 полезных php сниппетов