Измеряем время загрузки страницы с помощью HTML5 Navigation Timing API

Navigation Timing API — средство для выявления источников тормозов на проекте.

Как это работает?

Время загрузки страницы складывается из 3-х составляющих:

1. Время запроса от клиента к серверу (проблемы со связью?)
2. Возврат результатов обработки клиенту (сервак тупит?)
3. Рендеринг страницы (слабый клиент или много плагинов и прочего js?)

Внятного механизма получения значений времени, которое тратится на каждый из шагов раньше не было. Navigation Timing API как раз даёт возможность без труда определить это время на клиенте. В действительности, оно позволяет узнать даже больше (подробные описания таймингов есть у авторитетных парней):




Получить тайминги (timestamps) из браузера можно, используя
interface PerformanceTiming {
 readonly attribute unsigned long longnavigationStart;
 readonly attribute unsigned long longunloadEventStart;
 readonly attribute unsigned long longunloadEventEnd;
 readonly attribute unsigned long longredirectStart;
 readonly attribute unsigned long longredirectEnd;
 readonly attribute unsigned long longfetchStart;
 readonly attribute unsigned long longdomainLookupStart;
 readonly attribute unsigned long longdomainLookupEnd;
 readonly attribute unsigned long longconnectStart;
 readonly attribute unsigned long longconnectEnd;
 readonly attribute unsigned long longsecureConnectionStart;
 readonly attribute unsigned long longrequestStart;
 readonly attribute unsigned long longresponseStart;
 readonly attribute unsigned long longresponseEnd;
 readonly attribute unsigned long longdomLoading;
 readonly attribute unsigned long longdomInteractive;
 readonly attribute unsigned long longdomContentLoadedEventStart;
 readonly attribute unsigned long longdomContentLoadedEventEnd;
 readonly attribute unsigned long longdomComplete;
 readonly attribute unsigned long longloadEventStart;
 readonly attribute unsigned long longloadEventEnd;
};

Зачем это нужно?
Пример: пользователи стали жаловаться, что страницы грузятся долго. Добиться чего-то более внятного, чем просто “долго”, невозможно, поэтому появилось такое решение:

1. Добавляем в шапку код, который сдирает данные из структуры выше + добавляем к ним время, когда страница окончательно собрана.
2. По вкусу добавляем к структуре имя пользователя, браузер, имя проекта.
3. Пакуем всё это дело, шлём на сервер. Примерно так:
   

tempOnLoad = window.onload; //сохраним битриксовые обработчики
window.onload = function(){
   checkTimings();
   if (tempOnLoad){
       tempOnLoad();   //возвращаем битриксовые обработчики
   }
}
function checkTimings(){    
   
   var temp = new Object();
   for (var o in performance.timing){ /*костыль из-за различий между FF,IE и Chrome в понимании того, что же есть performance.timing*/
       if (o == 'msFirstPaint') { //исключим специфику IE
           continue;
       }
       temp[o] = performance.timing[o];
   }
   temp['secureConnectionStart'] = (temp['secureConnectionStart']) ? temp['secureConnectionStart'] : 0; // фикс для FF
   
   temp.currentTime  = Math.round(new Date().getTime());
   temp.currentURL   = window.location.href;
   temp.serverName   = window.location.hostname;
   
   var target        = 'http://targetfile.php?time='+encodeURIComponent(JSON.stringify(temp));
   var request       = createCORSRequest('POST', target);
   request.send();
}

Что делать там с данными — уж кто как хочет. Наш вариант — график зависимости время загрузки от времени, когда данные были сняты с возможностью детального просмотра таймингов по каждому событию.

Где это работает?


Полезные ссылки

1. https://dvcs.w3.org/hg/webperf/raw-fil...-attribute
2. http://msdn.microsoft.com/en-us/libra...y/ff975075
3. http://66.7percentangel.com/2011/12/b...okmarklet/
4. http://www.html5rocks.com/en/tutorial...nce/basics