How to use Chrome DevTools for measurements?

Chrome DevTools is the built-in developer tool in Google Chrome. It can be used to measure a site's performance across key metrics.

---

#How to open DevTools:

• PC: Ctrl + Shift + I or F12
• Mac: Cmd + Option + I
• Or right-click → "View code"

---

#The Performance tab

For analyzing rendering, blocking, layout, and JS:

1. Go to the Performance tab
2. Click Record
3. Reload the page or perform the needed actions
4. Stop the recording

What it shows:

• loading timelines (FCP, LCP, TTI)
• which tasks block the thread
• how much time rendering, JS, GC, and so on take
• Paint, Layout, Composite, and everything related to rendering

---

#The Lighthouse tab

For getting a report with Web Vitals:

1. The Lighthouse tab
2. Choose the device type (mobile/desktop)
3. Run the analysis
4. Get a score across metrics:

• LCP, FID, CLS, TTI, TBT, SEO, accessibility, and others
• recommendations for improvement

---

#The Web Vitals (via extension) tab

• Install the Web Vitals extension from the Chrome Web Store
• Shows in real time: LCP, FID, CLS for the current page
• Based on real browser data

---

#The Network tab

Useful for:

• analyzing resource loading
• measuring TTFB, size, response time
• tracking blocking resources (CSS, JS)

---

#The Performance Insights (in newer versions) tab

• A more user-friendly visual interface
• Focuses on Web Vitals and problem areas
• You can run the analysis with one click: it shows where the bottlenecks are

---

Conclusion: Use the Performance tab: for deep tracing. Lighthouse: for a quick score and report. Network: for measuring resource loading. All of this helps you see where the site actually slows down and why.