What does the Performance tab do?

The Performance tab in Chrome DevTools records and shows what happens in the browser at the engine level while a page loads and runs.

---

#What it does:

1. Records a timeline of page activity

• parsing, rendering, JS execution, network requests, GC, events, and so on
• lets you see when and why slowdowns happen

2. Shows JavaScript loading and execution

• which scripts ran, how long they took, whether they blocked the main thread

3. Profiles rendering

• Layout, Paint, Composite, which elements triggered recalculations or repaints

4. Reveals blocking

• long tasks (> 50 ms), main thread blocking
• helps you understand where and why the interface "did not respond"

5. Shows key Web Vitals (LCP, FCP, TTI)

• you can find them right on the timeline

---

#How to use it:

1. Open the Performance tab
2. Click the ● Record button
3. Reload the page or perform actions
4. Click ■ Stop
5. Study the timeline:

• frames (FPS) at the top
• below: script execution time, rendering, layout, paint
• click on sections to see details (exactly what ran and why)

---

#What it gives you:

• an exact understanding of where the site slows down
• which tasks block the thread
• which events trigger unnecessary layout/paint
• helps optimize load time and responsiveness

---

Conclusion: The Performance tab is like an X-ray for the browser: it shows exactly how your site lives inside and where it loses speed.