This is a step-by-step guide on how I use Chrome DevTools (DevTools from now on) to detect Web Performance issues on a website, as well as validate hypotheses to fix some of the problems found.

Disclaimer

Before diving in, I want to clarify that: this is not a guide on how DevTools works, it's a v

PerfPlanetCal is a curated calendar of web performance events, conferences, and meetups around the world. Through event listings, PerfPlanetCal offers insights into web performance topics, including performance optimization techniques, browser performance tools, and user experience metrics. Developers and performance enthusiasts can discover opportunities to network with peers, learn from industry experts, and stay updated with the latest trends in web performance.

Web Performance Calendar

A hands-on walkthrough of using Chrome DevTools to identify and debug web performance issues. Covers analyzing Core Web Vitals (LCP, CLS, INP), inspecting network requests, detecting render-blocking resources, examining layout shifts, profiling interactions, and validating optimization hypotheses. Includes practical techniques like environment configuration based on field data, using the Performance panel and Insights sidebar, analyzing CSS media queries, leveraging content-visibility, and optimizing heavy resources like images and videos. Demonstrates real-world analysis of an e-commerce site with specific findings like oversized images, inefficient caching, and heavy JavaScript bundles.

Chrome DevTools for Debugging Web Performance