Способ ускорения загрузки страниц сайта

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

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

• 8 сервисов для оптимизации изображений

Чтобы не было претензий к моему интернет-соединению я замерял скорость загрузки страниц сайта с помощью сервиса 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 — уже заметна разница в скорости загрузки страницы и количестве запросов. А ведь на реальном сайте их используется гораздо больше!

Если что-нибудь упустили, вот основные пункты статьи (можно перейти к любому — кликнув по нему):

1. Тестируемый сайт
2. Процесс исследования | Обычные JPEG изображения
3. Процесс исследования | Web иконки

Сообщите своим друзьям о преимуществах Web иконок. Для этого нажмите на одну из кнопок социальных сетей ниже.

Успехов!

С Уважением, Юрий Немец