Цель отчета Chrome User Experience Report — помочь веб-сообществу понять распределение и эволюцию реальной производительности пользователей. На сегодняшний день мы сосредоточились на метриках отрисовки и загрузки страниц, таких как First Contentful Paint (FCP) и Onload (OL), которые помогли нам понять, как веб-сайты визуально работают для пользователей. Начиная с выпуска за июнь 2018 года, мы экспериментируем с новой метрикой, ориентированной на пользователя, которая фокусируется на интерактивности веб-страниц: First Input Delay (FID). Эта новая метрика позволит нам лучше понять, насколько веб-сайты реагируют на пользовательский ввод.
FID недавно был доступен в Chrome в качестве пробной версии origin , что означает, что веб-сайты могут выбрать эксперимент с этой новой функцией веб-платформы. Аналогично, FID будет доступен в отчете Chrome UX в качестве экспериментальной метрики, что означает, что он будет доступен в течение всего пробного периода origin в отдельном «экспериментальном» пространстве имен.
Как измеряется FID
Так что же такое FID? Вот как это определяется в сообщении блога First Input Delay :
Задержка первого ввода (FID) измеряет время с момента первого взаимодействия пользователя с вашим сайтом (т. е. когда он нажимает ссылку, кнопку или использует пользовательский элемент управления на основе JavaScript) до момента, когда браузер фактически способен отреагировать на это взаимодействие.
Это как измерять время от звонка в дверь до того, как кто-то откроет дверь. Если это занимает много времени, причин может быть много. Например, человек может находиться далеко от двери или не может быстро двигаться. Аналогично веб-страницы могут быть заняты другой работой или устройство пользователя может работать медленно.
Исследование FID в отчете Chrome UX
С данными FID за месяц из миллионов источников уже есть множество интересных идей, которые можно обнаружить. Давайте рассмотрим несколько запросов, которые демонстрируют, как извлечь эти идеи из отчета Chrome UX на BigQuery.
Давайте начнем с запроса процента быстрых FID-опытов для developers.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 мс. Таким образом, developers.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 мс на нашей лабораторной машине. Это не очень много JavaScript по данным HTTP Archive , который помещает эту страницу в 28-й процентиль.
Розовая полоса, охватывающая 2,7–3,0 секунды, — это фаза анализа HTML . В это время страница не интерактивна и выглядит визуально незавершенной (см. «3,0 с» в диафильме выше). После этого любые длительные задачи, которые необходимо обработать, разбиваются, чтобы гарантировать, что основной поток останется неподвижным. Розовые линии в строке 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 в полевых измерениях вашего собственного сайта, зарегистрируйтесь для участия в пробной версии источника, перейдя по ссылке bit.ly/event-timing-ot и выбрав функцию Event Timing. И, конечно же, начните изучать набор данных для получения интересных сведений о состоянии интерактивности в Интернете. Это все еще экспериментальная метрика, поэтому, пожалуйста, дайте нам свой отзыв и поделитесь своим анализом в группе обсуждения Chrome UX Report или @ChromeUXReport в Twitter.