Его результаты для веб-разработчиков и владельцев сервисов могут стать не слишком утешительными. Так как выяснится, что страница снабжена огромным количеством элементов, которые её тормозят. Но, эти данные крайне познавательны и полезны. Ведь именно они позволяют разработать стратегию, направленную на исправление ошибок.
Что делает наш команда? Полное проведение аудита с применением новейших инструментов определения скорости работы сайтов даёт возможность сопоставить данные, полученные в результате целого ряда проверок. Только после этого можно выстраивать алгоритм работы по устранению ошибок. Определяются критические и второстепенные. Зачастую, критическими ошибками могут оказаться те, которые на первый взгляд выглядят совершенно пустяковыми. Чтобы отделить одно от другого, нужен соответствующий опыт и квалификация. После проведения настроек, аудиты показывают 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()’ результаты будут сохранены вне зависимости от установленных меток, чтобы к ним можно было вернуться. К тому же, есть возможность выгрузить их по завершению работы приложения.
Проведя детальные проверки по меткам и выявив сколько времени требуется на тот или иной процесс, можно смело приступать к оптимизации сайта.
