Почему использование спрайтов лучше, чем обычные картинки?

Добрый день, друзья. Вчера, когда я рассказывал о том, как использовать спрайты в вебе, я упоминал, что сайты, созданные на основе спрайтов, грузятся быстрее. Так как меньше запросов посылаются серверу и получается так, что одна картинка большего размера, грузиться быстрее, чем несколько — меньшего. (Как сделать CSS-спрайты и что это такое?)

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

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

Итак, я за часик нарисовал и написал html + css – код следующей странички:

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

Страничка, созданная на основе обычных картинок, довольно проста и по ней нечего рассказывать. А во второй - я использовал такой спрайт:

Вес папки с изображениями для странички со спрайтом - 80 кб, в то время как у второй - 64 кб. Далее я выбрал 2 сервиса для оценки скорости загрузки сайта и поочередно проверил страницы.

Первым тестировалась страничка с обычными изображениями. Результат получился такой:

Скорость загрузки составила 5 миллисекунд - довольно не плохой результат. Но давайте посмотрим на показатели странички со спрайтами:

Скорость загрузки 3.5 миллисекунды. А значит страничка, при использовании спрайтов, грузится быстрее! Но не будем полагаться на один сервис, протестируем еще на одном, причем, несколько раз, так как скорость загрузки может меняться от множества факторов. Поэтому проведем еще три теста:

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

Как вы заметили, результаты примерно такие же, как и в прошлом тесте, средняя скорость загрузки 3 миллисекунды.

Скорость загрузки сайта без использования спрайтов тоже подтвердилась:

Теперь можно уверенно говорить, что использование спрайтов ускоряет загрузку страницы. Хотя я использовал довольно маленькое изображение. Может быть при использовании более крупного спрайта, ситуация развернется в противоположную сторону. Но об этом в других статьях. А на сегодня все! До завтра!

P.s.: оставляйте комментарии о вашем опыте использования спрайтов