It's a myth that fast websites have to look like a text document from 1998. You can absolutely have gorgeous animations, smooth transitions, and modern design elements like "Glass UI" on your HubSpot site. The secret is knowing how to animate, so the browser doesn't have to work itself to death. Here is the recipe for premium design that doesn't kill speed.
Performant web design is about creating visually appealing websites using code that requires minimal processing power. This means avoiding heavy CSS properties that trigger layout shifts, and instead using animations that the graphics card (GPU) can handle efficiently.
When a button changes color as you hover your mouse over it, it happens using CSS animations. A common (and lazy) way to code this is to use the command transition: all.
The problem is that the browser then has to check all possible properties to see if anything has changed. This requires unnecessarily high computing power. The solution is to be specific. Instead of all, we tell the browser exactly what should happen: transition: background-color 0.3s ease. It's a small change in the code, but a massive win for performance.
Some animations are much heavier than others. If you animate width, height, or margins, the browser has to redraw the entire page for every frame in the animation. This leads to a choppy experience.
If, on the other hand, you animate the properties transform (to move or scale things) and opacity (to make things transparent), the job is sent directly to the graphics card (GPU). The result is silky smooth animations at 60 frames per second, without the website becoming slow.
Not everyone loves animations. For some users, too much movement on the screen can cause dizziness or discomfort.
That's why we added support for prefers-reduced-motion in all animated modules. If the user has set their operating system to reduce motion, the website will automatically turn off unnecessary animations. This isn't just good performance; it's a good and inclusive user experience.
Good design builds trust, especially in B2B. You shouldn't have to sacrifice your brand to satisfy Google's speed requirements. By coding animations and modern UI elements the right way, you get to have your cake and eat it too: A website that looks expensive, but loads cheaply and quickly.
→ optimize HubSpot performance.
→ HubSpot implementation when the platform should support sales and marketing.
→ How We Optimized Images Across a HubSpot CMS Theme
→ Third-Party Scripts Are Killing Your Landing Page Speed
Animations only make the website slower if they are coded incorrectly. If you animate layout properties (like width and margins), the site becomes slow. If you use GPU-friendly properties (like transform and opacity), speed is not significantly affected.
prefers-reduced-motion is a setting in the operating system (like Windows or macOS) where users can request less movement on the screen. Good websites respect this and automatically turn off heavy animations.
You avoid choppy animations by using the CSS properties transform and opacity. Then the graphics card takes care of the job, which provides a smooth and fluid experience for the user.