Rich, animated websites have a reputation for being slow. Ours have a median Largest Contentful Paint under a second, and it's not because of one clever trick — it's a handful of boring habits applied every time.
Start static, stay static
With Cache Components, the default is a prerendered static shell that streams dynamic parts in. We design pages so almost everything lives in that shell: content from the CMS is cached, and only genuinely personal data is fetched at request time.
- Prerender every marketing route at build time.
- Use generateStaticParams for every content collection.
- Keep client components at the leaves of the tree.
- Lazy-load anything below the fold that ships JavaScript.
Images do the heavy lifting
Images are usually the LCP element, so they get the most care: AVIF first, correct sizes attributes, the hero preloaded and nothing else. A single wrong sizes value can ship a 2,400px image to a phone.
Performance budgets aren't a constraint on creativity. They're the brief.
Animate the cheap properties
Transforms and opacity only, wherever possible. Scroll-linked animation runs off a single requestAnimationFrame loop shared by smooth scrolling and ScrollTrigger, so we never fight the browser for frames.
