Premium and fast: animation without hurting Core Web Vitals
High-end websites don't have to be slow. How we keep interactive marketing sites within performance budgets.
A premium website is usually where performance goes to die: video backgrounds, heavy animation libraries, carousels and five tracking scripts. It doesn't have to be.
Render on the server
Static or server-rendered HTML gives the browser something meaningful to paint immediately. Interactive pieces hydrate on their own, not the whole page.
Animate with CSS first
Transforms and opacity are cheap. Most scroll reveals and hover states need no JavaScript at all, and the ones that do can share a single IntersectionObserver.
Draw interfaces, don't screenshot them
Product mockups built as HTML and SVG are sharper than images at every size, weigh a fraction as much, and can become interactive.
Budget and enforce
Set budgets for JavaScript, LCP and CLS, and check them in CI. A budget nobody enforces is a wish.
Respect reduced motion
Every animation should have a reduced-motion path. It's an accessibility requirement and a good test of whether the animation was carrying meaning.
All posts