cf.completefrontend
THE WEB PERFORMANCE COURSE

Web performance

The complete path through web performance: why speed matters, how browsers load and render pages, measuring in the lab and with real users, fixing LCP, INP, and CLS, and how browsers work under the hood. Every fix is measured before and after, so you see what each change does on the devices your users have.

181 lessons on the way46 modules15 stagesBeginner to expert
Start hereLesson 1.1 Coming soon

What is web performance?

Performance is how fast a page loads, how quickly it reacts, how smoothly it moves, and how still it stays. The Web performance lessons are being written, and this one opens first.

See it in the learning path
Welcome to web performanceComing soon

// What you’ll learn

  • Loading, responsiveness, smoothness, and stability
  • Measured speed vs perceived speed
  • The user's device and network, not yours
  • Where time goes on a typical page load
  • A map of this course

Your progress

View detailed stats
181 lessons on the way

Your progress starts with the first published lesson.

day streak
0
days this week
0
stages done
0/15

The learning path

181 lessons coming soon

15 stages, in order. Each one builds on the last, from why speed matters to how browsers load, render, and measure your pages. Every lesson is listed now, and each one opens as soon as it's published. Jump to a stage, or search for any topic.

  1. STAGE 1 · BEGINNERWhy speed matters3 modules · 11 lessons
  2. STAGE 2 · BEGINNER TO INTERMEDIATEHow the browser loads and renders3 modules · 16 lessons
  3. STAGE 3 · INTERMEDIATEMeasuring in the lab3 modules · 17 lessons
  4. STAGE 4 · INTERMEDIATEMeasuring real users4 modules · 18 lessons
  5. STAGE 5 · INTERMEDIATEFast servers, caches, and networks3 modules · 12 lessons
  6. STAGE 6 · INTERMEDIATELoading content fast: LCP5 modules · 17 lessons
  7. STAGE 7 · INTERMEDIATEJavaScript loading4 modules · 13 lessons
  8. STAGE 8 · ADVANCEDResponsiveness: INP4 modules · 16 lessons
  9. STAGE 9 · ADVANCEDStability and smoothness3 modules · 13 lessons
  10. STAGE 10 · ADVANCEDInstant navigations2 modules · 5 lessons
  11. STAGE 11 · ADVANCEDArchitecture and frameworks2 modules · 10 lessons
  12. STAGE 12 · ADVANCEDDevices, networks, and people2 modules · 6 lessons
  13. STAGE 13 · ADVANCEDPerformance as a practice3 modules · 11 lessons
  14. STAGE 14 · EXPERTUnder the hood3 modules · 9 lessons
  15. STAGE 15 · ADVANCEDProjects2 modules · 7 lessons

181 lessons in 15 stages and 46 modules.

Stage 1 Beginner

Why speed matters

What web performance is, why users and businesses care, how people perceive speed, and the metrics that measure it.

3 modules · 11 lessons

  1. 0 of 4 lessons ready

    Module 1: Welcome to web performance

    What performance means, who it's for, and how this course works.

    1. 1.1What is web performance?Soon
    2. 1.2Why performance mattersSoon
    3. 1.3The performance inequality gapSoon
    4. 1.4Your toolkit and the course projectSoon
  2. 0 of 3 lessons ready

    Module 2: How people perceive speed

    Response-time limits, perceived performance, and metrics built around what the user sees.

    1. 2.10.1 seconds, 1 second, 10 secondsSoon
    2. 2.2Perceived performanceSoon
    3. 2.3From onload to user-centric metricsSoon
  3. 0 of 4 lessons ready

    Module 3: The metrics that matter

    Core Web Vitals, the metrics around them, lab vs field data, and reading distributions.

    1. 3.1Core Web VitalsSoon
    2. 3.2The supporting metricsSoon
    3. 3.3Lab data vs field dataSoon
    4. 3.4Averages lie: reading distributionsSoon

Stage 2 Beginner to intermediate

How the browser loads and renders

The network, the journey from URL to first pixels, and the rendering pipeline: the mechanics every optimization depends on.

