Highload 07/01/2020

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

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

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

Page Timings

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

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

[ad]

User Timing

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

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

Онлайн-курс "Директор з продажу" від Laba.

Як стратегічно впливати на дохід компанії, мотивувати сейлзів перевиконувати KPI та впроваджувати аналітику — навчить комерційний директор Laba з 12-річним досвідом у продажах.

Приєднатись до курсу

Время написания комментария
Время, потраченное на просмотр видеоролика

Для измерения времени какого-то события, необходимо вставить такой вызов функции 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';
                    
                        
                            Онлайн-курс "Створення електронної музики" від Skvot.
                            Практичний курс про те, як знайти власний стиль та написати й зарелізити свій перший трек.
                            Програма курсу і реєстрація
                        
                    
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');
                    
                        
                            Онлайн-курс "Чистий код та патерни проєктування" від robot_dreams.
                            Прискорюйте й спрощуйте процес розробки.Під менторством лектора з 15-річним досвідом ви навчитеся застосовувати 20+ шаблонів, опануєте рефакторинг і принципи чистого коду.
                            Детальніше
                        
                    
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 код поможет удобно отслеживать скорость событий:

Онлайн-курс "Фінансовий аналіз" від Laba.

Навчіться читати фінзвітність так, щоб ухвалювати ефективні бізнес-рішення.Досвідом поділиться експерт, що 20 років займається фінансами і їхньою автоматизацією.

Детальніше про курс

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);
                    
                        
                            Курс-професія "Junior Data Analyst" від robot_dreams.
                            Комплексний курc для всіх, хто хоче опанувати нову професію з нуля.На прикладі реальних датасетів ви розберете кожен етап аналізу даних.
                            Програма курсу і реєстрація
                        
                    
}

}

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


# делаем какие-то действия, длительность которых хотим измерить
ga_time_tracker.end('images', 'load all');

[ad]

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

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

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

Онлайн-курс "Управління ІТ-командами" від Laba.

Прокачайте свої soft- і hard-скіли в управлінні кількома IT-командами, отримайте практичні стратегії та інструменти ефективного team-ліда.

Програма курсу і реєстрація

Время работы методов API.

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

Самое важное

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

Онлайн-курс "Чистий код та патерни проєктування" від robot_dreams.

Прискорюйте й спрощуйте процес розробки.Під менторством лектора з 15-річним досвідом ви навчитеся застосовувати 20+ шаблонів, опануєте рефакторинг і принципи чистого коду.

Детальніше