FEFrontend WikiEngineering knowledge hub
Performance · Handbook roadmap

Understand where frontend time goes.

Build one connected mental model—from navigation and browser rendering to React, memory, measurement, and sustainable performance practice.

Explore the roadmap Open investigations
1chapter available
6connected parts
8first-release chapters
The working model

Reason from experience to evidence.

  1. 01User experience
  2. 02Metric
  3. 03Browser timeline
  4. 04Responsible work
  5. 05Targeted change
  6. 06Verified result
Six-part curriculum

From first principles to engineering practice

Priority chapters establish the first useful release. Every chapter will connect its model to measurements, interview questions, exercises, and practical investigations.

Your progress0 of 1 chapters · 0%
0%
Part I

Performance reasoning

Learn what to measure, how to reason from evidence, and how to define success.

3 chapters
  1. 01

    What frontend performance means

    First release

    User experience, perceived speed, latency, throughput, and meaningful outcomes.

    Available
  2. 02

    Measurement methodology

    First release

    Field and lab data, reproducible baselines, percentiles, and experimental discipline.

    Planned
  3. 03

    Metrics and performance budgets

    First release

    Core Web Vitals, diagnostic metrics, budgets, and the limits of aggregate scores.

    Planned
Part II

Loading performance

Follow a navigation from the first request to meaningful content on screen.

5 chapters
  1. 04

    Navigation and network latency

    DNS, connections, TLS, redirects, server response time, CDNs, compression, and caching.

    Planned
  2. 05

    The critical rendering path

    First release

    HTML parsing, DOM, CSSOM, render blocking, parser blocking, and progressive rendering.

    Planned
  3. 06

    Resource discovery and priority

    Preload scanning, request initiators, hints, priorities, waterfalls, and resource competition.

    Planned
  4. 07

    JavaScript delivery

    First release

    Bundles, parsing, compilation, code splitting, duplicate code, hydration, and third parties.

    Planned
  5. 08

    Images, fonts, and media

    Responsive assets, formats, LCP discovery, font loading, dimensions, and stability.

    Planned
Part III

Runtime performance

Understand how application work becomes pixels and responsive interactions.

4 chapters
  1. 09

    The browser rendering pipeline

    First release

    Style, layout, paint, rasterization, compositing, invalidation, and layout thrashing.

    Planned
  2. 10

    The main thread and event loop

    First release

    Tasks, microtasks, rendering opportunities, long tasks, yielding, and workers.

    Planned
  3. 11

    Interaction responsiveness and INP

    Input delay, processing time, presentation delay, and responsive feedback.

    Planned
  4. 12

    Animation and scrolling

    Frame budgets, requestAnimationFrame, compositor work, observers, and reduced motion.

    Planned
Part IV

Application architecture

Connect architectural choices to loading, interaction, and maintenance costs.

4 chapters
  1. 13

    Rendering architecture

    Client rendering, SSR, static generation, streaming, hydration, islands, and Server Components.

    Planned
  2. 14

    React performance

    First release

    Render and commit cost, state ownership, memoization, Compiler, transitions, and profiling.

    Planned
  3. 15

    Data loading and caching

    Parallel loading, deduplication, prefetching, cache layers, freshness, and invalidation.

    Planned
  4. 16

    Large collections and data-heavy interfaces

    DOM size, pagination, virtualization, incremental rendering, and accessibility.

    Planned
Part V

Stability and memory

Keep interfaces visually stable and healthy across long-running sessions.

2 chapters
  1. 17

    Visual stability

    Layout-shift sources, session windows, fonts, media, embeds, and post-load movement.

    Planned
  2. 18

    Memory and lifecycle

    Reachability, detached DOM, listeners, observers, subscriptions, caches, and heap analysis.

    Planned
Part VI

Performance as engineering practice

Turn individual optimizations into a sustainable team capability.

4 chapters
  1. 19

    Performance tooling

    DevTools, Lighthouse, React profiling, bundle analysis, coverage, and choosing the right tool.

    Planned
  2. 20

    Real-user monitoring

    Web Vitals collection, attribution, segmentation, sampling, alerting, and release comparison.

    Planned
  3. 21

    Budgets and continuous delivery

    Automated checks, regression thresholds, journey tests, ownership, and escalation.

    Planned
  4. 22

    Tradeoffs and communication

    Prioritization, experiment design, proposals, stakeholder communication, and metric gaming.

    Planned
Learn by diagnosing

Turn each mental model into an investigation.

Use the companion lab to trace slow loading, delayed interactions, excessive React work, layout instability, and memory growth.

Explore performance investigations →