Find the performance bottlenecks that matter

Some code paths affect perceived performance far more than others. In frontend applications, the "hot path" is typically the initial page load. Shaving time off that path directly improves user experience and Core Web Vitals like First Contentful Paint (FCP), Largest Contentful Paint (LCP), and First Input Delay (FID).

At Vercel, we applied this thinking to the Dashboard, focusing engineering effort on the routes and assets customers actually hit. Tracking before and after with Lighthouse and Vercel Analytics, our Lighthouse score went from 51 to 94, and average desktop Analytics scores moved from 90 to 95.

Tools for finding your hot path

Chrome DevTools is a good starting point for profiling any web app; React Developer Tools narrows that down for React-specific diagnosis. Both produce flame graphs and timelines that expose where render time goes. But they only show a snapshot of a single page load at one moment.

To see which routes matter over time, Vercel's Top Paths report shows which assets your real users download most often and how heavy those payloads are. That reveals which images, static data, and other files deserve optimization first. Top Paths is available on all Vercel plans.

Speeding up the page

JavaScript

JavaScript is usually the heaviest asset a browser has to parse. The less you send, the faster the page gets interactive.

Audit your utility functions. Our isLoggedIn() helper simply reads a document.cookie value — cheap on its own, but we were calling it over 400 times in a single render pass. After restructuring, we cut render time from roughly 270ms to about 90ms.

Cache expensive computations. A slugify function that takes 1-3ms per call sounds harmless, but it was invoked hundreds of times during initial render. Caching the computed results made rendering about 200ms faster.

Know what your imports actually do. Libraries cover many edge cases to serve a broad audience, and that safety adds execution cost. If your specific use case doesn't need those edge cases, a small custom function can be far cheaper.

Lazy load below-the-fold components. Elements outside the viewport on first paint don't need to render immediately. A useIsInViewport hook can defer a heavy child component until the user scrolls near it. In our example, a 200vh spacer keeps <HeavyChildComponent /> out of the initial DOM entirely.

Manage third-party scripts deliberately. Analytics, A/B testing, and other external scripts can drag down LCP and FID. A few techniques limit the damage:

  • Use correct ES Modules imports so bundlers can tree-shake unused code automatically.
  • Some packages, like Stripe, support lazy-loading their script only when needed.
  • Pick the right next/script strategy; lazily loading Google Tag Manager can noticeably improve LCP and FID.

HTML + CSS

Modern browsers parse HTML and CSS quickly, so the potential gains here are smaller — but they still add up.

Remove redundant markup and styles. React's composability also makes it easy to propagate unoptimized code. Cut purposeless wrapper tags in JSX and consolidate repeated CSS into reusable class declarations.

Use Next.js built-in optimizations. The <Image /> component serves the right image dimensions for each device. Next.js also inlines font CSS at build time, eliminating an extra request.

Prefer variable fonts. A traditional font file only holds one face, so a polished UI needs several files. A variable font packs every weight and style into a single file with one @font-face rule.

Don't override browser defaults. Explicitly declaring properties that match default behavior adds bytes without adding any styling. Let the browser's own defaults do that work.

Data-driven performance upkeep

As features accumulate, performance tends to drift. Vercel Analytics and Top Paths give a quick, real-user view of where an application underperforms, which shortens the diagnosis phase and lets developers spend time on fixes rather than hunting for culprits.

We're also working on automated regression reporting for Analytics data, so performance issues surface before they reach your users.