[Хд] logo

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

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

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

Page Timings

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

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

User Timing

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

  • Время до нажатия на баннер
  • Время до фокусировки на поле формы
  • Время загрузки внешних библиотек
  • Время написания комментария
  • Время, потраченное на просмотр видеоролика
Google analytics 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');

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

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

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

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

<?
$t = round(microtime(true)*1000);

# какой-то код, например работа с mysql
$delta = round(microtime(true)*1000) - $t;
?>
<script>ga('send', 'timing', 'mysql', 'queries duration', <?=$delta?>, 'server');</script>

Самое важное

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

  read in english
[Хд]

Подписывайтесь на отборные материалы по продвинутой разработке

Google Email

Esc, чтобы подписаться позже