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

Diagnose and fix slow web page performance using browser DevTools Performance panel, identifying layout thrashing, long tasks, and rendering bottlenecks. This guide covers everything you need to know about this topic, including common causes, step-by-step solutions, and answers to frequently asked questions.

Here are the key things to understand: 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. Understanding these fundamentals will help you diagnose and resolve this issue more effectively.

The most common reasons this occurs include: 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. Identifying the root cause is the first step toward finding the right solution.

To resolve this, follow these recommended steps: Record a performance trace: DevTools > Performance > click Record, reproduce the issue, stop recording. Identify long tasks: look for red triangles in the flame chart indicating tasks over 50ms. Check Core Web Vitals: Lighthouse > Performance audit provides LCP, INP, CLS scores. Find layout thrashing: look for purple 'Layout' blocks in the Performance timeline with warnings. Profile JavaScript: look for wide blocks in the flame chart to find slow functions. Optimize: defer non-critical JS, lazy-load images, reduce DOM size, use requestAnimationFrame for animations. If these steps do not resolve the issue, consider consulting additional resources or a qualified professional.

This article is part of our Browser Errors collection on Error Codes Wiki. We provide comprehensive, up-to-date information to help you find solutions quickly.