Измерение первой задержки ввода

Автор оригинала: Todd Gardner.

Первые меры задержки ввода (FID), как долго браузер предпринял реагирование на первое событие пользователя ввода пользователя. Это один из нескольких Веб Vital Метрики, которые измеряют, как реальные пользователи воспринимают производительность современных веб-приложений. Новые измерения, такие как первая задержка ввода, все более важны, так как JavaScript и SPA больше работают на стороне клиента.

Первая задержка ввода

Задержки на первом пользовательском входе вызваны, когда браузер занят загрузкой активов, сценариев для анализа или выполнения операций блокировки. Страница выглядит не отвечает, когда пользователь взаимодействует с занятым браузером, либо нажав, либо набрав. FID измеряет это невосприимчивое время, но не включает в себя время, предпринимаемые в самих обработчиках событий.

Первая задержка ввода не просто важная мера пользовательского опыта. Это и другие веб Vital Metrics влияют на SEO, потому что Google скоро рассмотрит их при рейтинге результатов поиска Отказ

В этом примере FID захвачен и показан в консоли. На странице есть медленный JavaScript, который блокирует основной нить браузера на странице Load:

Первый пример задержки ввода. Медленная оценка JavaScript задерживает первый клик пользователя (желтый).

Первая задержка ввода будет отличаться для каждого приложения, но Google предоставляет базовое руководство по приемлемым точкам кода:

Первые рекомендации порогового задержки ввода от Google.

Что вызывает первую задержку ввода?

Тяжелый JavaScript – главная причина длинных первых входных задержек. Как первоначальная полезная нагрузка, так и продолжающиеся исполнение могут быть виновными.

Heavy Adfront Payloads JavaScript

Большие пакеты JavaScript могут занять много времени для браузера для анализа и оценки. Входы задерживаются, потому что они должны дождаться, пока страница загружается все ссылочные JavaScript. Большие пачки часто вызываются чрезмерными третьей сторонними зависимостями или включением кода, который не требуется текущей страницей.

Долго работает JavaScript

Длинные времена FID происходят даже после того, как вся JavaScript был загружен. Любой Длинная рабочая задача В JavaScript работает на главной ните. Пользовательские входы заблокированы до завершения задачи, а основной нить не может обрабатывать вход. Любой плохо оптимизированный код может привести к этой проблеме. JS Frameworks, такие как реакция и угловые и угловые, часто виновны, когда кодирование ошибок вызывает чрезмерное повторное рендеринг.

Измерение первой задержки ввода с API мероприятия

Время события API Раскрывает первые измерения задержки ввода через JavaScript. В настоящее время он поддерживается в браузерах на основе моргания, такими как Chrome, Edge и Opera. Примечание. Как проект стандарта, иногда есть Изменения на то, как определяется FID Отказ

Мы можем проверить поведение API с небольшим кодом:

new PerformanceObserver(entryList => {
    var fidEntry = entryList.getEntries()[0];
    var fid = fidEntry.processingStart - fidEntry.startTime;
    console.log("First Input Delay: " + fid);
    // Output:
    // First Input Delay: 1241.0949999466538
}).observe({ type: "first-input", buffered: true });

Буферизованный: правда Опция Возвращает запись, даже если она произошла до того, как PerformationOverver был настроен.

Первые входные задержки причудлины и GOTCHAS

Хотя сам измерение просты, измерения FID имеют несколько причудов, которые вы должны знать.

1. Первые измерения задержки ввода не всегда происходят

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

2. Ввод пользователей включает в себя клики на неинтерактивных элементах

Первое измерение задержки ввода срабатывает, даже когда пользователь нажимает не интерактивные элементы, такие как фон страницы. Это вызывает непреднамеренные или расстроенные пользовательские действия, которые будут отражены в измерениях FID:

Бесполезные взаимодействия пользователя по-прежнему приводят к первому измерениям задержки ввода

3. Первые измерения задержки ввода очень переменные

Та же страница может вернуть широкий спектр значений FID между различными нагрузками и пользователями страницы. Взаимодействие пользователей может произойти в любое время. Эта изменчивость пользователей отражена в значениях FID из-за различных состояний готовности страницы:

Время взаимодействия пользователей влияет на первые измерения задержки ввода

4. Не измеряйте страницы, загруженные на заднем плане!

Первая задержка ввода не должна измеряться, когда страница загружена на вкладке «Фон». Измерение имеет сомнительное значение, потому что первое взаимодействие происходит долго после нагрузки вкладки. Дополнительная проверка предотвращает измерение фоновых вкладок:

var hiddenTime = document.visibilityState === 'hidden' ? 0 : Infinity;

document.addEventListener('visibilitychange', (event) => {
    hiddenTime = Math.min(hiddenTime, event.timeStamp);
}, { once: true });

new PerformanceObserver(entryList => {
    var fidEntry = entryList.getEntries()[0];
    if (fidEntry.startTime < hiddenTime) {
        var fid = fidEntry.processingStart - fidEntry.startTime;
        console.log("First Input Delay: " + fid);
    }
}).observe({ type: "first-input", buffered: true });

5. Обнаружение функции API событий

Не все браузеры поддерживают API мероприятия Timing API. Попробуйте/catch – единственный надежный способ обнаружения функции, потому что некоторые браузеры бросают исключение, когда используется API:

try {
    new PerformanceObserver(entryList => {
        var fidEntry = entryList.getEntries()[0];
        var fid = fidEntry.processingStart - fidEntry.startTime;
        console.log("First Input Delay: " + fid);
    })
    // Some browsers throw when 'type' is passed:
    .observe({ type: "first-input", buffered: true });
}
catch (e) {
    // The Event Timing API is not supported by this browser
}

Заключение

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

Мониторинг производительности FID

Давайте обрабатым тяжелые вещи. Следите за веб-ведомами реального пользователя, как первый входной задержка с Запросить метрики Отказ