Long tasks

Long Tasks (длинные задачи) - это JavaScript-операции, которые выполняются в главном потоке браузера дольше 50 миллисекунд. Согласно спецификации Web Vitals и рекомендациям Google, любая задача, превышающая этот порог, считается «длинной» и способна негативно влиять на отзывчивость интерфейса, создавая у пользователя ощущение «зависания» или «подтормаживания» сайта.

В контексте интернет-маркетинга и SEO Long Tasks имеют критическое значение, поскольку они напрямую влияют на INP (Interaction to Next Paint) - один из 3 Core Web Vitals, который с 2024 года стал фактором ранжирования Google наравне с LCP и CLS. Для пользователя длинные задачи означают, что сайт «тупит»: медленно реагирует на клики, прокрутку, ввод текста в формы. Для бизнеса это означает падение конверсии, рост отказов и ухудшение позиций в поисковой выдаче.

Коротко: Long Tasks - это куски кода, которые работают слишком долго и заставляют сайт «замирать». Чем их больше, тем хуже для SEO, конверсии и удержания пользователей. В эпоху Core Web Vitals это не просто техническая деталь, а критический бизнес-показатель.

Что такое главный поток браузера

Чтобы понять природу Long Tasks, нужно разобраться в устройстве браузера.

Один поток - всё решает

Современные браузеры (Google Chrome, Safari, Firefox) используют однопоточную модель для обработки JavaScript и рендеринга страницы. Это означает, что главный поток (main thread) выполняет все задачи последовательно:

• Парсинг HTML и CSS.
• Выполнение JavaScript-кода.
• Обработка событий (клики, ввод текста, скролл).
• Рендеринг и отрисовка страницы.
• Вычисления стилей и компоновка (layout).

Пока главный поток занят одной задачей, всё остальное стоит в очереди. Если задача выполняется 100 миллисекунд, браузер не может реагировать на действия пользователя всё это время. Для пользователя это выглядит как «зависание».

Почему 50 миллисекунд - это порог

Порог в 50 миллисекунд выбран не случайно. Исследования в области человеко-машинного взаимодействия показывают, что:

• 0-50 мс - реакция воспринимается как мгновенная.
• 50-100 мс - задержка заметна, но не раздражает.
• 100-300 мс - задержка ощутима, пользователь начинает замечать «подтормаживание».
• 300+ мс - задержка критична, пользователь воспринимает сайт как «тормозной».

Google установил порог в 50 миллисекунд, чтобы гарантировать, что сайт успевает реагировать на действия пользователя в рамках естественного физиологического восприятия.

Как Long Tasks влияют на Core Web Vitals

Long Tasks - это прямая причина плохих показателей INP и, косвенно, других метрик.

INP (Interaction to Next Paint)

INP измеряет задержку между действием пользователя (клик, тап, нажатие клавиши) и визуальным откликом страницы. INP - это 98-й перцентиль всех взаимодействий на странице.

Long Tasks увеличивают INP, потому что: 1. Пользователь совершает действие (кликает на кнопку). 2. Обработчик события попадает в очередь главного потока. 3. Но главный поток занят выполнением длинной задачи. 4. Обработчик ждёт окончания задачи. 5. Задача завершается, обработчик выполняется. 6. Браузер обновляет экран.

Чем больше Long Tasks на странице и чем они длиннее, тем дольше ожидание.

Целевые значения INP:

• Хорошо: ≤ 200 мс
• Требует улучшения: 200-500 мс
• Плохо: > 500 мс

FID (First Input Delay)

Хотя FID был заменён на INP в качестве основной метрики отзывчивости, понимание FID всё ещё важно. FID измеряет задержку первого взаимодействия пользователя со страницей. Long Tasks, возникающие во время загрузки страницы, напрямую увеличивают FID.

LCP (Largest Contentful Paint)

Косвенное влияние: если главный поток перегружен Long Tasks, браузер может не успевать вовремя отрисовать крупные элементы, что увеличивает LCP.

CLS (Cumulative Layout Shift)

Косвенное влияние: если Long Tasks задерживают выполнение JavaScript, который отвечает за стабилизацию макета (например, вставка изображений, виджетов), это может вызывать смещения элементов.

Откуда берутся Long Tasks

Long Tasks могут возникать из разных источников. Понимание причин - первый шаг к их устранению.

1. Тяжёлые JavaScript-операции