3 modules · 16 lessons

  1. 0 of 6 lessons ready

    Module 4: The network

    Latency, DNS, TCP, TLS, and the HTTP versions, and what each costs a page load.

    1. 4.1Latency vs bandwidthSoon
    2. 4.2DNS lookupsSoon
    3. 4.3TCP connections and slow startSoon
    4. 4.4TLS without the waitSoon
    5. 4.5HTTP/1.1 and HTTP/2Soon
    6. 4.6HTTP/3 and QUICSoon
  2. 0 of 6 lessons ready

    Module 5: From URL to first pixels

    The steps of a navigation, how the browser finds and prioritizes resources, and how to read a waterfall.

    1. 5.1The navigation timelineSoon
    2. 5.2HTML parsing and the preload scannerSoon
    3. 5.3Render-blocking and parser-blocking resourcesSoon
    4. 5.4How browsers prioritize requestsSoon
    5. 5.5The critical rendering pathSoon
    6. 5.6Reading a waterfallSoon
  3. 0 of 4 lessons ready

    Module 6: How the browser renders

    Processes and threads, the event loop and frames, the pixel pipeline, and the cost of JavaScript.

    1. 6.1Processes and threadsSoon
    2. 6.2The event loop and framesSoon
    3. 6.3The pixel pipelineSoon
    4. 6.4The cost of JavaScriptSoon

Stage 3 Intermediate

Measuring in the lab

Chrome DevTools, Lighthouse, WebPageTest, and other lab tools: record, read, and compare results you can trust.

3 modules · 17 lessons

  1. 0 of 7 lessons ready

    Module 7: Chrome DevTools for performance

    The Performance panel, its insights, the Network panel, and the rendering tools.

    1. 7.1The Performance panelSoon
    2. 7.2Reading a performance traceSoon
    3. 7.3Performance insightsSoon
    4. 7.4The Network panel for performanceSoon
    5. 7.5Rendering and runtime toolsSoon
    6. 7.6Custom tracks, annotations, and sharingSoon
    7. 7.7Performance work with AI agentsSoon
  2. 0 of 5 lessons ready

    Module 8: Lighthouse

    How Lighthouse tests, scores, and throttles, and how to use it without being misled.

    1. 8.1How Lighthouse worksSoon
    2. 8.2The Lighthouse scoreSoon
    3. 8.3Throttling and simulationSoon
    4. 8.4Reading audits and insightsSoon
    5. 8.5Scripting LighthouseSoon
  3. 0 of 5 lessons ready

    Module 9: WebPageTest and synthetic testing

    Real-browser tests from real locations, test conditions that match your users, and results you can compare.

    1. 9.1WebPageTest basicsSoon
    2. 9.2WebPageTest in depthSoon
    3. 9.3Choosing test conditionsSoon
    4. 9.4Noise and variabilitySoon
    5. 9.5More lab toolsSoon

Stage 4 Intermediate

Measuring real users

Chrome's field data, the browser's performance APIs, real user monitoring, and the statistics to read it all.

4 modules · 18 lessons

  1. 0 of 3 lessons ready

    Module 10: Field data from Chrome

    The Chrome User Experience Report and the tools built on it.

    1. 10.1The Chrome User Experience ReportSoon
    2. 10.2PageSpeed Insights and Search ConsoleSoon
    3. 10.3The CrUX API, history, and BigQuerySoon
  2. 0 of 6 lessons ready

    Module 11: The browser's performance APIs

    The W3C performance APIs that every metric and RUM tool is built on.

    1. 11.1The performance timelineSoon
    2. 11.2Navigation Timing and Resource TimingSoon
    3. 11.3Paint, LCP, and layout shift APIsSoon
    4. 11.4Event Timing and INPSoon
    5. 11.5Long Tasks and Long Animation FramesSoon
    6. 11.6User Timing and custom metricsSoon
  3. 0 of 7 lessons ready

    Module 12: Real user monitoring

    Collect, send, store, and segment performance data from real users, then turn it into fixes.

    1. 12.1The web-vitals librarySoon
    2. 12.2Field data from every browserSoon
    3. 12.3Sending performance dataSoon
    4. 12.4Building a RUM pipelineSoon
    5. 12.5Segmenting field dataSoon
    6. 12.6Choosing a RUM toolSoon
    7. 12.7From field data to a fixSoon
  4. 0 of 2 lessons ready

    Module 13: Statistics for performance

    Enough statistics to read performance data correctly and prove a change worked.

    1. 13.1Reading performance dataSoon
    2. 13.2Proving a change workedSoon

