Long tasks over 50ms broken up or eliminated

Any JavaScript task running for more than 50ms continuously blocks the browser's main thread (ISO-25010 time-behaviour). During that time the browser cannot respond to user input, run animations, or update the UI. The result is a UI that feels frozen or laggy — users experience input lag even if no interaction is happening, because the browser is busy with work they did not trigger. Long tasks are the most common root cause of poor INP and Total Blocking Time scores, and they compound when multiple libraries initialize sequentially at page load.

Break tasks exceeding 50ms into smaller chunks the browser can interleave with rendering. Use scheduler.yield() for sequential processing:

// src/lib/process.ts
async function processArray(items: Item[]) {
  for (let i = 0; i < items.length; i++) {
    processItem(items[i])
    if (i % 50 === 0) await scheduler.yield()  // yield every 50 items
  }
}

For one-off heavy operations, move them to a Web Worker entirely:

// main thread
const worker = new Worker(new URL('./processor.worker.ts', import.meta.url))
worker.postMessage({ items: largeArray })
worker.onmessage = (e) => displayResults(e.data)

Defer non-critical initialization to idle time:

requestIdleCallback(() => initAnalytics())

Identify long tasks in Chrome DevTools Performance tab — they appear as red-flagged blocks over 50ms in the Main thread row.