Does motion slow a website down?

What makes website motion slow?

• Blocking the first paint. If the page waits for an animation script or stylesheet before it shows anything, visitors stare at a blank screen.
• Hiding content until it animates. Text set to invisible until a script reveals it counts as missing until then.
• Heavy libraries. A full animation or 3D library can add hundreds of kilobytes for one effect.
• Layout-moving animation. Animating width, height or position makes the browser redo the layout every frame.

What makes it fast?

• The page and its text paint first. Motion loads after and adds to what is already visible.
• Animations use transform and opacity, which the graphics chip handles.
• Scroll effects use the browser's built-in scroll timelines where they exist, with no script.
• Effects pause when they scroll off screen.
• Visitors who turn motion off get a still version.

How do you check a site's speed?

Run the page through Google PageSpeed Insights on mobile. Look at three numbers: Performance 90 or higher, Largest Contentful Paint 2.5 seconds or less, and Cumulative Layout Shift 0.1 or less. Run it three times and take the middle result, because single runs vary.

What does prefers-reduced-motion do?

It is a setting on phones and computers that asks websites to cut back on animation. People turn it on because motion makes them dizzy or distracts them. A well-built site reads the setting and shows a calm, still version. Every Local/Current site does.

Does this site practice what it says?

Yes. The localcurrent.ai home page is one continuous WebGL camera move down the San Lorenzo River to Monterey Bay, and it is built to score 90 or higher on Google's mobile speed test. The headline and button show before the river starts moving.

Thresholds from Google's Core Web Vitals guidance (web.dev), checked October 2026.

See how a Local/Current motion makeover works or what a redesign costs in Santa Cruz.