Why Speed Is a Business Problem, Not a Technical One
Images Are the Biggest Culprit (and the Easiest Win)
- Compresses every image so there's no wasted data riding along.
- Serves the right size for the device, a phone gets a phone-sized image, not the giant desktop version scaled down in the browser.
- Lazy loads images further down the page, so the browser only fetches them as the visitor scrolls toward them instead of all at once on arrival.
Serving Files Close to the Visitor
Modern Frameworks Ship Less to the Browser
- Pre-rendering turns pages into ready-to-display HTML during the build, so the browser shows content immediately instead of assembling it on arrival.
- Code splitting sends only the code a given page actually needs, instead of one enormous bundle for the whole site.
- Tree shaking and minification strip out unused code and compress what's left, so less travels over the wire.
Core Web Vitals: How Google Measures All of This
- LCP (Largest Contentful Paint) measures how long until the main content actually appears. Optimized images and pre-rendering are what move this.
- CLS (Cumulative Layout Shift) measures whether the page jumps around as it loads, the frustrating moment where you go to tap a button and it slides out from under your finger. Reserving space for images and fonts keeps this low.
- INP (Interaction to Next Paint) measures how quickly the page responds when someone taps or clicks. Shipping less code is what keeps this snappy.