Demystifying web performance tooling and metrics
summary
Clear distinctions between lab and field data, LCP and layout shifts, and concrete tooling steps: Chrome DevTools Network/Performance/Rendering, Lighthouse, PageSpeed Insights, WebPageTest and the Web Vitals extension. Practical findings: a site audit shows 101 requests and ~8–12 MB transferred (accepting cookies jumps to 146 requests), a react‑icons import shipped ~2 MB extra, and server latency driving bad TTFB. Actionable fixes: preload critical images, avoid lazy on LCP candidates, split JS, use web workers, monitor with SpeedCurve/Calibre and CI bundle-size checks.
AI-written summary · about
chapters (18)
- 0:00Start
- 2:41Load performance
- 3:42Runtime performance
- 8:23Core Web Vitals
- 9:50Largest Contentful Paint
- 11:23LCP optimisation tips
- 12:31Cumulative Layout Shift
- 13:59CLS optimisation tips
- 17:04INP optimisation tips
- 20:10TTFB optimisation tips
- 22:59Webpack Bundle Analyzer
- 23:58Web Vitals Extension
- 25:48Network tab
- 26:31Performance tab
- 27:21Lighthouse
- 28:29Rendering tab
- 46:17Performance monitoring
- 47:40Summary
related talks
33mDemystifying Web Performance Tooling
31mPanel Discussion: Get to Know: Web Performance and Core Web Vitals
35mRevitalising the Web - The Importance of Web Performance
16mFrom Beginner to Expert in Web Performance
43mDemystifying and leveraging Web Vitals
27mHow to Measure Performance Effectively?
16mFrom beginner to expert in web performance
01h 04mNeed for speed 8, performance tuning of your web application