Со временем скорость загрузки нашей домашней страницы увеличилась. Я не могу сказать наверняка, когда это началось и была ли проблема всегда.

Мы начали замечать, что кнопки на целевых страницах долгое время неактивны.

Затем мы заметили плохой FOOC (Flash Of Original Content, например, когда страница изменяется после рендеринга) в наших тестах AB. Для нашего теста AB мы используем VWO, и выбор варианта занимал несколько секунд.

Эти проблемы связаны не с медленной реакцией сервера, а с тем, как браузер загружает и анализирует внешние ресурсы.

Лучший подход к настройке производительности - измерить производительность, найти текущее узкое место и исправить его. Здесь я сосредоточусь на инструментах для измерения производительности.

Вкладка сети Chrome

Мы хотим ответить на вопрос «Когда загружается наш ресурс?». Для этого мы можем использовать вкладку сети в инструментах разработчика:

В этом случае javascript загружается после того, как изображения появляются на странице. В медленных сетях это может привести к серьезным задержкам.

Справа вы можете увидеть временную шкалу для каждого ресурса. Белый прямоугольник показывает нам, когда ресурс был поставлен в очередь, а зеленая / синяя полоса показывает нам, когда ресурс был загружен.
Скрипт был поставлен в очередь почти одновременно с изображениями, но запрос был запущен после других ресурсов.

Windows.performance.timing

Если мы хотим знать, сколько времени потребовалось для выполнения определенного фрагмента кода javascript с момента запуска запроса или загрузки DOM, мы можем использовать

windows.performance.timing

он возвращает объект PerformanceTiming с информацией об исходном запросе из браузера:

connectEnd: 1466496097504
connectStart: 1466496093419
domComplete: 1466496163233
domContentLoadedEventEnd: 1466496150725
domContentLoadedEventStart: 1466496150636
domInteractive: 1466496150636
domLoading: 1466496099490
domainLookupEnd: 1466496093419
domainLookupStart: 1466496088575
fetchStart: 1466496088508
loadEventEnd: 1466496163268
loadEventStart: 1466496163237
navigationStart: 1466496088508
redirectEnd: 0
redirectStart: 0
requestStart: 1466496097504
responseEnd: 1466496099836
responseStart: 1466496099443
secureConnectionStart: 1466496093562
unloadEventEnd: 0
unloadEventStart: 0

Если вы хотите узнать, сколько времени прошло с момента запуска запроса для вашего document.ready, вы можете использовать:

$(document).ready(function() {
   console.log(‘Time since request start’, (Date.now() — window.performance.timing.requestStart) / 1000.0)
})

Хронология Chrome

Вкладка «Временная шкала» в инструментах разработчика визуализирует временную шкалу событий, происходящих во время загрузки страницы. После открытия обновите страницу, и она автоматически начнет записывать события.

На нашем сайте показано:

Мне лично сложно ориентироваться в нем, особенно чтобы найти, какая часть временной шкалы соответствует коду, который я хочу оптимизировать.

В Chrome есть две дополнительные консольные команды, которые помогут вам перемещаться по временной шкале. С использованием

console.timestamp('myTimestamp')

и нажав «Обновить», вы сможете увидеть, когда вызывается команда timestamp на временной шкале:

Это поможет вам увидеть, где выполняется ваш код на временной шкале. Вы можете вызвать его, например, в качестве первого оператора в вашем $ (document) .ready, чтобы увидеть, сколько кода было выполнено до этого.

Если вместо этого вы хотите увидеть, сколько времени требуется для выполнения части кода на временной шкале, вы можете использовать:

console.time('beforeDocumentReady');
// some code...
console.timeEnd('beforeDocumentReady');

и он будет показан в «разделе консоли» временной шкалы:

Вкладка профиля Chrome

Если вы хотите профилировать определенные части кода, вы также можете использовать:

console.profile('profileMe');
// some code
console.profileEnd();

когда вы обновляете страницу с открытыми инструментами разработчика, вкладка профиля будет включать профилирующую информацию о коде, выполняемом между двумя вызовами:

Это очень полезно для поиска точек в вашем js-коде для оптимизации

Вывод

Мы познакомились с различными инструментами, которые можно использовать для измерения узких мест в производительности js на своем веб-сайте. В следующих статьях мы увидим, какую оптимизацию вы можете использовать для более быстрой загрузки javascript и css.

Заинтересованы в оказании влияния? Присоединяйтесь к carwow-team!
Чувствуете себя социальным? Присоединяйтесь к нам в Twitter и LinkedIn :-)