Сегодня хочу провести небольшое исследование в котором рассмотреть скорость загрузки страниц сайта с помощью обычных иконок и с помощью иконок, о которых я писал вчера. Я написал массу плюсов, но сейчас хочу продемонстрировать один из них на примере реального сайта. Вы увидите значительные изменения скорости загрузки при использовании обычных изображений и специальных иконок. А затем самостоятельно решите что лучше и оптимальнее использовать!
Когда писал статью о сервисах, которые позволяют оптимизировать изображения для ускорения загрузки сайта. Также изучите ее:
Чтобы не было претензий к моему интернет-соединению я замерял скорость загрузки страниц сайта с помощью сервиса GTmetrix. Которые показывает всё что необходимо для этого мини-исследования.
Тестируемый сайт
Для исследования я установил CMS WordPress на тестовый домен и там замерял результаты. Вот как выглядит запись, в которой пока что нет изображений:
Я сразу замерил скорость загрузки страницы, количество запросов и размер для пустой страницы. Чтобы мы могли смотреть на сколько увеличивается время загрузки страницы сайта относительно пустой (на которой ничего нет). Итак, вот общие параметры:
Здесь нам важны три параметра:
- Page load time — время загрузки страницы сайта;
- Total page size — общий размер (вес) страницы;
- Total number of requests — общее количество запросов.
А сейчас давайте взглянем на график загрузки страницы сайта (пока что без пояснений):
Процесс исследования | Обычные JPEG изображения
А сейчас я загрузил на свой тестовый сайт 10 иконок в виде JPEG изображений. Для теста я их сделал на разном фоне чтобы смотрелись веселее. Их общий вес — 60 Кб. Вот как они выглядят:
Сейчас замеряем скорость загрузки и получаем следующие общие параметры:
Скорость загрузки страницы и вес страницы увеличились, а особенно заметно увеличилось количество запросов! А ведь мы добавили всего лишь несколько изображений размером 100×100 пикселей. Сейчас посмотрим что на происходит в процессе загрузки страницы сайта на временной шкале.
Выше я писал что смотрим на график без пояснений, потому что нет там загружались стандартные скрипты и файлы стилей, которые используются в теме. Но сейчас Вы можете увидеть где загружаются все 10 изображений (я их подсветил):
Видно где они загружаются и как увеличивается общее время загрузки сайта. Хотя я добавил всего 10 JPEG изображений.
Процесс исследования | Web иконки
Для сравнения давайте посмотрим как измениться скорость загрузки страницы сайта если вместо обычных иконок использовать иконки Web Fonts. Не смотря на то, что они много уже где используются — большинство даже не знают о их существовании. Процесса установки здесь не будет.
Я их вставил 20 штук, в отличие от 10, как в прошлом тесте. Я подобрал похожие иконки, чтобы Вы увидели насколько минимально их отличие визуально (я сделал 2 скриншота страниц с одним вариантом и с другим):
Что же обстоит с основными параметрами:
Вы могли заметить, что размер страницы сайта здесь увеличился. Но хочу Вас успокоить: от того, 10 иконок я добавлю с помощью Web Icons или 100, размер страницы не увеличится! Потрясающе, правда?!
А сейчас посмотрим на временную шкалу и найдем где подгружаются эти иконки (эта строка также подсвечена на изображении ниже):
Всего одна строка в отличие от 10 из прошлого примера, где были обычные JPEG иконки! Кстати, общее количество запросов увеличилось всего на 2.
Подробнее о Web иконках
В этой статье я привел только пример исследования иконок, но ничего не сказал про установку и где их взять. Это вы узнаете из небольшого видео:
Вывод
Из статьи Вы увидели как в скорости загрузки страницы проигрывают обычные иконки. Хотя я здесь вставил всего 10 простых изображений и 20 иконок Web — уже заметна разница в скорости загрузки страницы и количестве запросов. А ведь на реальном сайте их используется гораздо больше!
Если что-нибудь упустили, вот основные пункты статьи (можно перейти к любому — кликнув по нему):
Сообщите своим друзьям о преимуществах Web иконок. Для этого нажмите на одну из кнопок социальных сетей ниже.
Успехов!
С Уважением, Юрий Немец