Stage 5 Intermediate

Fast servers, caches, and networks

Time to first byte, caching at every layer, CDNs, compression, and resource hints.

3 modules · 12 lessons

  1. 0 of 4 lessons ready

    Module 14: Time to first byte

    What happens before the first byte arrives, and how to shrink it.

    1. 14.1Time to first byteSoon
    2. 14.2Faster server responsesSoon
    3. 14.3RedirectsSoon
    4. 14.4103 Early HintsSoon
  2. 0 of 4 lessons ready

    Module 15: Caching

    HTTP caching, the browser's many caches, and CDNs.

    1. 15.1HTTP caching in depthSoon
    2. 15.2A caching strategySoon
    3. 15.3The browser's cachesSoon
    4. 15.4CDNs and the edgeSoon
  3. 0 of 4 lessons ready

    Module 16: Compression, protocols, and hints

    Shrink every byte on the wire, use HTTP/2 and HTTP/3 well, and tell the browser what's coming.

    1. 16.1gzip, Brotli, and ZstandardSoon
    2. 16.2Compression dictionariesSoon
    3. 16.3Connections in practiceSoon
    4. 16.4Resource hintsSoon

Stage 6 Intermediate

Loading content fast: LCP

Largest Contentful Paint in depth, then images, video, fonts, and CSS: the content users wait for.

5 modules · 17 lessons

  1. 0 of 4 lessons ready

    Module 17: Largest Contentful Paint

    What LCP measures, its four parts, and how to fix each one.

    1. 17.1How LCP worksSoon
    2. 17.2The four parts of LCPSoon
    3. 17.3Load the LCP resource earlySoon
    4. 17.4Remove render delaySoon
  2. 0 of 5 lessons ready

    Module 18: Images

    Formats, responsive images, loading behavior, image CDNs, and SVG.

    1. 18.1Image formatsSoon
    2. 18.2Responsive imagesSoon
    3. 18.3Loading images wellSoon
    4. 18.4Image CDNs and pipelinesSoon
    5. 18.5SVG and iconsSoon
  3. 0 of 2 lessons ready

    Module 19: Video and embeds

    Video that loads fast and embeds that don't drag the page down.

    1. 19.1Video performanceSoon
    2. 19.2Embeds and facadesSoon
  4. 0 of 4 lessons ready

    Module 20: Web fonts

    How fonts load, how to make them small, and how to stop them shifting the page.

    1. 20.1How web fonts loadSoon
    2. 20.2Smaller, faster fontsSoon
    3. 20.3Fallback fonts without layout shiftsSoon
    4. 20.4When to skip web fontsSoon
  5. 0 of 2 lessons ready

    Module 21: CSS delivery

    Get the CSS a page needs to it fast, and stop shipping the CSS it doesn't.

    1. 21.1Delivering CSSSoon
    2. 21.2Shipping less CSSSoon

Stage 7 Intermediate

JavaScript loading

Ship less JavaScript, load it in the right order, tame third parties, and use service workers for speed.

4 modules · 13 lessons

  1. 0 of 6 lessons ready

    Module 22: Shipping less JavaScript

    Measure what you ship and remove what users don't need.

    1. 22.1How much JavaScript is too much?Soon
    2. 22.2Analyzing your bundlesSoon
    3. 22.3Tree shakingSoon
    4. 22.4Code splittingSoon
    5. 22.5A diet for dependenciesSoon
    6. 22.6Minification and build outputSoon
  2. 0 of 3 lessons ready

    Module 23: Loading scripts well

    Script loading attributes, ES modules in the browser, and the cost of hydration.

    1. 23.1Script loading strategiesSoon
    2. 23.2ES modules in the browserSoon
    3. 23.3The cost of hydrationSoon
  3. 0 of 3 lessons ready

    Module 24: Third-party scripts

    Measure, load, and govern analytics, ads, tag managers, and widgets.

    1. 24.1The cost of third partiesSoon
    2. 24.2Loading third parties wellSoon
    3. 24.3Governing third partiesSoon
  4. 0 of 1 lessons ready

    Module 25: Service workers for speed

    Use a service worker to make repeat visits fast without slowing the first.

    1. 25.1Service workers and performanceSoon

