Лого SiteHere.ru

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

Исследование скорости загрузки страницы сайта

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

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

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



Тестируемый сайт

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

Замеряемый сайт

Я сразу замерил скорость загрузки страницы, количество запросов и размер для пустой страницы. Чтобы мы могли смотреть на сколько увеличивается время загрузки страницы сайта относительно пустой (на которой ничего нет). Итак, вот общие параметры:

Начальная скорость загрузки страницы

Здесь нам важны три параметра:

  • Page load time — время загрузки страницы сайта;
  • Total page size — общий размер (вес) страницы;
  • Total number of requests — общее количество запросов.

А сейчас давайте взглянем на график загрузки страницы сайта (пока что без пояснений):

Временная шкала загрузки начальной записи


Процесс исследования | Обычные JPEG изображения

А сейчас я загрузил на свой тестовый сайт 10 иконок в виде JPEG изображений. Для теста я их сделал на разном фоне чтобы смотрелись веселее. Их общий вес — 60 Кб. Вот как они выглядят:

Сейчас замеряем скорость загрузки и получаем следующие общие параметры:

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

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

Выше я писал что смотрим на график без пояснений, потому что нет там загружались стандартные скрипты и файлы стилей, которые используются в теме. Но сейчас Вы можете увидеть где загружаются все 10 изображений (я их подсветил):

Временная шкала загрузки 10 иконок изображений

Видно где они загружаются и как увеличивается общее время загрузки сайта. Хотя я добавил всего 10 JPEG изображений.



Процесс исследования | Web иконки

Для сравнения давайте посмотрим как измениться скорость загрузки страницы сайта если вместо обычных иконок использовать иконки Web Fonts. Не смотря на то, что они много уже где используются — большинство даже не знают о их существовании. Процесса установки здесь не будет.

Я их вставил 20 штук, в отличие от 10, как в прошлом тесте. Я подобрал похожие иконки, чтобы Вы увидели насколько минимально их отличие визуально (я сделал 2 скриншота страниц с одним вариантом и с другим):

Что же обстоит с основными параметрами:

Тестирование Web Fonts

Вы могли заметить, что размер страницы сайта здесь увеличился. Но хочу Вас успокоить: от того, 10 иконок я добавлю с помощью Web Icons или 100, размер страницы не увеличится! Потрясающе, правда?!

А сейчас посмотрим на временную шкалу и найдем где подгружаются эти иконки (эта строка также подсвечена на изображении ниже):

Исследование Web Icons

Всего одна строка в отличие от 10 из прошлого примера, где были обычные JPEG иконки! Кстати, общее количество запросов увеличилось всего на 2.



Подробнее о Web иконках

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

Вывод

Из статьи Вы увидели как в скорости загрузки страницы проигрывают обычные иконки. Хотя я здесь вставил всего 10 простых изображений и 20 иконок Web — уже заметна разница в скорости загрузки страницы и количестве запросов. А ведь на реальном сайте их используется гораздо больше!

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

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

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


Успехов!

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

4 комментария к записи
  • bytrina

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

     
  • GoldenScrew

    Возможно преимущество Canvas в HTML 5 будет таким же, по сравнению с обычными изображениями, что скажите?

     
    • Юрий Немец

      Вы можете провести свое собственное исследование и увидеть на реальных цифрах на практике результат 🙂 .

       
  • Эмиль

    Не понимаю, почему такой полезный сайт ещё не топ1 по России?

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *