Hi everyone, I wanted to know is it normal that the image rendering always takes 1 to 2 seconds? Because even by compressing these images to 90kb and at an ultra low resolution there is still a latency in the image rendering. I wanted to know if this is totally normal or not? Because there are other sites where rendering is instantaneous. (By the way, the image is a div background for ui reason, not an image element, so I don’t know if that’s the reason).
Maybe it’s me who’s too manic when it’s totally normal🥲
Depends on how you pull the images in and everything
1 Like
Well, basically it’s a dynamic page with a get by id collection, which I fetch on page load
you see the delay because your app loads, then your collection loads, then your picture loads. It’s not about image optimization, it’s request waterfall
1 Like
What should be done in this case to optimize it? For faster loading times? For example, on a demo site made with weweb, images load instantly https://www.streamplus.app/
I wouldn’t say load instantly: on a fast wifi it has similar times to what you describe, the first api request for data starts after 4s and then you have the requests for the images. Now almost all the images are cached and served by a service worker (not sure if this is standard behaviour of weweb or if it has been added) so when you load the page the second time the images are loaded instantly after the first delay for the initial api request. And the average image size is less than 20kb. Webp helps a lot and is probably the only other image optimization needed for you.
Instant is more like something like https://movie-app-with-remix.vercel.app/ (the first image starts loading at 0.5s) but this is with code and server rendered, so it’s a completely different tech.
try with webp when you optimize the images and see if the result is better
Hello @dorilama thanks for your help! I’ve made a video that explains it in more detail, I think it might help.