CDN

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

Точное измерение характеристик производительности веб-приложений — важный аспект ускорения веб-приложений. Под производительностью веб-приложений я подразумеваю работу комплекса служб и сервисов, которые отвечают за промежуток времени между «начала загрузки» и «завершение загрузки» веб-страницы, а именно: DNS, качество подключения на последней миле (как со стороны клиента, так и со стороны сервера), производительность серверов.

Визуально просмотреть процесс загрузки можно в браузере в панели разработчика:

Часто для оценки скорости загрузки страниц выбирают один из двух вариантов:

  • Скорость загрузки всего контента на клиенте
  • Скорость генерации страницы на сервере, если есть возможность настройки веб-сервера

Суть проблемы

На момент запуска веб-приложения у разработчика весьма ограничены возможности в тестировании скорости загрузки страницы на сайте. И тут могут возникнуть вопросы: например:

  • Как быстро загружается страницы в метро?
  • Почему низкая посещаемость аудитории из Красноярска, ведь мы заказали супермощный сервер в AWS в Калифорнии?

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

И всё это желательно наблюдать в реальном времени.

Способы узнать скорость загрузки страницы

https://en.wikipedia.org/wiki/Browser_engine

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

Navigation Timing API предоставляет данные, которые можно использовать для измерения производительности веб-сайта. В отличие от библиотек на основе JavaScript, которые исторически использовались для сбора аналогичной информации, Navigation Timing API может быть гораздо более точным и надежным.

Navigation Timing API

При помощи Navigation Timing API есть возможность узнать двумя вызовами:

Способ первый

performance.timing.loadEventEnd - performance.timing.navigationStart

Способ второй

performance.getEntriesByType("navigation")[0]['duration']
Оба варианта отдают одинаковое целое значение

JavaScript

Данный способ не является точным способом измерения скорости загрузки страницы

Алгоритм измерения скорости загрузки

  • На клиенте фиксируем точное время начала загрузки документа
  • На клиенте фиксируем точное время завершения загрузки всей страницы

Пример реализации

// Сохраняем текущее время в sessionStorage
// Как только любая ссылка будет нажата, выполнение остановится
function check_speed() {
    sessionStorage.now = Date.now();
    setTimeout(check_speed, 25);
}

// Вешаем обработчик на полную загрузку страницы
window.onload = function() {
    var now = Date.now();
    if ( sessionStorage.now ) {
        var loaded_in = now - parseInt(sessionStorage.now);
        // отправляем значение loaded_in на сервер
        // значение в миллисекундах
    }

    check_speed();
};

Отправка сообщения

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

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

Ссылки по теме

Поделиться ссылкой: