How we get Next.js sites to a 0.6s Largest Contentful Paint

Speed is a feature — and on the modern web it's the feature that decides whether visitors stay. Here's the exact playbook we use on every InfraAlly build.

1. Render on the server, ship less JavaScript

React Server Components let us render most of a page on the server and ship zero JavaScript for static sections. Interactive islands — menus, forms, toggles — are the only client code.

• Keep data fetching in server components
• Push "use client" as deep into the tree as possible
• Audit bundles on every pull request

2. Treat images as a pipeline

Serve AVIF with WebP fallback, size images responsively and lazy-load everything below the fold. The hero image gets priority so the browser fetches it immediately.

3. Fonts without layout shift

Self-host variable fonts, subset them and use font-display: swap with size-adjusted fallbacks. The result: no invisible text and zero CLS.

4. Cache at every layer

Static generation with incremental revalidation, a CDN in front, and object caching behind. Most requests never touch the database.

The fastest request is the one you never make.

5. Enforce a performance budget

We add Lighthouse CI to the pipeline with hard budgets. If a change regresses LCP by more than 100ms, the build fails. That's how sites stay fast after launch.