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
ἔρως
ἔρως3mo ago
yes, it is slow it's an almost 2mb jpeg try using a webp
Zach
ZachOP3mo ago
is it slow just when loading or also when scrolling? yea I'll reduce the size
ἔρως
ἔρως3mo ago
on my pc, only on load
Zach
ZachOP3mo ago
hmmm very slow for me hjust when scrolling
ἔρως
ἔρως3mo ago
for me, it shows the blue background by the way, try avif
Zach
ZachOP3mo ago
yea I need to find a library that optimises the images for me somehow with multiple resolutions as well depending on the device
ἔρως
ἔρως3mo ago
squoosh.app but you do it manually you can try imagemagick
Zach
ZachOP3mo ago
yea I essentially want squoosh but in the build step
ἔρως
ἔρως3mo ago
i know what you mean
clevermissfox
clevermissfox3mo 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.
ἔρως
ἔρως3mo ago
that is interesting personally, i would try something with imagemagick
capt_uhu
capt_uhu3mo 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