Background-size:cover lagging

Question

So I have this issue, on my website i have many sections with background-size:cover property on them, and that causes my website to lag like hell. Is there any solution to contain the 100% width of the picture on every device, but to get rid of website lagging? I've searched some other websites and found, the object-fit:cover on the img tags, but can't seem to implement that on my webpage. Also I compressed every image, so it takes less space. Any answer will be much of a help. Thanks in advance.

The Website

Answer 1

Well first of all your website loads fast for me (but I have a really fast connection). But nevertheless your images are way too big for your needs. For example the box-2.jpg has a size: 3500 x 2333 px . You should resize your images.

Just compressing the images wont help much here, because the size still remains and compressing too much is also bad because you always lose quality. For example the google speed insights always recommends to compress images to the maximum which is not the way to go.

But for you google speed insights is a good way to go to find other elememts which could be optimized.