1 — Build Optimization
Focuses on reducing the size, complexity, and loading cost of your application’s bundled assets before they ever reach the browser.
Step 1
2 — Network & Delivery
Focuses on how efficiently resources are transferred from the server to the user’s device.
Step 2
3 — Critical Rendering Path
Refers to the sequence of steps the browser takes to convert HTML, CSS, and JavaScript into pixels on the screen. Optimizing this path means reducing the time between the initial request and the moment meaningful content is visually displayed
- 🚧 Reduce render blocking
- 📡 Resource Hints
- ⚙️ Rendering Strategies
- 🤔 Speculation API
- 🔤 Font loading optimization
- 🖼️ Image optimization
4 — Browser
Covers key browser-level optimizations that enhance performance and resilience. This includes leveraging built-in caching mechanisms to reduce load times and using Web Workers to offload heavy computations from the main thread — keeping the UI smooth and responsive.
Step 4
4 — Runtime & Rendering
Focuses on what happens after the initial page load — how efficiently your application updates, repaints, and responds to changes in the DOM
Step 5
5 — Interaction & Responsiveness
Focuses on how quickly and smoothly a web application reacts to user input — clicks, scrolls, typing, or gestures
Step 6