• Обработка больших массивов данных (циклы, фильтрация, сортировка).
• Сложные вычисления (графики, аналитика, криптография).
• Парсинг больших JSON-ответов от API.

2. Медленные сторонние скрипты

Сторонние скрипты - одна из самых частых причин Long Tasks. Это могут быть:

• Скрипты аналитики (Яндекс.Метрика, Google Analytics 4, Roistat).
• Пиксели рекламных систем (VK Реклама, MyTarget).
• Виджеты (чат Jivo, форма обратной связи).
• Код социальных сетей (кнопки «Поделиться»).
• Системы A/B-тестирования.

Проблема сторонних скриптов в том, что разработчик сайта не контролирует их качество и производительность.

3. Неоптимизированные фреймворки и библиотеки

• Устаревшие версии React, Vue.js, Angular с неоптимальным рендерингом.
• Тяжёлые библиотеки, загружаемые целиком, хотя используется только малая часть.
• Неправильное использование хуков и эффектов в React.

4. Большое количество DOM-элементов

• Рендеринг огромных таблиц, списков, галерей.
• Отсутствие виртуальной прокрутки (virtual scrolling) для длинных списков.
• Частые манипуляции с DOM (добавление/удаление тысяч элементов).

5. Работа с localStorage и IndexedDB

Синхронные операции с localStorage блокируют главный поток. IndexedDB, хотя и асинхронна, может создавать длинные задачи при больших объёмах данных.

6. Регулярные операции (setInterval, requestAnimationFrame)

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

Как обнаружить Long Tasks

Для выявления Long Tasks существует несколько инструментов и подходов.

Лабораторные инструменты (Lab Data)

Эти инструменты анализируют сайт в контролируемой среде и помогают выявить проблемы до публикации.

• Chrome DevTools - Performance Tab:

 1. Открыть DevTools (F12).
 2. Перейти на вкладку Performance.
 3. Нажать кнопку записи (●).
 4. Выполнить действия на сайте.
 5. Остановить запись.
 6. В таймлайне найти красные прямоугольники - это Long Tasks. При клике показывается длительность и стек вызовов.

• Lighthouse и PageSpeed Insights:

 Lighthouse автоматически обнаруживает Long Tasks и включает их в отчёт. Раздел «Diagnostics» содержит информацию о длинных задачах и рекомендации по их устранению.

• WebPageTest:

 Позволяет детально анализировать выполнение JavaScript на странице, включая все задачи и их длительность.

Полевые инструменты (Field Data)

Эти инструменты собирают данные от реальных пользователей (RUM - Real User Monitoring).

• Chrome User Experience Report (CrUX): CrUX собирает данные о Core Web Vitals от реальных пользователей Chrome. Хотя CrUX не показывает отдельные Long Tasks, ухудшение INP - надёжный индикатор их наличия.
• Google Search Console: В отчёте «Core Web Vitals» можно увидеть, какие страницы имеют проблемы с INP (и, следовательно, вероятно, с Long Tasks).
• RUM-платформы:

  Sentry - показывает медленные транзакции и долгие задачи.
  New Relic - детальная информация о производительности JavaScript.
  Datadog RUM - мониторинг реальных пользователей.
  Yandex.Metrica - через вебвизор и карту кликов можно косвенно оценить проблемы с отзывчивостью.

Web Vitals API

Для сбора данных о Long Tasks можно использовать JavaScript API:

// Регистрация Observer для Long Tasks
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(`Long Task detected: ${entry.duration}ms`);
    // Отправка данных в аналитику
  }
});

observer.observe({ entryTypes: ['longtask'] });

Как бороться с Long Tasks

Существует несколько стратегий уменьшения или устранения Long Tasks.

1. Разбивка на мелкие задачи

Вместо выполнения одной большой задачи, которая блокирует поток на 200 мс, можно разбить её на несколько маленьких задач по 20-30 мс.

Использование setTimeout:

function processLargeArray(items, callback) {
  let index = 0;

  function processBatch() {
    const batchSize = 50; // обрабатываем по 50 элементов за раз
    const end = Math.min(index + batchSize, items.length);

    for (let i = index; i < end; i++) {
      // обработка элемента
      processItem(items[i]);
    }

    index = end;

    if (index < items.length) {
      // следующая порция через setTimeout, давая браузеру отдохнуть
      setTimeout(processBatch, 0);
    } else {
      callback();
    }
  }

  processBatch();
}

Использование scheduler.yield() (современный подход): Современные браузеры поддерживают scheduler.yield(), который позволяет добровольно передать управление главным потоком.

