Web Performance Course

Lesson 1 • How Browsers Process Web Pages

Covers the full browser pipeline from DNS lookup to paint. Grounds all later optimisation work in a concrete understanding of what the browser does.

Lesson 2 • The Performance Budget Concept

Introduces budgets as constraints on page weight, timing, and requests. Connects budget-setting to business goals and user experience targets.

Lesson 3 • Understanding the Critical Rendering Path

Explains which resources block rendering and why. Builds the foundation for resource prioritisation techniques covered in later chapters.

Lesson 1 • Lab vs. Field Data

Distinguishes synthetic testing from real-user monitoring (RUM). Sets expectations for when each data type is appropriate for decision-making.

Lesson 2 • Automated Auditing Tools

Covers Lighthouse, WebPageTest, and similar audit platforms. Enables repeatable, automated performance scoring and regression detection.

Lesson 3 • Real-User Monitoring Setup

Guides implementation of RUM using the Performance Observer API. Connects field data collection to the metrics defined in Chapter 1.

Lesson 4 • Interpreting Profiles and Traces

Teaches systematic analysis of recorded traces to find long tasks and layout thrash. Bridges raw data to actionable optimisation decisions.

Lesson 1 • Resource Hints and Preloading

Teaches dns-prefetch, preconnect, preload, and prefetch directives. Reduces perceived latency by initiating fetches before the browser discovers them.

Lesson 2 • HTTP/2 and HTTP/3 Protocols

Explains multiplexing, header compression, and QUIC transport. Helps students configure servers to exploit modern protocol advantages.

Lesson 3 • Compression and Encoding Strategies

Covers Gzip, Brotli, and content encoding negotiation. Directly reduces bytes transferred for text-based assets.

Lesson 4 • Content Delivery Networks

Covers CDN architecture, edge caching, and origin offload. Reduces geographic latency for global audiences.

Lesson 1 • Video and Animation Optimisation

Addresses video encoding, autoplay policies, and replacing GIFs with video. Reduces media payload for motion content.

Lesson 2 • Lazy Loading and Decoding

Covers native lazy loading, Intersection Observer, and async decoding. Defers off-screen image cost to improve initial page load.

Lesson 3 • Compression and Quality Tuning

Covers lossy and lossless compression tools and quality settings. Balances file size reduction against acceptable visual degradation.

Lesson 4 • Modern Image Formats

Compares WebP, AVIF, and legacy formats on quality and file size. Equips students to choose the right format for each use case.

Lesson 1 • Bundling, Minification, and Tree Shaking

Explains how bundlers reduce code size through minification and dead-code elimination. Directly reduces parse and transfer cost.

Lesson 2 • Web Workers for Off-Thread Processing

Introduces Web Workers and the structured clone algorithm. Moves CPU-intensive work off the main thread to improve INP.

Lesson 3 • JavaScript Loading Strategies

Covers async, defer, and module loading attributes. Prevents scripts from blocking HTML parsing and delaying first render.

Lesson 4 • Third-Party Script Management

Audits third-party impact on main-thread cost and network requests. Provides strategies to load or defer external scripts safely.

Lesson 1 • GPU Compositing and Layer Management

Explains how the browser promotes elements to compositor layers. Teaches when to promote layers and how to avoid layer explosion.

Lesson 2 • CSS Animations and Transitions

Compares CSS animations, transitions, and JS-driven animation on performance. Guides selection of the most efficient animation approach.

Lesson 3 • Selector Efficiency and Specificity

Explains how selector complexity affects style recalculation cost. Guides students toward writing selectors that the browser resolves quickly.

Lesson 4 • CSS Delivery and Critical CSS

Covers inlining critical styles and deferring non-critical CSS. Eliminates render-blocking stylesheets to accelerate first paint.

Lesson 1 • Font Subsetting and Unicode Ranges

Covers subsetting tools and the unicode-range descriptor. Reduces font file size by including only the characters a page actually uses.

Lesson 2 • Web Font Loading Fundamentals

Explains FOIT, FOUT, and font-display strategies. Directly addresses CLS and LCP regressions caused by late-loading fonts.

Lesson 3 • Variable Fonts for Performance

Explains variable font axes and how one file replaces multiple weights. Reduces HTTP requests and total font payload for rich typography.

Lesson 1 • Core Web Vitals and Search Ranking

Explains how Core Web Vitals factor into search ranking signals. Connects performance investment to measurable organic traffic outcomes.

Lesson 2 • Performance Regression Prevention

Establishes CI/CD gates, budget enforcement, and alerting for performance regressions. Ensures optimisations persist through ongoing development.

Lesson 3 • Edge Computing and Personalisation

Covers edge functions, A/B testing at the edge, and personalised caching. Reduces origin round-trips for dynamic, user-specific content.

Lesson 4 • Performance for Single-Page Applications

Addresses route-based code splitting, prefetching, and navigation transitions in SPAs. Extends core techniques to client-side routing architectures.