Slow render glitching issue?

https://captainsuds.com.au/ When scrolling up/down on this site does anyone notice a large section is completely white before it renders in slower than would be expected? I suspect the large cloud background might be slow to load?
12 Replies
ἔρως
ἔρως4w ago
yes, it is slow it's an almost 2mb jpeg try using a webp
Zach
Zach4w ago
is it slow just when loading or also when scrolling? yea I'll reduce the size
ἔρως
ἔρως4w ago
on my pc, only on load
Zach
Zach4w ago
hmmm very slow for me hjust when scrolling
ἔρως
ἔρως4w ago
for me, it shows the blue background by the way, try avif
Zach
Zach4w ago
yea I need to find a library that optimises the images for me somehow with multiple resolutions as well depending on the device
ἔρως
ἔρως4w ago
squoosh.app but you do it manually you can try imagemagick
Zach
Zach4w ago
yea I essentially want squoosh but in the build step
ἔρως
ἔρως4w ago
i know what you mean
clevermissfox
clevermissfox4w ago
There's a squoosh cli to bulk optimize but is no longer updated or supported. Have to use node v. 16 ( if I remember correctly ) but I had a whole folder I had to optimize a few weeks ago and it was super helpful once I figured out the versions.
ἔρως
ἔρως4w ago
that is interesting personally, i would try something with imagemagick
capt_uhu
capt_uhu4w ago
preloading the big css background image with a <link> tag might help as well:
<link rel="preload" href="images.jpeg" as="image" type="image/jpeg">
<link rel="preload" href="images.jpeg" as="image" type="image/jpeg">
Want results from more Discord servers?
Add your server