Day 114 — Frontend Performance: Making Your UI Feel Instant
What We’re Building Today
By the end of this lesson you’ll have a production-grade React frontend that does five things your users will feel immediately:
Splits code so users only download what they actually need
Lazy-loads routes and heavy components on demand
Cuts the initial bundle size below 200KB
Installs a Service Worker for offline caching and instant repeat visits
Monitors real-user performance through a live dashboard showing Core Web Vitals, resource timings, and bundle stats
This lesson is the client-side half of the performance story you started yesterday. Yesterday you made the backend fast. Today you make sure that speed actually reaches the user’s screen.
Prerequisites
Before you open your editor, confirm these are in place:
Node.js 18 or newer — check with
node -vPython 3.11 or newer — check with
python3 --versionThe Day 113 project running, or the
build.shfrom this lesson for a clean start20 to 30 minutes of focused time
Why This Matters
Netflix ran an internal study showing that a 100ms increase in load time caused a measurable drop in stream-start completions. Google’s research puts it more bluntly: 53% of mobile users abandon a page that takes longer than 3 seconds. The browser itself keeps score — Chrome’s Lighthouse tool grades your app on Core Web Vitals, and those scores directly influence your position in search results.
There are three numbers you are optimising today:
Metric What It Measures Target LCP — Largest Contentful Paint How fast the biggest visual element loads Under 2.5 seconds FID / INP How fast the page responds to the first tap or click Under 100ms CLS — Cumulative Layout Shift How stable the layout is while the page loads Below 0.1
If you have ever watched a page where buttons jump around right before you click them, or loaded an app that showed a blank screen for five seconds, you have experienced LCP and CLS failures personally. You are building the tooling to catch and fix both.
System Architecture
The performance system you are building has three distinct layers. Understanding them before writing a single line of code is what separates engineers from people who just follow tutorials.
