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

Я хочу отслеживать конечный пользовательский интерфейс нашего сайта и связывать его с информацией о времени, уже зарегистрированной на стороне сервера. Мое предположение заключается в том, что для регистрации временных меток в начале запроса потребуется javascript (window.onbeforeunload) и в конце загрузки (window.onload). В основном это - Измерение времени отклика веб-приложения: Встреча с клиентом"

  • Есть ли лучший подход?
  • Какое снижение производительности я должен ожидать (по порядку величины)?
  • Насколько хороши результаты?

Ответы

Ответ 1

EDIT (2013): попробуйте Boomerang, как это предлагает @yasei-no-umi. Он активно поддерживался.

- старый ответ -

Мы используем Jiffy.

Он очень прост в использовании и модификации - мы написали собственный серверный код (вместо Jiffy Apache + perl) и использовали Jiffy JS.

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

Ответ 2

Существует также Boomerang от Yahoo.

Есть некоторые дополнительные функции, не существующие в Jiffy и Episodes. Также поддерживайте API Navigation Timing в браузерах, которые его поддерживают (Chrome 6, IE 9)

Ответ 3

Для полноты использования теперь вы можете использовать API навигации навигации в некоторых браузерах современных: https://developer.mozilla.org/en-US/docs/Navigation_timing

function onLoad() { 
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  console.log("User-perceived page loading time: " + page_load_time);
}

Редактирование третьей стороны

На основе время навигации по навигации caniuse.com широко поддерживается сегодня (10/2016)

Ответ 4

Как насчет использования чего-то вроде yslow (расширение firefox)?

Ответ 5

Альтернативой Jiffy является Episodes.

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

Ответ 6

У нас есть "обратный вызов" (прозрачное GIF-изображение 1x1 с параметром, представляющим идентификатор для рендеринга страницы) на странице, которая регистрирует "Просмотр страницы" в нашей базе данных. Это записи с тем же идентификатором, что и сама страница, и у нас есть запись в журнале, когда наш рендеринг заканчивается.

Итак, у нас есть время:

  • Начата подготовка страницы.
  • Подготовка страницы/завершение ответа
  • Клиент звонил домой при завершении рендеринга

Помогает с пониманием клиентов, которые являются "медленными" (CPU или ISP/bandwidth)

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

Ответ 7

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

http://getfirebug.com/

За черт его; вот интересная статья, недавно представленная SOSP на инструменте под названием AjaxScope. Интересно, что это научная статья, представленная MS Research, которая показывает, что реализация Firefox Javascript выполняется в несколько раз лучше, чем Internet Explorer, в нескольких случаях.:)

http://research.microsoft.com/en-us/groups/rad/sosp07.pdf

Ответ 8

Мы склонны использовать комбинацию:

Firefox: Панель инструментов веб-разработчиков Firebug YSlow

IE: Fiddler

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