Блог

Метки и промежутки пользовательского времени

Веб-приложения с высокой производительностью выбираются пользователями и поисковыми системами наиболее активно. Следственно, у таких сайтах растёт конверсия, а их владельцы больше на них зарабатывают. Поскольку веб-приложения становятся все более и более сложными, необходимо точно понимать, что именно влияет на скорость их загрузки и возможности взаимодействия с сайтом. И чтобы в этом разобраться, требуется провести максимальный аудит.

Его результаты для веб-разработчиков и владельцев сервисов могут стать не слишком утешительными. Так как выяснится, что страница снабжена огромным количеством элементов, которые её тормозят. Но, эти данные крайне познавательны и полезны. Ведь именно они позволяют разработать стратегию, направленную на исправление ошибок.

Что делает наш команда? Полное проведение аудита с применением новейших инструментов определения скорости работы сайтов даёт возможность сопоставить данные, полученные в результате целого ряда проверок. Только после этого можно выстраивать алгоритм работы по устранению ошибок. Определяются критические и второстепенные. Зачастую, критическими ошибками могут оказаться те, которые на первый взгляд выглядят совершенно пустяковыми. Чтобы отделить одно от другого, нужен соответствующий опыт и квалификация. После проведения настроек, аудиты показывают 100% значение.

Инспектирование сайта при помощи PageSpeed Insights от Google, выдёт в качестве рекомендации пункт: «Метки и промежутки пользовательского времени». Осуществляются данные замеры с помощью инструмента User Timing API и позволяют измерить реальную производительность страницы.

Что такое User Timing API и зачем его использовать

Рекомендация провести измерение производительности сайта с использованием User Timing API — это не ошибка, а просто рекомендация PageSpeed Insights и его нельзя пройти или провалить. Этот инструмент позволяет «по шагам» измерить скорость производительности страницы и понять, где именно осуществляется потеря. На основании этого, можно принимать решение об оптимизации. Данный веб-инструмент поддерживается всеми браузерами. И если вы хотите просто убрать данный пункт аудита из рекомендаций — достаточно просто один раз его выполнить. Но, User Timing API слишком полезный инструмент, чтобы относиться к нему столь пренебрежительно.

Оптимизировать то, что не измерено попросту невозможно. Поэтому, для того, чтобы медленное веб-приложение получило ускорение, в первую очередь потребуется выяснить на что собственно тратятся драгоценные миллисекунды. User Timing API измеряет временное воздействие различных областей Javascript и определяет проблемные точки. Его просто стоит вставить в некоторые места Javascript и получить подробную информацию о количестве времени, которое потребовалось на получение контента. Именно эти показатели и стоит использовать в процессе оптимизации.

Как использовать User Timing API

User Timing — является API, который создаёт кастомные метрики, отслеживающие производительность приложения. В качестве инструментов, сервис использует две основные опции — performance.mark и performance.measure.

  • performance.mark требуется для фиксации времени в миллисекундах с момента navigationStart
  • performance.measure необходим, чтобы выявить разницу времени, в промежуточных метриках

Данные опции мы рассмотрим детально позже. Пока же, сосредоточимся на возможности User Timing API рассчитывать время не просто в миллисекундах, а в микросекундах. При возникновении ситуации, в которой необходимо провести глубокий анализ большой страницы — это становится чрезвычайно важным. Ведь позволяет определить потери максимально точно.

Как это осуществить. Одним из инструментов является High Resolution Time. Он представляет собой совершенно новый тип синхронизации и встроен во все современные браузеры. Время высокого разрешения дает метки времени с плавающей точкой, и даёт показатели точности до микросекунды. Соответственно, эти значения после запятой в состоят из тысячных миллисекунды. Человеческому глазу это не заметно, но при «тяжёлой» странице данные показатели накапливаются и превращаются во вполне осязаемое время.

Для получения текущего времени на сайте, потребуется применить методологию ‘now()’, которая образует расширение в производительности интерфейса. В командной строке она будет выглядеть так:

var myTime = window.performance.now();

Метки с высоким разрешением времени установлены и именно с этого начинается процесс полной проверки страницы на временные потери.

Функции User Timing API для эффективной работы

После того, как метки времени с высоким разрешением установлены, пора использовать интерфейс User Timing по его прямому назначению. Инструмент позволяет сгенерировать сценарии в разных точках и отследить где именно происходят наибольшие затраты времени.

Как мы выяснили ранее, для этого существуют две основные функции, на которых и стоит сконцентрироваться – performance.mark и performance.measure.

Функция ‘mark()’

Функция ‘mark()’ является основным инструментом в наборе инструментов анализа времени. Она отвечает за временную отсечку. Это значит, что появляется возможность зафиксировать для себя метку времени, при этом API запомнит имя и метку времени как единое целое.

Если осуществить вызов mark()в разных местах приложения, то можно с точностью определить время, которое было затрачено на достижение конкретной цели. Именно она и является той самой меткой.

Спецификация вызывает ряд предложенных имен для меток, которые понятны и значимы для анализа. Например, «mark_fully_loaded», «mark_fully_visible», «mark_above_the_fold» и т.д. Для того, чтобы установить отметку отслеживающую полную загрузку приложения, необходимо использовать подобный код:

window.performance.mark(‘mark_fully_loaded’);

И чем больше подобных меток будет сделано, тем больше информации можно получить. Её останется только структурировать, детально проанализировать и сделать выводы.

Функция ‘measure()’

Установив целый ряд меток и получив скорость загрузки каждой, важно понимать сколько времени тратится на достижение результатов между этими метками. Для этого и используется опция ‘measure()’. Также данная функция может измерять время между отметкой и любым из известных имен событий в интерфейсе PerformanceTiming.

К примеру, вы решили измерить время от завершения DOM, до момента полной загрузки страницы. Для этого будет использоваться код:

window.performance.measure(‘measure_load_from_dom’, ‘domComplete’, ‘mark_fully_loaded’);

При вызове ‘measure()’ результаты будут сохранены вне зависимости от установленных меток, чтобы к ним можно было вернуться. К тому же, есть возможность выгрузить их по завершению работы приложения.

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

Похожие записи