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