Hi, I registered here to ask about MongoDB, but exploring the forums for a minute I decided to start with another topic.
These curvy shapes in the background make the forum super slow, at least on my mac (Safari). It’s a 4098x10726px image. I experimented and removing the background makes the website snappy again. Why would you guys use such a huge raster image instead of putting an SVG there? Like come on…
dark-bg.png (4098×10726) (mdb-community.s3.amazonaws.com)
To pinpoint a culprit, at least this one for the dark theme. I added it to my blocked url list and cleared the forum page cache. now the forum sped up.
It’s because it’s a 8k image, I personally think going to a 1080 image would be much smoother imho.
But why? This image should be a SVG file, it’s a simple shape.
I think it can even be achieved by pure CSS and would be much faster than loading an image file.
Something that may be beneficial for responsive design may be to implement 1080, 2K, and 4K versions of the background to be loaded based upon device specs/ natively set resolutions.
I’ve verified on a test Android A21 that the forums sometimes don’t even load up on it.
Likewise using a Dell 740 USFF desktop the forums often times do need to be refreshed a few times to load to view, this may be due to the caching/loading of the larger image.
This can be adjusted by using properties to check the screen resolution set on the client, and loading the website as appropriate to it using the assets specified for that resolution.
Because some may not have full knowledge of responsive design principles. Everyone has something to learn and grow, the background can easily be done with just CSS or tailwind css, you are correct.
But if they wish to use images, a series of much lower res images would be more ideal. Or just using CSS3 and flex box.
By the way, I tested on Chrome and Firefox too and it’s much better there. Looks like Safari handles backgrounds differently. I also tested with Safari on MacBooks M1/M2 and it’s not perfect, but acceptable. That being said, using this big image as the background is a bad idea.
Hi All,
Thanks for raising these details. I’ll check this one out with the responsible team and update here accordingly.
Just to confirm @Bear_Town, what particular load times are you experiencing on Safari (and if possible, Chrome / Firefox)? I’ll do some testing on my side too but have only used Chrome to this point.
Regards,
Jason
@Jason_Tran load times for safari vary, as does support. From iPhone on Safari when you go to make a post, or reply, there’s no text features available. You can’t select formatting or anything of the kind, and the text boxes of what’s written can be limited/not in full.
Load times on mobile can be upwards of 12 seconds, for Safari on a Mac, it varies as well. With an Intel i5 processor on an older Mac mini it can take upwards of 15 to 20 seconds (2013) and on M1 it can take up to 7 seconds sometimes.
I’m not talking about load times here. I mean the performance of the client-side of the website, particularly scrolling. It feels like I was using some ancient device, framerate drops to about 5 or so.
Thanks for clarifying @Bear_Town , i’ll relay this information across as well as the information @Brock has advised.
Hi @Jason_Tran ,
In case you missed in the crowd, I included the one causing the issue in the dark theme:
In the performance tab of developer tools, with this image, in 10 seconds test, almost half the time is spent on the Painting stage with almost no idle time.
I added it to the blocked URL list. Now, painting takes only about 1 sec and idle time is about 5 sec, half the time browsing. (the file should be cleared from the cache)
Sorry for the delay guys - I’ve been advised some changes were made regarding the background. Please update here if you’re still having issues.
It’s definitely better, but it’s still far from perfect. When I remove the background, it’s much smoother. It looks like it was not only the image, but also the script repositioning it to blame.
