Заказать звонок
Главная Полезная информация Как замерить скорость загрузки сайта?

Как замерить скорость загрузки сайта?

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

Изображения в контенте

Основная причина медленной загрузки страницы - это, безусловно, изображения. На их загрузку тратится в среднем от 90% загрузки всей страницы и если не оптимизировать изображения, то картина будет, мягко говоря, печальной.

Давайте посмотрим на цифры.

Взгляните на нашу главную страницу и посчитайте сколько там всего изображений, я насчитал 17 (на момент написания статьи).

Теперь давайте вспомним, какой размер у изображений, которые мы используем. Это может быть огромная фотография с фотоаппарата (в районе 2-х мб), или просто картинки из интернета (0,5 мБ - 1 мБ).  Давайте возьмем 600 кБ - это средний размер картинок, которые будут на нашей странице. 

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

И что у нас получается? А получается, что мы вставляем на сайт 17 изображений, размером по 600кБ, итого - 10мБ данных, которые браузер должен загрузить с сервера.

По сравнению с этим, все остальные файлы (даже если их больше чем положено), на столько не значительного размера (в среднем 200 - 500 кБ), что про прочую оптимизацию можно забыть.

А как у нас?

Для сравнения, на нашем сайте (где все изображения правильного размера и степенью сжатия) общий размер всех загружаемых с сервера файлов равен 623кБ.

Подключаемые скрипты

Если исправить проблему с изображениями, то можно взглянуть на другую проблему, которая стоит на втором месте, среди прочих - это скрипты.

Современные сайты содержат в себе много скриптов, отвечающих за разные функции, вот примерный список:

  • jQuery - библиотека, основной инструмент программирования для браузеров ( расширение JavaScript ).
  • MaskEdInput - плагин для наложения на поля масок, чтобы пользователю было удобно заполнять поля (например ввод телефона).
  • Slick - плагин для разных видов слайдеров.
  • Fotorama - плагин для создания фотогалерей.
  • Скрипт CMS - часто на сайте загружаются скрипты от системы управления сайтом, которые нужны для его работы.
  • Дополнительный скрипт - содержит все скрипты, которые писали верстальщик и программист при сборке сайта.

В данном списке не столь важен объем этих файлов (он в районе 200кБ), а их количество и расположение в теле документа. Ведь чаще всего не опытные верстальщики эти скрипты вставляют в начало документа и при загрузке страницы браузер сначала загружает их, обрабатывает, и только потом продолжает загружать остальной документ, и в этом случае происходит ощутимая задержка отображения страницы.

Почему я обратил внимание на количество подключаемых скриптов? Дело в том, что помимо процесса скачивания скрипта (как и любого другого файла) тратится значительное время на инициализацию подключения и ожидания загрузки с сервера.  В итоге на загрузку скриптов уходит около 1-2 секунд, а это ощутимо для сайта.

Как загружать скрипты правильно?

У нас все скрипты автоматически объединяются в один файл, сжимаются и помещаются в самый низ тела страницы (не ссылка на скрипты, а сам их код), благодаря чему, страница отображается быстрее и скрипты ей не мешают. На загрузку всей страницы вместе со стилями и скриптами уходит около 1 секунды.

Подключаемые стили и шрифты

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

Но тем не менее и файлы стилей можно объединить и поместить в тело страницы (в начало), тем самым избежать лишние задержки при обращении к серверу.

Когда все настроено правильно...

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

Все скрипты и стили запаковываются и подключаются правильно, в результате общая скорость загрузки нашей главной страницы составляет 3 секунды при первом посещении, при повторном посещении - 1 секунда (замеры производились на момент создание данной статьи).

Зачем все это нужно?

Даже если Вам кажется, что страница загружается быстро, это не всегда так, у поисковых систем на это свои взгляды, они проверяют все параметры и оценивают по ним сайт. И в случае, если Ваш сайт будет медленнее подобного сайта конкурента, то система покажет именно его, а Ваш останется где-нибудь ниже. Потому-что не логично показывать медленный сайт если есть более оптимальный вариант. Поисковые системы хотят сделать интернет лучше =)

Как измерить скорость загрузки страницы?

Для теста скорости загрузки страницы есть один из самых популярных и авторитетных тестов от Google - PageSpeed.

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

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

ВАЖНО! Тут нужно уточнить один нюанс, при первом обращении к серверу создается сессия, на которую уходит много времени (на виртуальных серверах, какой мы и используем, они гораздо дешевле выделенных), в таком случае тест покажет показатель в районе 60/100, попробуйте нажать кнопку "ANALYZE" чуть позже и он проверит снова (к сожалению этот фактор от нас не зависит).