Страница видна, текст прочитан, палец жмёт кнопку — и ничего. Через секунду меню наконец открывается. Это и есть длинная задача: главный поток браузера занят, и обработать нажатие ему нечем.
Определение и почему именно 50 мс
Длинной (long task) считается любая работа, которая держит главный поток дольше 50 миллисекунд. Порог взят не с потолка: примерно столько человек не замечает. Всё, что дольше, ощущается как «подвисло».
Пока задача идёт, браузер не может ни обработать нажатие, ни отрисовать кадр. Отсюда две метрики рядом: TBT — суммарное время блокировки, сумма «хвостов» сверх 50 мс у всех задач, и INP — фактическая задержка ответа на действие. Первую меряют в лаборатории, вторую — на живых людях.
Как найти в DevTools за минуту
- Откройте DevTools, вкладку Performance.
- Включите замедление процессора: шестерёнка → CPU 4× slowdown. Без этого на рабочем ноутбуке вы ничего не увидите — и это главная причина, почему разработчику «всё быстро».
- Нажмите Record и перезагрузите страницу.
- На дорожке Main ищите блоки с красным уголком — браузер помечает им всё длиннее 50 мс. Ширина блока и есть длительность.
- Кликните по блоку: внизу будет стек — какой файл и какая функция заняли поток.
Тот же список без интерфейса собирается прямо в консоли:
new PerformanceObserver(l => l.getEntries().forEach(e => console.log(Math.round(e.duration))))
.observe({type: 'longtask', buffered: true});
Замер по выборке из 74 сайтов
Мы прогнали малый бизнес одного города: мобильный экран 390 px, процессор замедлен вчетверо, отсчёт пять секунд после загрузки.
| Показатель | Медиана | Худший |
|---|---|---|
| Длинных задач на страницу | 19 | 68 |
| Суммарная блокировка (TBT) | 2106 мс | 9688 мс |
| Самая длинная одна задача | 589 мс | 2881 мс |
Ни одного чистого результата. Страниц без единой длинной задачи в выборке нет вообще; минимум — три задачи. В рекомендованные Lighthouse 200 мс блокировки не уложился никто, ниже 600 мс оказались шесть.
Виновата не одна задача, а их количество. Самая длинная из них даёт в среднем лишь 26% всей блокировки, и только у семи страниц из 74 на неё приходится больше половины. Связь между их числом и суммарной блокировкой — 0,86: это не «один тяжёлый скрипт», это два десятка обычных.
У 45 страниц хотя бы одна задача перевалила за полсекунды, у 16 — за секунду. Секунда на замедленном вчетверо процессоре — это примерно то, что чувствует человек с недорогим телефоном.
Что вышло у нас
| Страница | Задач | Самая длинная | Блокировка |
|---|---|---|---|
| Главная | 4 | 343 мс | 350 мс |
| Блог | 5 | 408 мс | 717 мс |
| Проверка скорости | 5 | 159 мс | 203 мс |
Порог Lighthouse взяла только третья страница, и разрыв с выборкой держится на одном: сторонних скриптов почти нет. Оставшиеся задачи — счётчик и разбор собственного JavaScript.
Что обычно занимает поток
- Счётчики и чаты. Один виджет онлайн-консультанта легко занимает поток на 300–500 мс.
- Разбор большого JavaScript. Браузер сначала читает файл целиком, и только потом выполняет.
- Слайдеры и анимации на старте. Особенно те, что считают размеры всех элементов сразу после загрузки.
- Шрифтовые библиотеки иконок, когда вместо нужных двадцати значков грузится тысяча.
Границы замера
Это лабораторный прогон с одной машины, а не данные живых пользователей: реального INP он не показывает. Замедление процессора вчетверо — условность, принятая в Lighthouse; на быстром телефоне числа будут меньше, на дешёвом — больше. Отсчёт мы вели пять секунд после события load, поэтому задачи, которые случаются позже (при прокрутке, при открытии меню), в замер не попали. Один сайт не ответил за 30 секунд и в подсчёт не вошёл.
Коротко
Длинная задача — больше 50 мс работы главного потока, и пока она идёт, страница глухая. Ищется за минуту во вкладке Performance с замедлением процессора вчетверо. По нашей выборке длинные задачи есть у всех, медиана суммарной блокировки — 2,1 секунды при ориентире 200 мс, и набирается она двумя десятками мелких задач, а не одной большой.