Web Development

How We Build High-Performance Marketing Websites

How CATALYST ships marketing sites that stay fast: content architecture, Next.js rendering choices, image strategy, and the performance budget we refuse to break.

Lagan BajajUpdated Aug 12, 20264 min read
Editorial abstract for high-performance marketing website craft

A marketing website has one job under pressure: make the right person understand the offer and act. Speed is part of that job. If the hero paints late, the story never starts. Here is how we build marketing sites that stay sharp after launch — not only on the Lighthouse run the day before handoff.

Start with the job, not the template

We define the primary conversion and the pages that earn it. Everything else is secondary. That sounds strategic, but it is also a performance decision: fewer vanity sections means fewer images, fewer fonts, fewer scripts.

  • One primary CTA per viewport whenever possible.
  • No carousel of messages when one clear line will do.
  • Motion only where it clarifies hierarchy — not as wallpaper.

Rendering choices in Next.js

Most marketing pages should be static or ISR. We keep client JavaScript for interaction islands — forms, filters, light animation — not for rendering the article of the brand story. Server Components are the default; client boundaries are intentional.

// Prefer server-rendered content; isolate interactivity
export default function PricingPage() {
  return (
    <main>
      <Hero />
      <PricingTable />
      <ContactForm /> {/* client island */}
    </main>
  );
}

Images as a product decision

We size images to their layout slot, prefer modern formats, and never ship a 3× desktop photograph into a mobile hero “just in case.” Art direction beats generic stock crops — fewer bytes, stronger brand.

  1. Define max display width before export.
  2. Use next/image with explicit sizes.
  3. Lazy-load below-the-fold media; prioritize the LCP candidate.
  4. Avoid autoplay video in the first viewport unless it is the product.

The budget we keep

BudgetTargetWhy
LCP< 2.5s on mid mobileStory starts on time
JS (compressed)Keep islands leanMain thread stays free
Fonts2 families maxText is the interface
Third partiesNamed + justifiedEvery tag is a dependency

Performance is not a report. It is a constraint that shapes the design — the same way a press shapes type.

When the site launches, we leave measurement on: real-user timing, error rates, and a short list of pages that must never regress. A fast launch that decays for six months was never finished.