Проверка скорости загрузки сайта

    Команда самого крупного и известного мирового интернет-магазина Amazon провела исследование, в ходе которого выяснилось, что на каждые 100 мс (0,1 с) задержек в работе их проекта приходится 1% потерь от возможной прибыли. Однако предельно высокая скорость работы – это не самоцель в разработке веб-сайтов. Для наращивания объема продаж нужно учитывать и другие факторы:

    • Значительная часть аудитории пользуется исключительно мобильными девайсами, аппаратные возможности которых не предполагают пропускной способности как у десктопов. Соответственно, их интересы при настройке каналов связи сайта должны учитываться.
    • Медленный интернет-ресурс, скорее всего, является «тяжелым», а потому несёт дополнительно нагрузку для хостинга. Следствие этой технической проблемы – перерасход финансовых средств на аренду места под проект и ограничение доступа к его ресурсам в момент максимального числа одновременных подключений.

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

    Элементы, влияющие на скорость сайта

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

    1. Отправка DNS-запроса по имени ресурса.
    2. Подключение к серверу через IP-адрес (TCP-соединение).
    3. Настройка безопасного соединения посредством HTTPS-протокола (TLS-соединение).
    4. Запрос конкретной HTML-страницы по имеющемуся URL и ожидание ответа от сервера (HTTP-запрос).
    5. Загрузка HTML.
    6. Обработка полученного документа в браузерной оболочке с формированием очереди из запросов к ресурсам.
    7. Загрузка и анализирование CSS-стилей.
    8. Загрузка и выполнение JS-кода, наряду с которым запускается рендеринг страницы.
    9. Загрузка веб-шрифтов.
    10. Загрузка графики и прочих компонентов.
    11. Завершение рендеринга с выполнением отложенных частей JS-кода.

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

    Если руководствоваться предложенным списком, то пункты 1-4 относятся к серверной части, а 5-12 – клиентской. Причем время, расходуемое ресурсами на реализацию каждого из этапов, индивидуально. Чтобы понять причину существующей проблемы, придётся детальней изучить параметры ресурса, а затем найти источник задержек. Здесь становится актуальным вопрос о получении сведений с различных метрик и интерпретации этих данных.

    Технология измерения скорости сайта

    Сразу же возникает сложность: что измерять? Всевозможные показатели путают малоопытных администраторов. Ориентироваться стоит на базовые значения:

    • Время до первого байта (TTFB). Срок приёма клиентом первого «куска» данных. Считается ключевым параметром для серверной оптимизации.
    • Начало рендеринга («первая закраска»). В рамках этой метрики подсчитывается время, через которое на «белом экране» страницы появляются первые элементы.
    • Загрузка основных элементов. Полная передача и расшифровка ресурсов, необходимых для последующей работы пользователя. Браузер в этот момент останавливает вращение колёсика загрузки.
    • Полная загрузка веб-страницы. Это период, в течение которого завершается основная активность браузера – полная передача ключевых и отложенных компонентов

    Единицей измерения для всех перечисленных показателей выступает секунда. Пользу также принесут значения трафика двух последних этапов. Он полезен при оценке взаимосвязи между скорость загрузки и тратящимся на передачу/прорисовку временем.

    Сервисы и инструменты для получения данных

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

    Достаточно мощным инструментом является «панель разработчика», реализованная в каждом браузере. Наиболее функциональной она представлена в Google Chrome. Войдя на вкладку «Сеть» можно собрать данные всех метрик, связанных с загрузкой, в том числе, время получения HTML-документа. Достаточно навести курсор на конкретный элемент, чтобы увидеть время его поэтапной загрузки. На вкладке «Производительность» собраны сведения обо всех стадиях вплоть до декодирования графики.

    Проверка скорости веб-сайта без детализации данных может быть выполнена посредством плагина Lighthouse. На интерфейсной вкладке «Аудиты» выводятся результаты исследования ресурса, из которых становится известна скорость для мобильного и десктопного устройств, а также ряд других параметров.

    Оптимизацию клиентской части можно оценивать посредством таких серверов как Google PageSpeed Insights или Sitechecker. Время загрузки для конечного пользователя можно проверять в отчетности аналитических сервисов:

    1. «Яндекс.Метрика» даст соответствующую информацию в следующем разделе: «Отчеты» — «Стандартные» — «Мониторинг».
    2. Для Google Analytics: «Поведение» — «Скорость сайта» — «Рекомендации» (воспользуйтесь предложенными изменениями, чтобы значительно сократить затрачиваемое пользователями время).

    Оптимальные показатели загрузки стандартного интернет-ресурса – 1 секунда для начала рендеринга и 3-5 секунд до полной прорисовки с возможностью использования. Если это соблюдается, то у пользователей не будет повода жаловаться на низкое техническое качество проекта. Также не будет ограничиваться функционал ресурса.

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

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

    Обращение к профессионалам

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

    0
    Комментарии
    Подписаться
    Уведомление о
    Встроенные отзывы
    Просмотр всех комментариев
    Яндекс.Метрика
    Top.Mail.Ru