async function processWithYield(items) {
  for (let i = 0; i < items.length; i++) {
    processItem(items[i]);
    // каждые 10 элементов - пауза
    if (i % 10 === 0) {
      await scheduler.yield();
    }
  }
}

2. Web Workers

Web Workers позволяют выполнять JavaScript в отдельном потоке, не блокируя главный поток. Это идеальное решение для тяжёлых вычислений.

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ data: largeArray });

worker.onmessage = (event) => {
  console.log('Результат:', event.data);
};

// worker.js
self.onmessage = (event) => {
  const result = heavyComputation(event.data.data);
  self.postMessage(result);
};

Когда использовать Web Workers:

• Обработка больших массивов данных.
• Сложные математические вычисления.
• Криптография.
• Парсинг и обработка данных.
• Генерация отчётов.

Ограничения:

• Нет доступа к DOM (нельзя манипулировать элементами страницы).
• Нет доступа к localStorage, IndexedDB (требуются специальные API).
• Коммуникация через postMessage (асинхронная).

3. requestIdleCallback

requestIdleCallback позволяет выполнять некритичные задачи в моменты, когда главный поток простаивает.

function scheduleNonCriticalTask(task) {
  if ('requestIdleCallback' in window) {
    requestIdleCallback((deadline) => {
      // Выполняем задачу, пока есть свободное время
      while (deadline.timeRemaining() > 0 && task.hasMore()) {
        task.processNext();
      }
      // Если не закончили - планируем снова
      if (task.hasMore()) {
        scheduleNonCriticalTask(task);
      }
    });
  } else {
    // fallback для старых браузеров
    setTimeout(() => task.runAll(), 0);
  }
}

Подходит для:

• Предварительная загрузка контента.
• Предварительный расчёт данных.
• Сбор аналитики.
• Отложенная инициализация виджетов.

4. Оптимизация сторонних скриптов

Сторонние скрипты - частая проблема. Стратегии работы с ними:

• Асинхронная загрузка: Используйте атрибуты async или defer.
• Отложенная загрузка: Загружайте некритичные скрипты после загрузки страницы.
• Удаление неиспользуемых скриптов: Регулярно аудируйте, какие скрипты действительно нужны.
• Замена тяжёлых скриптов: Ищите лёгкие альтернативы.
• Самовыполняющиеся скрипты: Проверяйте, не запускаются ли скрипты, которые можно запускать вручную после взаимодействия пользователя.

Пример отложенной загрузки:

// Загрузка чата только после того, как пользователь прокрутил страницу
window.addEventListener('scroll', () => {
  const script = document.createElement('script');
  script.src = 'https://example.com/chat-widget.js';
  document.head.appendChild(script);
}, { once: true });

5. Оптимизация фреймворков

Для React, Vue.js, Angular существуют специфические оптимизации.

React:

• Использовать React.memo для предотвращения лишних перерендеров.
• Применять useMemo и useCallback для мемоизации.
• Использовать lazy и Suspense для разделения кода.
• Рассмотреть переход на React Server Components для уменьшения клиентского JavaScript.

Vue.js:

• Использовать v-once для статического контента.
• Применять computed вместо methods для часто используемых вычислений.
• Использовать keep-alive для кэширования компонентов.

6. Виртуальная прокрутка

Для длинных списков (сотни и тысячи элементов) вместо рендеринга всех элементов одновременно используйте виртуальную прокрутку - рендеринг только видимой области.

Библиотеки:

• react-window для React.
• vue-virtual-scroller для Vue.
• ngx-virtual-scroller для Angular.

7. Оптимизация загрузки скриптов

• Разделение кода (code splitting): Загружать только то, что нужно для текущей страницы.
• Prefetching: Предварительная загрузка скриптов для следующих страниц.
• Preloading: Критически важные скрипты загружать с высоким приоритетом.

<!-- Загрузка критического скрипта с высоким приоритетом -->
<link rel="preload" href="critical.js" as="script">
<script src="critical.js"></script>

<!-- Асинхронная загрузка некритичного скрипта -->
<script src="non-critical.js" async></script>

<!-- Предварительная загрузка скрипта для следующей страницы -->
<link rel="prefetch" href="next-page.js" as="script">

8. Оптимизация работы с DOM

• Использовать documentFragment для пакетного добавления элементов.
• Избегать принудительной синхронной компоновки (forced synchronous layout).
• Использовать transform и opacity для анимаций (не вызывают перекомпоновку).