Stage 8 Advanced

Responsiveness: INP

Interaction to Next Paint in depth, the main thread, fast event handlers, and memory.

4 modules · 16 lessons

  1. 0 of 3 lessons ready

    Module 26: Interaction to Next Paint

    What INP measures, its three phases, and finding slow interactions.

    1. 26.1How INP worksSoon
    2. 26.2The three phases of an interactionSoon
    3. 26.3Finding slow interactionsSoon
  2. 0 of 5 lessons ready

    Module 27: The main thread

    Long tasks, yielding, breaking up work, and moving work off the main thread.

    1. 27.1Long tasksSoon
    2. 27.2Yielding to the main threadSoon
    3. 27.3Breaking up long workSoon
    4. 27.4Web workers for performanceSoon
    5. 27.5WebAssembly for performanceSoon
  3. 0 of 4 lessons ready

    Module 28: Fast interactions

    Event handlers, rendering after input, and responsiveness in frameworks.

    1. 28.1Fast event handlersSoon
    2. 28.2Reducing presentation delaySoon
    3. 28.3INP in frameworksSoon
    4. 28.4INP fixes from real sitesSoon
  4. 0 of 4 lessons ready

    Module 29: Memory and storage

    How memory affects speed, finding leaks in web apps, measuring memory in the field, and fast client storage.

    1. 29.1Memory and speedSoon
    2. 29.2Finding leaks in web appsSoon
    3. 29.3Measuring memory in the fieldSoon
    4. 29.4Storage performanceSoon

Stage 9 Advanced

Stability and smoothness

Cumulative Layout Shift in depth, rendering performance, and animation that stays smooth.

3 modules · 13 lessons

  1. 0 of 4 lessons ready

    Module 30: Cumulative Layout Shift

    How CLS is scored, what causes shifts, and how to fix and debug them.

    1. 30.1How CLS worksSoon
    2. 30.2What causes layout shiftsSoon
    3. 30.3Fixing layout shiftsSoon
    4. 30.4Debugging CLSSoon
  2. 0 of 4 lessons ready

    Module 31: Rendering performance

    The cost of style, layout, paint, and a large DOM, and how to keep each one small.

    1. 31.1Style recalculationSoon
    2. 31.2Layout and layout thrashingSoon
    3. 31.3DOM sizeSoon
    4. 31.4Paint and layersSoon
  3. 0 of 5 lessons ready

    Module 32: Smooth animation and scrolling

    Compositor animations, scrolling, view transitions, and measuring smoothness.

    1. 32.1Compositor-friendly animationSoon
    2. 32.2Scrolling performanceSoon
    3. 32.3View transitions and performanceSoon
    4. 32.4Measuring smoothnessSoon
    5. 32.5Canvas and WebGL performanceSoon

Stage 10 Advanced

Instant navigations

The back/forward cache, prefetching and prerendering, and fast navigations in single-page apps.

2 modules · 5 lessons

  1. 0 of 3 lessons ready

    Module 33: Back/forward cache and prerendering

    Make the next page appear instantly: restore it, prefetch it, or prerender it.

    1. 33.1The back/forward cacheSoon
    2. 33.2Speculation RulesSoon
    3. 33.3Prefetching strategiesSoon
  2. 0 of 2 lessons ready

    Module 34: Single-page app navigations

    Fast and measurable route changes in single-page apps.

    1. 34.1Fast route changesSoon
    2. 34.2Measuring soft navigationsSoon

Stage 11 Advanced

Architecture and frameworks

How rendering strategies shape every metric, and performance in React, Next.js, Angular, Vue, Svelte, Astro, and Qwik.

