A performance budget for marketing sites
The numbers we hold ourselves to, and the habits that keep every page fast.
Daniel Okafor1 min read
Speed is a feature, and for marketing sites it is often the most important one. A slow page loses visitors before they read the headline. We set a performance budget on day one and check it on every pull request.
The numbers we hold ourselves to
- Largest contentful paint under 1.5 seconds on a mid-range phone
- Cumulative layout shift below 0.05
- Under 150 KB of JavaScript on the home page
- A Lighthouse performance score of 95 or more
Server first, client last
With the Next.js App Router, almost everything renders on the server. We only add client JavaScript at the leaves: a carousel, a toggle, a form. Animations load with the blocks that use them, and turn off entirely when a block does not need them.
Images do most of the work
Images are usually the heaviest thing on a page. Sanity’s image pipeline serves modern formats at exactly the size each layout needs, with a blurred placeholder while the full image loads.
Every kilobyte has to earn its place on the page.
Make it a habit
Budgets only work if someone checks them. We run Lighthouse in CI, review bundle sizes in every pull request, and share a short performance report with clients each month.
Written by
Daniel Okafor
Engineering Lead
Daniel builds the systems behind our sites, from content models in Sanity to performance budgets in Next.js. He has shipped more than sixty production sites and still reads every Lighthouse report.
