◆Error Codes Wiki

Browser Performance — Diagnosing Slow Pages, Rendering, and JavaScript Bottlenecks

Warningweb development

Overview

Diagnose and fix slow web page performance using browser DevTools Performance panel, identifying layout thrashing, long tasks, and rendering bottlenecks.

Key Details

  • Chrome's Performance panel records CPU usage, rendering, painting, and JavaScript execution over time
  • Long tasks (>50ms) block the main thread and cause jank (stuttering) and unresponsive UI
  • Layout thrashing occurs when reading and writing to the DOM in a loop (forced synchronous layout)
  • Core Web Vitals: LCP (largest content paint), INP (interaction to next paint), CLS (cumulative layout shift)
  • The main thread handles JS execution, layout, and painting — blocking it freezes the page

Common Causes

  • Heavy JavaScript execution blocking the main thread (>50ms tasks)
  • Large number of DOM elements causing slow layout calculations
  • Layout thrashing: reading offsetHeight/getBoundingClientRect then writing styles in a loop
  • Unoptimized images and videos: large uncompressed files loading on page load
  • Third-party scripts (ads, analytics, chat widgets) adding significant load time

Steps

  1. 1Record a performance trace: DevTools > Performance > click Record, reproduce the issue, stop recording
  2. 2Identify long tasks: look for red triangles in the flame chart indicating tasks over 50ms
  3. 3Check Core Web Vitals: Lighthouse > Performance audit provides LCP, INP, CLS scores
  4. 4Find layout thrashing: look for purple 'Layout' blocks in the Performance timeline with warnings
  5. 5Profile JavaScript: look for wide blocks in the flame chart to find slow functions
  6. 6Optimize: defer non-critical JS, lazy-load images, reduce DOM size, use requestAnimationFrame for animations

Tags

performancedevtoolscore-web-vitalsjavascriptrendering

Related Items

browser-javascript-errorbrowser-javascript-heap-out-of-memory

More in Web Development

browser-cors-error-explainedBrowser CORS Error Explained — Cross-Origin Request Blocked
Warning
browser-websocket-errorsBrowser WebSocket Errors — Connection Failed, Closed & Protocol Errors
Warning
browser-indexeddb-errorsBrowser IndexedDB Errors — Quota Exceeded, Blocked & Corruption
Warning
browser-localstorage-quota-exceededBrowser localStorage Quota Exceeded — Storage Limit & Alternatives
Warning
browser-service-worker-errorsBrowser Service Worker Errors — Registration, Cache & Update Failures
Warning
browser-webgl-context-lostBrowser WebGL Context Lost — GPU Rendering Failure in Browser
Warning

Frequently Asked Questions

Any JavaScript execution that blocks the main thread for more than 50ms. Long tasks prevent the browser from responding to user input, causing the page to feel sluggish. Break long tasks into smaller chunks with requestIdleCallback or setTimeout.