Video Tutorials

What is in each tutorial?

Every tutorial page includes a video walkthrough (coming soon on YouTube), 7-8 written steps with numbered checkpoints, annotated screenshots, copy-paste code examples, common issues with fixes, and a frequently-asked-questions section. Use the page without watching, or watch without reading -- they stand alone.

All tutorials are free and open-source. We update them whenever Chrome, Lighthouse, WebPageTest, or the web-vitals library ships a meaningful change.

Suggested learning path

1. Start with the Lighthouse walkthrough to understand scoring and get baseline numbers.
2. Move into the Performance panel to debug specific LCP, CLS, and INP issues.
3. Use the WebPageTest guide for deeper network and filmstrip analysis on slow connections.
4. Finally, set up RUM to monitor real users and catch regressions between deploys.

How to get the most from these tutorials

Performance tooling is overwhelming because every vendor has a slightly different vocabulary for the same idea. The four tutorials in this collection were chosen because together they cover the entire feedback loop a real team uses: a lab score from Lighthouse, a deep trace from Chrome DevTools, a controlled environment from WebPageTest, and a continuous signal from real user monitoring. Master those four and you can debug almost any Core Web Vitals regression.

Each tutorial is built around a real failing page. Rather than synthetic demos, we walk through the same kind of LCP, CLS, and INP regressions you would meet in production: a hero image starved of bandwidth, a CMS-injected ad shifting the layout, a third-party chat widget blocking the main thread for 700 ms. The screenshots, code, and waveforms reflect the messy reality, not a textbook example, so the muscle memory transfers cleanly to your own pages.

If you have only fifteen minutes, watch the Lighthouse walkthrough at 1.5x and bookmark the LCP guide for later. If you have a full afternoon, work the suggested path top to bottom and finish by setting up real user monitoring on a staging site so you can see your changes show up as p75 movement within hours instead of weeks.

Once the basics are in place, follow up with our fix library, where each metric has a framework- or platform-specific page that turns the diagnosis into shipping code. The interactive tools can help you set realistic budgets before you start, and the glossary is a quick reference if you forget what a term like CLS attribution or INP target actually means.

Frequently asked questions

Are these tutorials suitable for beginners?

Yes. The Lighthouse walkthrough assumes nothing beyond familiarity with Chrome DevTools, and each subsequent tutorial layers on additional concepts at a comfortable pace. If a term is unfamiliar, jump to the glossary and come back.

Do I need a paid account for any of the tools?

No. Lighthouse, Chrome DevTools, the public WebPageTest instance, and the web-vitals JavaScript library are all free. Some advanced WebPageTest features (private agents, scheduled tests) require an API key, but the entire walkthrough works on the free tier.

When are video versions coming?

Video recordings are produced as the platform-side bandwidth allows; the written walkthroughs are the canonical source and are kept current. Each tutorial includes timestamps and visual annotations so you can read it like a script even before the video lands.

Can I request a topic?

Open an issue on the GitHub repository and describe the workflow you want covered. We prioritize tutorials that close gaps between our existing guides and fixes.