Solution

For the initial case with carousels, it ended up pretty quick and easy — we removed the animation to avoid any additional scaling resource consumption.

However, I wanted to investigate the case a bit deeper:

On clusterjobs.de, we have a job offers list with lots of companies’ logos that are lazy-loaded.

The first attempt to improve loading placeholders’ performance was moving the animation keyframes to their own composite layer with translateZ(0) . In simple words, using that will make the browser use GPU for the animation and not CPU.

The advice itself was given for this Stack Overflow question.

Also, there is this good article about how GPU is used for browser animations. Disclaimer —there are a lot of caveats there as well, the main being memory consumption.

In the end, between performance and user experience, we chose performance and removed animations completely but increased the threshold for images to load.

Lazy loaded images on Slow 3G throttled network

You can check the experience here: clusterjobs.de/search/react berlin. The idea is that when an image reaches 200px at the user’s viewport’s lowest point, then loading starts so it will be available for the user much sooner.

The example above is for the mobile network but without a throttle, there is no actual flickering and the fact that it is lazy loaded is not visible.

For that effect, you can use the lazysizes library.