Со временем скорость загрузки нашей домашней страницы увеличилась. Я не могу сказать наверняка, когда это началось и была ли проблема всегда.
Мы начали замечать, что кнопки на целевых страницах долгое время неактивны.
Затем мы заметили плохой 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 :-)