Animating a website without slowing it down

A headline that settles, photos that slide in as they arrive, a background that breathes: an animated page holds the eye. It can also become slow, stutter, or jump under the finger just as you aim for a button. The difference comes down to a few technical choices, always the same.

Here they are, with what Google measures. It says so itself: the relevance of the content comes first, and a good page experience can help break ties between equally useful pages (Google Search Central, 2026).

What the browser animates effortlessly

To display a page, the browser does three things: it calculates the place of each element (layout), it draws the pixels (paint), then it assembles the layers (compositing). An animation that touches layout redoes all three steps at every frame; an animation that only touches compositing skips the first two.

web.dev sums it up: animate transform and opacity, and avoid what triggers layout or paint. In practice:

• to slide an element, move it with transform (translate), rather than changing top or left;
• to enlarge it, use transform (scale), rather than its width and height;
• to make it appear, play on opacity;
• avoid animating a drop shadow: it forces the browser to repaint at every frame (web.dev).

The will-change property prepares an element to move, but creates a layer that has a cost too. web.dev advises using it only when a problem has been observed.

The flaw is widespread: 40% of mobile pages contain at least one “non-composited” animation, which can’t make do with compositing (Web Almanac 2025).

Making nothing jump: CLS

Cumulative Layout Shift (CLS) measures elements that move without the visitor asking: the paragraph that drops while you read it, the button that slips away under your finger. Google rates it good at 0.1 or less, poor beyond 0.25, when three visits out of four reach the threshold (the 75th percentile, web.dev). 81% of sites reach the good threshold on mobile (Web Almanac 2025).

Animations come into it through three doors:

1. Changing an element’s top, left, width or height moves it, often pushes its neighbors, and counts as a shift. An animation with transform doesn’t count (web.dev).
2. Making a block appear that had no reserved space: a banner at the top of the page, an image without dimensions. Reserve the space in advance, with the image’s width and height or an aspect ratio.
3. Animating while scrolling. Shifts that occur less than half a second after a click, a tap or a key press are forgiven; scrolling isn’t one of them. So a block that grows as you scroll the page counts in full.

The rule fits in one sentence: an element that appears does so in its place, fading in or sliding with transform, without changing size.

Responding fast: INP

Interaction to Next Paint (INP) measures the time between a click, a tap or a key press and the next frame on screen, over the whole visit. Google rates it good at 200 milliseconds or less, poor beyond 500 (web.dev).

The usual culprit is the browser’s main thread, the one that runs JavaScript and responds to gestures. Busy with long tasks, it delays the response when the visitor touches a button (web.dev). A script that recalculates the position of every element at each wheel movement, to know what to animate, is the classic example. MDN points out: these calculations run on the main thread, and a single such routine can be enough to slow down the page.

To trigger an animation when an element enters the screen, the Intersection Observer API notifies the script at the right moment, without making it work at every movement (MDN).

The phone is the real testing ground: 97% of sites have a good INP on desktop, only 77% on mobile (Web Almanac 2025). Test on a modest phone, as well as your own.

Scroll-driven animations in CSS

CSS can now link an animation to scrolling, without a line of JavaScript. The animation-timeline property accepts two references (MDN):

• scroll() follows progress through the page: a reading bar that fills up, a background that changes hue;
• view() follows an element’s passage through the screen: a photo that reveals itself as it enters, a headline that settles.

Their appeal is smoothness. Chrome compared a progress bar written in JavaScript and the same one in CSS, under heavy load: the JavaScript version stuttered, the CSS version kept up with the scrolling (Chrome for Developers, 2023).

Their limit is support. As of October 22, 2026, MDN still classes them as limited availability: Chrome and Edge have supported them since July 2023, Safari since its version 26 of September 2025, and Firefox is preparing them (its version 159, according to MDN’s compatibility data). Treat them as a bonus:

• the page must be complete and readable without them;
• test support with @supports before applying them;
• put them under the prefers-reduced-motion: no-preference condition, to respect visitors who have asked for less animation (see accessible motion).

Video rather than GIF

The animated GIF is an old, heavy format. In web.dev’s example, a 3.7 MB GIF becomes a 551 KB MP4 video, or a 341 KB WebM, for the same animation. A short video that plays on its own, in a loop, without sound and inline reproduces the GIF’s effect for a fraction of the weight.

For a video background, a few more rules:

• a poster, the still image shown before the film. For a video, Google keeps for the Largest Contentful Paint the earlier of two moments: the poster loaded or the first frame of the film, and it rates good a display within 2.5 seconds at most (web.dev);
• no sound track: a background doesn’t need one;
• a width suited to the screen that receives it, and careful encoding;
• a short loop, discreet, that doesn’t fight with the headline.

Testing before publishing

Chrome’s developer tools show what costs: the Performance panel records the animation, paint flashing reveals what is redrawn, and the frame counter flags dropped frames (web.dev). Slow down the processor in these tools to see the page as an entry-level phone would.

Google’s thresholds are measured on real visits, at the 75th percentile: a test on your computer gives a first idea, and the verdict comes from your visitors. The details of the three measurements are in our article on Core Web Vitals.

In the 29webs studio, the background video is re-encoded and slimmed down, without a sound track, and paired with a poster; it fades away if visitors have asked for less animation, and the poster stays.

In short: animate transform and opacity, reserve the space for what arrives, keep the main thread free for clicks, and keep scroll-driven animations in CSS as a bonus. Replace GIFs with video, and always give an animated background a poster.