Скорость сайта в Google analytics

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

Информация доступна в разделе “Site Speed”:

Page Timings

Раздел Page Timings покажет наиболее медленные страницы сайта:

Speed Suggestions покажет рекомендации [p57 Pagespeed] для Вашего сайта.

[ad]

User Timing

Наиболее мощным инструментом для анализа скорости является User Timing. Этот раздел позволяет определить длительность любых событий, например:

• Время до нажатия на баннер
• Время до фокусировки на поле формы
• Время загрузки внешних библиотек
• Время написания комментария
• Время, потраченное на просмотр видеоролика

Для измерения времени какого-то события, необходимо вставить такой вызов функции ga (предполагается, что код Google Analytics стоит на сайте):
ga('send', 'timing', 'Категория', 'Название события', 20, 'Дополнительная метка');

Например:
ga('send', 'timing', 'Images', 'Load all images', 1470, 'Media content');
## Подразумевается, что мы отправляем общее время, которое понадобилось для загрузки всех картинок

ga('send', 'timing', 'Comment', 'Send comment', 5250, 'User content');
## Подразумевается, что мы отправляем общее время, которое понадобилось для написания комментария

Время загрузки внешних ресурсов

Пример того, как можно измерить время загрузки JS библиотеки или любого другого внешнего ресурса:
var start = new Date().getTime();

var js = document.createElement('script');

js.src = '/jquery.js';

var s = document.getElementsByTagName('script')[0];

js.onload = function() {

var delta = (new Date().getTime()) - startTime;

ga('send', 'timing', 'jQuery', 'Load', delta, 'Resources');

}

s.parentNode.insertBefore(js, s);

Время загрузки картинок

Меряем и отправляем время загрузки всех картинок на сайте:
var start = new Date().getTime();

var js = document.createElement('script');

js.src = '/jquery.js';

var s = document.getElementsByTagName('script')[0];

js.onload = function() {

var delta = (new Date().getTime()) - startTime;

ga('send', 'timing', 'jQuery', 'Load', delta, 'Resources');

}

s.parentNode.insertBefore(js, s);

## Измеряем время с момента вставки “script” до события “load”

Утилита для отслеживания длительности событий

Этот JS код поможет удобно отслеживать скорость событий:

var ga_time_tracker = {

times: {},

start: function(category, variable, label)

{

ga_time_tracker.times[category + ':' + variable + ':' + label] = new Date().getTime();

},

end: function(category, variable, label)

{

ga('send', 'timing', category, variable, (new Date().getTime()) - ga_time_tracker.times[category + ':' + variable + ':' + label], label);

}

}

Использовать очень просто (параметр label можно не использовать):
ga_time_tracker.start('images', 'load all');

# делаем какие-то действия, длительность которых хотим измерить

ga_time_tracker.end('images', 'load all');

[ad]

Использование User Timing в PHP

Можно также мерить события в PHP. Например:

• Суммарное время, потраченное на все Mysql запросы.
• Время обработки картинки, после ее загрузки.
• Время работы методов API.

В PHP достаточно определить длительность события и после этого сделать JS-вызов с этим значением:

Самое важное

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