// Плохо: многократное обращение к DOM
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = i;
  document.body.appendChild(div);
}

// Хорошо: batch update через DocumentFragment
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = i;
  fragment.appendChild(div);
}
document.body.appendChild(fragment);

Влияние Long Tasks на бизнес-метрики

Связь между техническими показателями и бизнес-результатами прямая и измеримая.

Влияние на SEO

С 2024 года Core Web Vitals (включая INP) являются фактором ранжирования Google. Сайты с плохим INP теряют позиции в выдаче. По данным Google, страницы, проходящие порог Core Web Vitals, имеют на 20-30% больше шансов оказаться в топ-10.

Влияние на конверсию

Исследования показывают прямую корреляцию между отзывчивостью интерфейса и конверсией:

Влияние задержки на конверсию

Задержка	Снижение конверсии
100 мс	1-3%
200 мс	5-10%
300 мс	15-25%
500+ мс	30-50%

Для E-commerce это означает прямые потери выручки. Сайт с INP 500 мс может терять до трети потенциальных продаж по сравнению с сайтом, где INP составляет 200 мс.

Влияние на удержание

Пользователи, столкнувшиеся с «подвисаниями» сайта, с меньшей вероятностью возвращаются. Плохой пользовательский опыт снижает удержание и увеличивает отток.

Влияние на мобильный трафик

Проблемы Long Tasks особенно остро проявляются на мобильных устройствах, где процессоры слабее, а сеть может быть медленнее. Учитывая, что мобильный трафик составляет 60-80% от общего, игнорирование Long Tasks означает потерю основной аудитории.

Метрики для отслеживания

Для контроля ситуации с Long Tasks рекомендуется отслеживать следующие показатели.

Метрики для отслеживания Long Tasks

Метрика	Описание	Целевое значение
Total Blocking Time (TBT)	Суммарное время блокировки главного потока во время загрузки	< 200 мс
INP (Interaction to Next Paint)	Задержка реакции на взаимодействие	< 200 мс
Количество Long Tasks	Число задач >50 мс на страницу	< 10
Максимальная длительность Long Task	Самая долгая задача	< 100 мс
Процент времени загрузки CPU	Доля времени, когда CPU занят	< 50%

Типичные ошибки при работе с Long Tasks

Типичные ошибки и их решения

Ошибка	Последствие	Правильное решение
Игнорирование сторонних скриптов	Непонятно, откуда берутся Long Tasks	Аудировать все сторонние скрипты, удалять лишние
Попытка оптимизировать всё сразу	Распыление усилий, нет результата	Измерять, выявлять самые длинные задачи, оптимизировать их
Использование синхронных операций	Блокировка главного потока	Переходить на асинхронные аналоги
Отсутствие мониторинга	Проблемы возвращаются после оптимизации	Настроить RUM, отслеживать метрики
Оптимизация без понимания причин	Усложнение кода без улучшения производительности	Использовать профилирование, искать корневые причины

Будущее Long Tasks и INP

С 2026 года внимание к отзывчивости интерфейса продолжает расти.

• Google продолжает усиливать значимость INP: В ближайших обновлениях алгоритмов INP может получить ещё больший вес в ранжировании.
• Стандартизация новых API:

  scheduler.yield() и scheduler.postTask() становятся стандартными способами управления приоритетами задач.
  Long Animation Frames (LoAF) API даст более детальную информацию о причинах долгих задач.

• Инструменты автоматической оптимизации: Появляются инструменты, автоматически разбивающие длинные задачи (например, в сборщиках и фреймворках).

Значение для маркетолога

Понимание Long Tasks позволяет маркетологу:

• Обосновывать технические инвестиции: показывать связь между производительностью и бизнес-метриками (конверсия, удержание).
• Участвовать в приоритизации: понимать, почему оптимизация JavaScript может быть важнее добавления новой функции.
• Интерпретировать данные SEO-инструментов: понимать, что означают предупреждения о производительности в PageSpeed Insights.
• Требовать мониторинга: запрашивать у разработчиков данные о Core Web Vitals и INP.
• Планировать тестирование: учитывать производительность при запуске A/B-тестов (медленный сайт может искажать результаты).

Связанные термины

• Core Web Vitals
• INP
• Производительность сайта
• Web Workers
• JavaScript
• Оптимизация производительности
• Chrome DevTools
• Lighthouse