Skip to content
中文Let's talk

Insights ·

Website motion that doesn't slow pages down

Motion on a website should support the information hierarchy, not decorate it. It works best in three places: drawing the eye to key information, giving instant feedback on actions, and showing how content relates when the view changes. Prefer lightweight animation such as movement and opacity, show first-screen content before adding motion, and load large animations or videos only when needed. Respect the system's reduce-motion setting so the page still reads and works without animation, and test on mid-range phones and slow networks before launch.

Many brands want their website to feel alive: an entrance animation on the first screen, elements that appear as you scroll, buttons that react on hover. Done well, motion adds brand character and helps visitors see what matters. Done badly, it slows loading, heats up phones, and visitors leave before they see any content.

Motion should support the information hierarchy, while keeping load performance and accessibility in mind. Here is how we usually approach it on website projects.

1. Decide what each animation is for

Every animation should answer the question: what does it do for the visitor? Motion is useful in roughly three ways:

  • Guiding attention: drawing the eye to key information, such as the positioning line or the main button on the first screen;
  • Feedback: a small change after a click, hover or form submission that tells the visitor the action registered;
  • Showing relationships: when a menu opens, a tab switches or a detail view appears, showing where the new content came from and where it goes back to.

If you cannot say what an animation is for, remove it. The more things move on a page at once, the harder it is to tell what matters.

2. Choose lightweight animation

The same visual effect can cost very different amounts of performance depending on how it is built. Changes in position, scale and opacity are cheap for the browser; constantly changing an element's width, height, layout or shadows easily causes stutter. For large background animations, a short, well-compressed video, or simply a still image, is often better than a long animation sequence.

Keep image and video file sizes in check too. As part of the routine checks described in what to keep doing after your website launches, look at file size and load time whenever new media is added.

3. Show content first, then add motion

Text and key images on the first screen should appear first, with motion layered on once the content has loaded. Do not make visitors stare at a loading animation for several seconds, and do not put key text inside an animation so that it only appears when the animation plays; on a slow connection, visitors would see a blank screen.

Load animation assets below the first screen on demand, when the visitor scrolls near them, so they do not compete with the first screen. For what belongs on the first screen, see what visitors need to see in the first ten seconds.

4. Respect the reduce-motion setting

Phones and computers offer a "reduce motion" setting, and some people feel unwell with large on-screen movement. Your site should read this setting: when it is on, replace entrance animations and parallax scrolling with a simple fade, or show the content directly. Make sure everything can be read and used without motion; animation is a bonus, not a requirement.

5. Test in real conditions before launch

Motion that runs smoothly on a designer's computer may not run smoothly on a visitor's phone. Before launch, test in at least two conditions:

  1. A mid-range Android phone: check that scrolling is smooth and the phone does not heat up noticeably;
  2. A slow network: check how quickly first-screen text appears, and that the page is complete and usable before animations finish loading.

Summary

Start by deciding what motion is for: guiding attention, giving feedback or showing relationships. Build it in a lightweight way, show content first and add motion after, respect the reduce-motion setting, and test on mid-range phones and slow networks before launch. On brand websites, we plan interaction and motion together with visuals and information architecture; see digital experience.

← All articles