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.
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.
- Define max display width before export.
- Use next/image with explicit sizes.
- Lazy-load below-the-fold media; prioritize the LCP candidate.
- Avoid autoplay video in the first viewport unless it is the product.
The budget we keep
| Budget | Target | Why |
|---|---|---|
| LCP | < 2.5s on mid mobile | Story starts on time |
| JS (compressed) | Keep islands lean | Main thread stays free |
| Fonts | 2 families max | Text is the interface |
| Third parties | Named + justified | Every 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.
Related
