CSS Background performance

Question

I'm looking to optimise performance of a website I am building so I am looking for the best approach to a particular issue.

I have 25 <div>'s, each with a seperate background image. each <div> has:

position: fixed; 
width: 100%; 
height: 100%;

This makes the images stack over each other.

Some of the images are relatively large. more than 500x500. In terms of file size, each is roughly 25kb.

The issue i'm having is that when i open chrome dev tools to check the framerate, i'm getting frames that are taking up to 50ms, which mostly consists of repainting.

50ms is a high number. optimally it is 16ms or less. I'm looking to animate this, but i've already gone over my 'budget' here.

Is there any particular reason why my repaints would be so high? is there any way to mitigate this with multiple CSS backgrounds or do I have to find another solution?

Answer 1

Finally figured it out.

SVG's inherently have a slower paint time than other image formats. after switching to PNG's the framerate is now an average 10ms, rather than 50ms.

Not sure the workings behind why this actually happens.

Answer 2

There are ways like:

1. If you are using images just for color then use color with the help of CSS
2. Combine all the images to make them one, and position the images for different section by CSS
3. Cache call the image CSS and JavaScript so it cannot reload every time