2 modules · 10 lessons

  1. 0 of 4 lessons ready

    Module 35: Rendering strategies

    Client rendering, server rendering, static generation, streaming, and islands, compared by their metrics.

    1. 35.1Rendering strategies comparedSoon
    2. 35.2Streaming HTMLSoon
    3. 35.3Hydration strategiesSoon
    4. 35.4Rendering at the edgeSoon
  2. 0 of 6 lessons ready

    Module 36: Framework performance

    The performance tools and patterns of each major framework.

    1. 36.1React performanceSoon
    2. 36.2Next.js performanceSoon
    3. 36.3Angular performanceSoon
    4. 36.4Vue and Nuxt performanceSoon
    5. 36.5Svelte, Astro, and QwikSoon
    6. 36.6CMS and e-commerce platformsSoon

Stage 12 Advanced

Devices, networks, and people

Low-end phones, slow networks, adaptive loading, webviews, accessibility, and the energy cost of the web.

2 modules · 6 lessons

  1. 0 of 4 lessons ready

    Module 37: Every device and network

    Test on the devices people use, and adapt to what their phones and networks can do.

    1. 37.1Testing on low-end devicesSoon
    2. 37.2Adaptive loadingSoon
    3. 37.3Slow and unreliable networksSoon
    4. 37.4Webviews, in-app browsers, and PWAsSoon
  2. 0 of 2 lessons ready

    Module 38: People and planet

    Where performance meets accessibility and sustainability.

    1. 38.1Performance and accessibilitySoon
    2. 38.2Performance and sustainabilitySoon

Stage 13 Advanced

Performance as a practice

Budgets, continuous integration, monitoring, audits, experiments, the business case, and a performance culture.

3 modules · 11 lessons

  1. 0 of 3 lessons ready

    Module 39: Budgets and regressions

    Set budgets, catch regressions before they ship, and watch production.

    1. 39.1Performance budgetsSoon
    2. 39.2Performance in continuous integrationSoon
    3. 39.3Monitoring and alertingSoon
  2. 0 of 3 lessons ready

    Module 40: Audits and experiments

    Run a performance audit from start to finish, report it, and prove changes with experiments.

    1. 40.1Running a performance auditSoon
    2. 40.2Writing an audit reportSoon
    3. 40.3Performance experimentsSoon
  3. 0 of 5 lessons ready

    Module 41: Business and culture

    Make the case for performance, understand its role in search, and build a team that keeps sites fast.

    1. 41.1The business case for performanceSoon
    2. 41.2Search and Core Web VitalsSoon
    3. 41.3Building a performance cultureSoon
    4. 41.4Performance for designers and product managersSoon
    5. 41.5Performance in interviewsSoon

Stage 14 Expert

Under the hood

How browsers load, render, and measure pages, network internals, and how new performance standards are made.

3 modules · 9 lessons

  1. 0 of 4 lessons ready

    Module 42: Browser internals

    Chromium's loading and rendering pipelines, how metrics are computed, and deep tracing.

    1. 42.1How Chromium loads resourcesSoon
    2. 42.2Inside the rendering engineSoon
    3. 42.3How the metrics are computedSoon
    4. 42.4Deep tracing with PerfettoSoon
  2. 0 of 3 lessons ready

    Module 43: Network internals

    Congestion control, prioritization, and QUIC, deep enough to debug them.

    1. 43.1Congestion controlSoon
    2. 43.2HTTP prioritization internalsSoon
    3. 43.3QUIC internalsSoon
  3. 0 of 2 lessons ready

    Module 44: Standards and what's next

    How performance APIs are designed and shipped, and what's coming.

    1. 44.1How performance standards are madeSoon
    2. 44.2What's next for web performanceSoon

Stage 15 Advanced

Projects

Guided projects on real code, and a capstone audit of a site you choose.

2 modules · 7 lessons

  1. 0 of 6 lessons ready

    Module 45: Guided projects

    Apply the course to realistic apps, measuring before and after every change.

    1. 45.1Project: fix a slow storeSoon
    2. 45.2Project: build a RUM dashboardSoon
    3. 45.3Project: rescue a slow app's INPSoon
    4. 45.4Project: a performance pipelineSoon
    5. 45.5Project: instant navigationsSoon
    6. 45.6Project: an image pipelineSoon
  2. 0 of 1 lessons ready

    Module 46: Capstone

    Show everything you've learned on a site you choose.

    1. 46.1Capstone: audit a real siteSoon