Long tasks
Long Tasks (длинные задачи) - операции в браузере, которые выполняются на главном потоке дольше 50 миллисекунд и блокируют обработку пользовательских действий, делая интерфейс неотзывчивым.
Коротко: Long Tasks - это участки кода, которые слишком долго выполняются и временно «замораживают» интерфейс. Если сайт тормозит при клике или скролле, скорее всего, проблема в длинных задачах. Они влияют на Core Web Vitals (особенно INP) и могут стоить конверсии.
В интернет-маркетинге длинные задачи влияют на Core Web Vitals (особенно INP), что сказывается на позициях в поисковой выдаче и конверсии. Например, если сторонний скрипт аналитики или чат-виджет выполняется 200 мс, пользователь может заметить задержку при клике на кнопку, что увеличивает INP и ухудшает восприятие сайта.
Порог в 50 миллисекунд выбран на основе исследований восприятия: задержка до 50 мс обычно не ощущается пользователем, от 50 до 100 мс становится заметной, а свыше 100 мс воспринимается как задержка. В 2026 году борьба с длинными задачами остаётся одной из ключевых задач веб-разработки и оптимизации производительности.
Что такое Long Tasks
[править]Любая непрерывная работа на главном (UI) потоке браузера длительностью 50 мс или более считается длинной задачей. Главный поток выполняет все операции последовательно: парсинг HTML и CSS, выполнение JavaScript, обработку событий и рендеринг. Пока он занят, пользовательский интерфейс не может реагировать на действия.
Длинная задача может включать:
- Выполнение JavaScript-кода.
- Перерасчёт стилей и layout (reflow).
- Рендеринг (paint).
- Обработку событий ввода.
- Работу сборщика мусора (GC).
Как Long Tasks влияют на Core Web Vitals
[править]INP (Interaction to Next Paint)
[править]INP измеряет задержку между действием пользователя и визуальным откликом. Если в момент взаимодействия выполняется длинная задача, событие попадает в очередь и обрабатывается позже.
Целевые значения INP:
- Хорошо: ≤ 200 мс.
- Требует улучшения: 200-500 мс.
- Плохо: > 500 мс.
TBT (Total Blocking Time)
[править]TBT - суммарное время блокировки главного потока между First Contentful Paint и Time to Interactive. Он рассчитывается как сумма превышений длительности всех длинных задач над порогом 50 мс.
Хорошее значение TBT - менее 150 мс для большинства сценариев.
Откуда берутся Long Tasks
[править]- Тяжёлые JavaScript-вычисления.
- Сторонние скрипты (аналитика, рекламные пиксели, чат-виджеты).
- Неэффективные фреймворки и компоненты.
- Большие DOM-деревья без оптимизации.
- Синхронные операции, блокирующие поток.
Как обнаружить Long Tasks
[править]- Chrome DevTools (Performance) - красные блоки на таймлайне.
- Lighthouse / PageSpeed Insights - раздел Diagnostics.
- WebPageTest - детальный анализ выполнения JS.
- Long Tasks API.
- RUM-системы (Sentry, Datadog, New Relic).
Long Tasks API
[править]const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log('Long Task:', entry.duration, 'ms');
}
});
observer.observe({ entryTypes: ['longtask'] });
Как бороться с Long Tasks
[править]Разбиение задач
[править]Делить большие операции на части с помощью setTimeout, requestIdleCallback или scheduler.yield().
Web Workers
[править]Вынос тяжёлых вычислений в отдельный поток, не блокирующий UI.
Оптимизация сторонних скриптов
[править]- async / defer.
- Отложенная загрузка некритичных скриптов.
- Удаление лишних интеграций.
requestIdleCallback
[править]Выполнение фоновых задач только в свободное время браузера.
Виртуализация списков
[править]Рендер только видимой области для больших списков.
Оптимизация DOM
[править]- DocumentFragment для пакетных операций.
- Минимизация forced reflow.
- Использование transform/opacity для анимаций.
Влияние на бизнес-метрики
[править]Оценочные диапазоны, зависят от ниши:
| Задержка | Влияние на конверсию |
|---|---|
| ~100 мс | 1-3% |
| ~200 мс | 5-10% |
| ~300 мс | 10-25% |
| 500+ мс | 30% и более |
Значение для маркетинга
[править]Понимание Long Tasks важно для:
- Оценки влияния скорости сайта на конверсию.
- Интерпретации отчётов Lighthouse / PageSpeed Insights.
- Постановки задач разработке.
- Оптимизации рекламных лендингов.
- Повышения эффективности A/B-тестов.
Часто задаваемые вопросы
[править]Что такое Long Tasks простыми словами?
[править]Это участки кода, которые слишком долго выполняются и временно «замораживают» интерфейс.
Почему порог 50 мс?
[править]Это эмпирический порог, при котором задержка начинает становиться заметной для пользователя.
Как Long Tasks влияют на SEO?
[править]Они ухудшают INP - одну из метрик Core Web Vitals, влияющих на ранжирование.
Как их найти?
[править]Chrome DevTools, Lighthouse, PageSpeed Insights или Long Tasks API.
Как исправить?
[править]Разбивать задачи, использовать Web Workers и оптимизировать сторонние скрипты.
