Цель отчета об опыте пользователей Chrome — помочь веб-сообществу понять распределение и эволюцию реальной производительности пользователей. На сегодняшний день наше внимание уделялось показателям отрисовки и загрузки страниц, таким как First Contentful Paint (FCP) и Onload (OL), которые помогли нам понять, как веб-сайты визуально работают для пользователей. Начиная с выпуска за июнь 2018 года, мы экспериментируем с новой ориентированной на пользователя метрикой, которая фокусируется на интерактивности веб-страниц: первая задержка ввода (FID). Этот новый показатель позволит нам лучше понять, насколько веб-сайты реагируют на действия пользователя.
FID недавно стал доступен в Chrome в качестве пробной версии , что означает, что веб-сайты могут экспериментировать с этой новой функцией веб-платформы. Аналогичным образом, FID будет доступен в отчете Chrome UX в качестве экспериментальной метрики, что означает, что он будет доступен на протяжении всего периода первоначальной пробной версии в отдельном «экспериментальном» пространстве имен.
Как измеряется FID
Так что же такое FID? Вот как это определено в сообщении блога с объявлением о первой входной задержке :
Задержка первого ввода (FID) измеряет время с момента, когда пользователь впервые взаимодействует с вашим сайтом (т. е. когда он нажимает ссылку, нажимает кнопку или использует собственный элемент управления на основе JavaScript) до момента, когда браузер фактически может реагировать на это взаимодействие.
Это все равно, что измерить время от звонка в дверь до открытия двери. Если это занимает много времени, причин может быть много. Например, возможно, человек находится далеко от двери или не может двигаться быстро. Аналогично, веб-страницы могут быть заняты другой работой или устройство пользователя может работать медленно.
Исследование FID в отчете Chrome UX
Имея за месяц данные FID из миллионов стран происхождения, уже можно обнаружить множество интересных идей. Давайте рассмотрим несколько запросов, демонстрирующих, как извлечь эту информацию из отчета Chrome UX Report на BigQuery.
Начнем с запроса процента быстрого FID для разработчиков.google.com . Мы можем определить быстрый опыт как тот, в котором FID составляет менее 100 мс. Согласно рекомендациям RAIL , если задержка составляет 100 мс или больше, для пользователя она должна ощущаться мгновенно.
SELECT
ROUND(SUM(IF(fid.start < 100, fid.density, 0)), 4) AS fast_fid
FROM
`chrome-ux-report.all.201806`,
UNNEST(experimental.first_input_delay.histogram.bin) AS fid
WHERE
origin = 'https://developers.google.com'
Результаты показывают, что 95% переживаний FID такого происхождения воспринимаются как мгновенные. Это кажется очень хорошим, но как это соотносится со всеми источниками в наборе данных?
SELECT
ROUND(SUM(IF(fid.start < 100, fid.density, 0)) / SUM(fid.density), 4) AS fast_fid
FROM
`chrome-ux-report.all.201806`,
UNNEST(experimental.first_input_delay.histogram.bin) AS fid
Результаты этого запроса показывают, что 84% событий FID составляют менее 100 мс. Таким образом, сайт development.google.com выше среднего.
Далее давайте попробуем разрезать эти данные и посмотреть, есть ли разница между процентом быстрого FID на настольных компьютерах и мобильных устройствах. Одна из гипотез заключается в том, что мобильные устройства имеют более медленные значения FID, возможно, из-за более медленного оборудования по сравнению с настольными компьютерами. Если процессор менее мощный, он может быть более загружен в течение более длительного времени и привести к замедлению работы FID.
SELECT
form_factor.name AS form_factor,
ROUND(SUM(IF(fid.start < 100, fid.density, 0)) / SUM(fid.density), 4) AS fast_fid
FROM
`chrome-ux-report.all.201806`,
UNNEST(experimental.first_input_delay.histogram.bin) AS fid
GROUP BY
form_factor
| форм-фактор | fast_fid |
|---|---|
| рабочий стол | 96,02% |
| телефон | 79,90% |
| планшет | 76,48% |
Результаты подтверждают нашу гипотезу. Настольные компьютеры имеют более высокую совокупную плотность быстрого FID, чем форм-факторы телефонов и планшетов. Чтобы понять, почему существуют эти различия, например, в производительности процессора, потребуется A/B-тестирование, выходящее за рамки отчета Chrome UX.
Теперь, когда мы узнали, как определить, имеет ли источник быстрый опыт FID, давайте взглянем на пару источников, которые работают очень хорошо.
Пример 1: http://secretlycanadian.com.
Это происхождение имеет 98% событий FID менее 100 мс. Как они это делают? Анализируя, как она построена в WebPageTest , мы видим, что это довольно тяжелая страница WordPress, но она имеет 168 КБ JavaScript, который выполняется примерно за 500 мс на нашей лабораторной машине. По данным HTTP Archive , это не очень-то похоже на JavaScript, который помещает эту страницу в 28-й процентиль.
Розовая полоса, охватывающая 2,7–3,0 секунды, — это этап анализа HTML . В это время страница не является интерактивной и выглядит визуально неполной (см. «3.0s» в диафильме выше). После этого любые длительные задачи, которые необходимо обработать, разбиваются, чтобы основной поток оставался в состоянии покоя. Розовые линии в строке 11 показывают, как работа JavaScript распределяется быстрыми порциями.
Пример 2: https://www.wtfast.com .
Этот источник имеет 96% мгновенных событий FID. Он загружает 267 КБ JavaScript (38-й процентиль в HTTP-архиве) и обрабатывает его в течение 900 мс на лабораторной машине. Диафильм показывает, что на прорисовку фона странице уходит около 5 секунд, а на прорисовку содержимого — еще около 2 секунд.
Что самое интересное в результатах, так это то, что ничего интерактивного даже не видно, пока основной поток занят от 3 до 5 секунд. На самом деле медлительность FCP этой страницы улучшает FID . Это хороший пример важности использования множества показателей для представления пользовательского опыта.
Начать изучение
Вы можете узнать больше о FID в выпуске «Состояние Интернета» на этой неделе:
Наличие FID в отчете Chrome UX позволяет нам установить базовый уровень интерактивности. Используя эту базовую линию, мы можем наблюдать ее изменения в будущих выпусках или сравнивать отдельные источники. Если вы хотите начать сбор FID при полевых измерениях на вашем собственном объекте, зарегистрируйтесь на пробную версию Origin, перейдя на bit.ly/event-timing-ot и выберите функцию «Время событий». И, конечно же, начните изучать набор данных, чтобы получить интересную информацию о состоянии интерактивности в Интернете. Это все еще экспериментальный показатель, поэтому оставьте свой отзыв и поделитесь своим анализом в группе обсуждения Chrome UX Report или @ChromeUXReport в Твиттере.