Make your sites fast — by measuring first, then fixing what matters. Work through the lessons in order: measure with Lighthouse and Core Web Vitals, then the highest-impact wins (images, fonts, less JavaScript), then caching, layout stability, and runtime tuning. Examples are plain web platform code, so they apply in any framework.
Performance work assumes you can already build pages — be comfortable with HTML, CSS, and JavaScript first. This is best tackled after a framework, not as your first topic.
Before you start
You don’t need a new project — you’ll practice on a page you already have. To follow along:
F12 to open DevTools.Lighthouse tab to get a score, and the Network and Performance tabs to see what’s slow.Measuring Performance
You can’t improve what you can’t see — run Lighthouse, read the three Core Web Vitals, and use the DevTools panels.
Shipping Less JavaScript
JavaScript is expensive to download and run — split it, import only what you use, compress it, and hint the browser early.
Caching & the Network
Make repeat visits instant — cache assets with Cache-Control, fingerprint files, use a CDN, and cache with a Service Worker.
Layout Stability & Perceived Speed
Stop the page from jumping around (CLS) and make it feel fast with reserved space, skeletons, and streaming.
Runtime Performance & Keeping It Fast
Going further — keep the main thread free, debounce work, use Web Workers, animate cheaply, and lock in gains with a budget.