5 Steps to Optimize Website Speed and Core Web Vitals

Page load speed directly affects user retention and Google search rankings. A website that takes longer than 3 seconds to load loses more than 40% of mobile visitors.

Below are the 5 core technical steps that Happier Solutions applies when auditing and optimizing client websites.

1. Serve Content from the Edge (Edge SSR & CDN)

Physical distance between your origin server and your users creates network latency. Deploying your application on edge networks such as Cloudflare Workers / Pages delivers HTML from the data center closest to each visitor.

2. Convert All Images to WebP or AVIF

Images often account for over 60% of total page weight. Compress and convert images to WebP or AVIF before publishing.

• Define explicit width and height attributes on every <img> element to prevent layout shifts (CLS — Cumulative Layout Shift).
• Add fetchpriority="high" to the primary above-the-fold image (LCP — Largest Contentful Paint).

3. Split JavaScript Bundles by Route

Do not force the browser to download your entire application bundle on the first visit. Modern routers like TanStack Router v1 split code automatically so each route loads only what it needs.

// Configure intent-based preloading for instant page transitions
const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  scrollRestoration: true,
})

4. Optimize Web Font Loading

Unoptimized custom fonts block text rendering:

1. Add rel="preconnect" links to your font origin.
2. Use font-display: swap so the browser renders text immediately with a fallback font while custom fonts load.
3. Load only the specific font weights used in your design system.

5. Audit and Remove Unused Third-Party Scripts

Legacy tracking scripts, chat widgets, and unused libraries block the main thread and degrade responsiveness (INP — Interaction to Next Paint). Audit third-party tags regularly and remove scripts that do not contribute to business conversions.