A Developer's Guide to Analyzing Web Vitals using Chrome DevTools
Designed for Front-end web developers in fast-growing SaaS startups who are actively responsible for site performance monitoring and frequently deploy iterative updates. to spark real collaboration and high-energy learning.
A 75-minute virtual hands-on session. Participants are under pressure to optimize site speed for recent product launches, but feel overwhelmed by Chrome DevTools’ complexity and want to connect performance metrics to actionable code changes.
Uncover the Hidden Web Vitals
Kick off with a live 'Easter Egg Hunt' in Chrome DevTools. Share an unfamiliar website and challenge participants to quickly locate the Web Vitals reporting panel (Performance tab, Web Vitals overlay) on their own, without instructions. Celebrate the first three who find it and share their screens—then reveal the fastest path.
Tap to view the full activity.
Why this works
Novelty and active searching drive curiosity and recall. Self-discovery makes the interface feel less intimidating and primes attention for deeper analysis.
Web Vitals Myth-Busting Blitz
Present three common misconceptions about Web Vitals (e.g., 'LCP always means images,' 'FID is just JavaScript lag,' 'CLS only affects mobile'). Participants vote using instant polls, then see quick 1-minute demos debunking each myth live in DevTools.
Tap to view the full activity.
Why this works
Surfacing and correcting misconceptions builds trust and readiness for accurate learning. Visual demos anchor truth in direct evidence.
Silent Tracewalk Pair-Up
Assign pairs to silently annotate a shared Performance trace screenshot in Google Jamboard or Miro. Each marks one area they suspect impacts LCP, FID, or CLS. Then, pairs rejoin the main room to share their guesses and rationale, no pressure—just observations.
Tap to view the full activity.
Why this works
Low-pressure, non-verbal participation reduces anxiety and encourages careful observation. Pairing builds interpersonal comfort and exchange of ideas.
Metric Relay Race
Run a fast-paced relay: split into mini-teams, each assigned a Web Vital (LCP, FID, or CLS). Teams get 90 seconds to draw a quick diagram or meme representing their metric, then pass to the next group with a sticky-note tip for improving it. Final round—every group presents their combined work with gusto.
Tap to view the full activity.
Why this works
Energetic, time-constrained creation sparks adrenaline and memory. Collaborative passing builds connection and ownership of ideas.
Startup Site Dilemma: Ship or Fix?
Present a real dilemma: a startup’s homepage is about to launch, but Performance panel shows a poor LCP. Share key trace screenshots and resource timings. Ask participants to brainstorm: should the team ship the site or delay to fix? What’s at stake, and which fixes are feasible before launch?
Tap to view the full activity.
Why this works
Anchoring abstract metrics in real stakes motivates critical thinking. Decision-making under pressure mirrors real-world development dilemmas.
My Site, My Metrics Reflection
Invite each participant to open their own project in Chrome DevTools during the session, run a Performance trace, and privately note which Web Vitals are most problematic for their site. End with a guided personal reflection: what one actionable step could they take this week to improve their scores?
Tap to view the full activity.
Why this works
Personal application cements learning and motivates action. Connecting metrics to current work builds ownership and transfer.
Sign up to unlock 3 more activities
Get the full pack, facilitation flow, and more ready-to-run ideas.