# Image rendering latency in weweb

**URL:** <https://community.weweb.io/t/image-rendering-latency-in-weweb/6770>\
**Category:** Ask us anything\
**Created:** [February 2, 2024, 4:47pm UTC](https://community.weweb.io/t/image-rendering-latency-in-weweb/6770 "2024-02-02T16:47:13Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![rayanenocode](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/rayanenocode/32/13166_2.png) [@rayanenocode](https://community.weweb.io/u/rayanenocode)\
**Post date:** [February 2, 2024, 4:47pm UTC](https://community.weweb.io/t/image-rendering-latency-in-weweb/6770/1 "2024-02-02T16:47:13Z")

</div>

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).

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/22a42db4fea47d755480b42ed6f6ff248c211b01.jpeg)

---

<div class="post-metadata">

**Author:** ![rayanenocode](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/rayanenocode/32/13166_2.png) [@rayanenocode](https://community.weweb.io/u/rayanenocode)\
**Post date:** [February 2, 2024, 4:49pm UTC](https://community.weweb.io/t/image-rendering-latency-in-weweb/6770/2 "2024-02-02T16:49:38Z")

</div>

Maybe it’s me who’s too manic when it’s totally normal🥲

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [February 2, 2024, 5:20pm UTC](https://community.weweb.io/t/image-rendering-latency-in-weweb/6770/3 "2024-02-02T17:20:53Z")

</div>

Depends on how you pull the images in and everything

---

<div class="post-metadata">

**Author:** ![rayanenocode](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/rayanenocode/32/13166_2.png) [@rayanenocode](https://community.weweb.io/u/rayanenocode)\
**Post date:** [February 2, 2024, 5:28pm UTC](https://community.weweb.io/t/image-rendering-latency-in-weweb/6770/4 "2024-02-02T17:28:43Z")

</div>

Well, basically it’s a dynamic page with a get by id collection, which I fetch on page load

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [February 2, 2024, 6:24pm UTC](https://community.weweb.io/t/image-rendering-latency-in-weweb/6770/5 "2024-02-02T18:24:24Z")

</div>

> [@rayanenocode](#):
>
> Because there are other sites where rendering is instantaneous.

> [@rayanenocode](#):
>
> 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

---

<div class="post-metadata">

**Author:** ![rayanenocode](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/rayanenocode/32/13166_2.png) [@rayanenocode](https://community.weweb.io/u/rayanenocode)\
**Post date:** [February 2, 2024, 7:10pm UTC](https://community.weweb.io/t/image-rendering-latency-in-weweb/6770/6 "2024-02-02T19:10:35Z")

</div>

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/](https://www.streamplus.app/)

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [February 2, 2024, 8:04pm UTC](https://community.weweb.io/t/image-rendering-latency-in-weweb/6770/7 "2024-02-02T20:04:07Z")

</div>

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/](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

---

<div class="post-metadata">

**Author:** ![rayanenocode](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/rayanenocode/32/13166_2.png) [@rayanenocode](https://community.weweb.io/u/rayanenocode)\
**Post date:** [February 2, 2024, 11:33pm UTC](https://community.weweb.io/t/image-rendering-latency-in-weweb/6770/8 "2024-02-02T23:33:57Z")

</div>

Hello @dorilama thanks for your help! I’ve made a video that explains it in more detail, I think it might help.

> [@Need help, speed rendering of the page is really slow (VIDEO)](https://community.weweb.io/t/need-help-speed-rendering-of-the-page-is-really-slow-video/6782):
>
> Hi everyone, I made a video that shows the loading speed of my app which is really slow I do not understand why even after optimizing everything possible. If anyone has a solution thank you… Video :
