Skip to content

Frontend Performance Textbook

A free, self-paced textbook in 8 chapters. Read a chapter, then drill it with the 217 companion flashcards using spaced repetition.

8 chapters · 217 cards · Updated

Chapters

  1. 1Foundations of Frontend Performance

    Frontend performance describes how quickly and smoothly a web application loads, renders, and responds to a user's actions. It is not just about raw speed measured in the lab; it s...

  2. 2The Critical Rendering Path and Resource Loading

    To act on performance you have to understand the path the browser walks from bytes to pixels. The critical rendering path is the sequence in which the browser parses HTML, builds t...

  3. 3Network, Compression, and Delivery

    The transport layer shapes perceived performance as much as anything in your application code. HTTP/2 introduced multiplexing so many requests share a single connection without hea...

  4. 4Images, Fonts, and Media

    Images are usually the heaviest assets on a page, and they are also the assets most directly tied to perceived speed and layout stability. Three choices matter: format, size, and l...

  5. 5JavaScript Bundle Optimization

    The fastest JavaScript is the JavaScript you never ship, and the rest of the bundle should still be smaller than you think. A practical strategy splits code into three categories:...

  6. 6CSS Performance

    CSS affects performance in two distinct ways: bytes over the wire and work on the main thread. The bytes come from unused rules shipped because removing them by hand is tedious. To...

  7. 7Runtime Performance and Responsiveness

    Once the page is loaded, the metric that matters is INP, which captures how long users wait between an interaction and the visible response. INP is bottlenecked by main-thread work...

  8. 8Rendering Architecture, Tooling, and Long-Term Strategy

    Where you render matters as much as how you render. Server-side rendering produces meaningful HTML before client-side JavaScript finishes, which improves LCP and SEO at the cost of...

← Back to the Frontend Performance deck