I have created a holding page with an embedded Spline.design 3D interactive web element using HTML embeds. I have three different versions of the embedded element for the different breakpoints with different scaling and layout of the 3d objects to best fit the screen format. This is achieved through setting them as ‘display: none’ on breakpoints they shouldn’t be visible on.
The problem is that even though they aren’t being displayed, all 3 are loading on every breakpoint making the website too difficult and slow to load. I ideally need it to load just the one for the desired breakpoint. Does anybody know of a better way to make this work? Any other extra tips at making something 3D like this load best would be greatly appreciated!
Here is my site Read-Only: Read-only link