Background SVG causing slow jitter

Hello,

I have a 10kb background svg that is causing sluggish scroll.

image: https://uploads-ssl.webflow.com/617175126a588a060b288b3b/617228d8addfc1f2a659150c_bg-dark.svg

site: https://scholarsite-v2.webflow.io/scholarsite-students

I know the site images are rather large as well (dealing with this later), but I believe I’ve narrowed the issue down to this background svg. I imagine it would be better if I performed eager load instead of lazy load but I don’t see that as an option for background images.

I couldn’t find any great tutorials on best practices when loading up a large tiling background like I have so if anyone can point in the right direction here would be great!


Here is my site Read-Only: https://preview.webflow.com/preview/scholarsite-v2?utm_medium=preview_link&utm_source=designer&utm_content=scholarsite-v2&preview=e6fdee1682e612de8fd646cff2ef2d18&pageId=617227c9260fb6016478a772&workflow=preview

My current workaround uses the same image as a PNG >300kb which has slower initial load but doesn’t cause the scroll jitter like the SVG does. Curiouser and curiouser…

Anyways if anyone has any thoughts I’m all ears. Would love to use a 10kb file over a 300kb one.

Hello Keegan,
Your live link is not working.
I have had a quick look and see the judder.
There is no option for background lazy loading.
If you hide an image it still downloads its.
I think the problem is how you display the image, I changed it from custom to contain and it appears to have resolve the judder.
image

If this fixes your issue, please tick solution and show the love with ticking the heart. Keeps the forum tidy.

1 Like

thanks @iDATUS but if I change to contain the image will scale down on larger screen and unfortunately it doesn’t tile well. I did change to cover and that seemed to help some.