Эксперимент: Влияние иконок, спрайтов и кодировки base64 для изображений на скорость загрузки сайта

Главная » Верстка » Эксперимент: Влияние иконок, спрайтов и кодировки base64 для изображений на скорость загрузки сайта
Самолетная 614022 Россия, Пермь +79630195620
Верстка
дизайн, новичкам, шаблоны
1139

В интернете огромное количество советов по ускорению сайтов. Кто — то советует ставить определенные плагины, кто-то рекомендует покрутить кеширование на сайте, кто-то и вовсе переехать с хостинга на VPS сервер. Я же решил провести эксперимент с версткой сайта. А именно и мелкими изображениями, и показать влияние того или иного способа на скорость загрузки.

Условия эксперимента.

Проверять будем 3 разных страницы сайта. Но каждая из них имеет одинаковый HTML каркас. CSS отличается лишь правилами работы с изображениями.

  1. страница — это обычные иконки;
  2. страница — это спрайт из иконок;
  3. страница — все иконки переведены в кодировку base64 и прописаны в CSS.

Ну и сам HTML каркас:

HTML каркас сайта

HTML каркас сайта

Подготовительные работы.

Было принято решение, что на сайте будет 22 разные иконки. Для их поиска, я воспользовался сайтом flaticon.com, от куда вытащил первую попавшуюся коллекцию иконок.

Выбираю иконки

Выбираю иконки для эксперимента

Далее в программе Sketch все иконки привел к одинаковому размеру, чтобы было более удобно с ними работать. Вытроил в 2 линии по 11 штук. И сделал нарезку.

Привожу к одному размеру все иконки

Привожу к одному размеру все иконки

Ну а для перевода изображений в base64, воспользовался утилитой Вase64 Image Encoder.

Кодировка изображений Base64

Кодировка изображений Base64

После чего создал 3 одинаковые папки, и сверстал 3 одинаковых HTML макета. В результате получился вот такой небольшой проектик.

Структура сайтов

Структура сайтов

Ну а дальше залил все папки на сервер в специально отведенный поддомен, для экспериментов.

Начинаем тестировать сайты на скорость загрузки.

Для проверки скорости загрузки страниц я выбрал сервис gtmetrix.com. Он мне очень нравится, так как выдает подробную информацию о тех или иных проблемах на сайте. Но сегодня это не особо нужно. Плюс ко всему, он тестирует загрузку не всего сайта, а именно той страницы которую вы указали. К сожалению большинство сервисов по проверке скорости загрузки этого не предоставляют.

Первый пошел

И так, первым испытуемым был сайт из папки example. Там использовался спрайт с иконками, и в CSS он везде подключался. Вот скриншот CSS файла.

Css сайта со спратайми

Css сайта со спратайми

Ну и соответственно отчет по скорости загрузки страницы.

Отчет скорости загрузки сайта со спрайтами

Отчет скорости загрузки сайта со спрайтами

Как видите, скорость загрузки 1 секунда. Выполнено 3 запроса при подключении к страницы. Это сам html файл, CSS файл и файл спрайта с иконками.

Второй пошел

Вторым на проверку у меня пошел сайт из папки example2. Здесь находился сайт, где каждая иконка лежала в отдельном файлике. Вот скрин этого CSS

CSS сайта где иконки отдельным файлом

CSS сайта где иконки отдельным файлом

Результат загрузки страницы можете видеть ниже.

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

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

Общее время загрузки 1,8сек. Выполнено 24 запроса при подключении. Один запрос на HTML страницу, один на CSS файл и 22 запроса на иконки (их 22 штуки). По 1 запросу на иконку.

Третий пошел

Ну и третьим на проверку пошел сайт из папки example3. Там все картинки были переведены в кодировку Base64. Вот фрагмент CSS файла.

CSS сайта где иконки переведены в Base64

CSS сайта где иконки переведены в Base64

Ну и результаты этих манипуляций.

Скокрость загрузки сайта где иконки переведены в base64

Скокрость загрузки сайта где иконки переведены в base64

Как видите, скорость загрузки сайта возросла, и составила 0,8 сек; Количество запросов уменьшилось и стало 2. Это HTML страница и CSS файл.

Подвожу итоги.

Использование иконок в виде отдельных файлов чревато падением скорости загрузки. Это связано с тем, что каждый файл подгружается по отдельности, и когда их много, образуется некая очередь. Если вы не хотите переводить иконки в кодировку Base64, то сделайте из них хотя бы спрайт.

Так же я не обратил ваше внимание на размер страницы. Если посмотрите, то сайт где каждая иконка была отдельным файлом, весил больше чем все остальные. Легче всего был сайт со спрайтами, так как кодировка Base64 увеличивает вес CSS файла.

Ну а сам сайт выглядел вот так.

Как выглядел сам сайт

Как выглядел сам сайт

Черкни и ты пару строк

А вы на своих сайтах проводили оптимизацию изображений? Вообще были в курсе, что верстка тоже влияет на скорость загрузки сайта?

Подписка на блог MASALKIN.NAME
Не упусти шанс получить отличные бонусы!

100% конфидециальность, адреса электронной почты не разглашаются и не предоставляются третьим лицам для коммерческого или некоммерческого использования.

Благодарность читателям

Спасибо что прочли эту статью до конца, надеюсь та информация что была изучена вами, оказалась для вас полезной. Если в ходе изучения возникли вопросы, то смело задавайте их в комментариях, я обязательно на них отвечу!

P.S. Не забудь подписаться на блог, тебя ждет много интересного и полезного!

Удачи!

  • Про спрайты слышал хотя и не применял. За base64 спасибо обязательно сделаю на сайте.

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

    • Масалкин Андрей

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

  • Интересный эксперимент, спасибо=)

    Я одинаковые иконки чаще всего гружу спрайтом — ну типа иконок рубрик

    А base64 — в основном одиночные элементы — разделители и тп

    • Масалкин Андрей

      Я давно от спрайтов ушел. Все мелкие элементы в base64 перевожу.

x

Ваше имя (обязательно)

Ваш e-mail (обязательно)

Сообщение