Aggressive caching of images can make site slow

[sam365724]

Issue Summary

With many images in posts that show up on the initial page after login, lemmy is caching all those images (from browser requests). Even if the user does not open these posts. If you have hundreds of images, this really slows down the initial page load.

Is there a way to reduce this caching and thus reduce requests and traffic to nginx/lemmy-backend?

Steps to Reproduce

1. Crete 10 posts with each one 10-30 images
2. Load initial page
3. See 300 images being loaded in the background. The problem is also the order of the images: Smaller icons for the communities are sometimes loaded at the very end which is strange, as these should be seen by the user earlier.

Technical details

Lemmy 0.16.6

[Nutomic]

Could you share an url where this is happening? I tried with https://lemmy.ml/c/memes which has many image posts, but Firefox dev tools only show 46 requests and 3.76 MB / 1.98 MB transferred (cache disabled).

[dessalines]

Is this from a community or home, or from the post page?

[sam365724]

It's from home. But i don't think it's a an issue anymore. We can close it for now.

[sam365724]

I think this is still an issue and not only because of the images, but also because all posts are completely fetched from the home or any community list view. Would there be an option to only fetch the first x characters of the posts for the list view? Also on my mobile I experience a slow, almost freezing view when switching to and back to the list of posts.

[Nutomic]

You need to provide specific steps to reproduce this, including a specific url where this happens. Also mention which browser, os etc you are using.

[dessalines]

The home.tsx shouldn't be loading any images other that the one linked in the url. The post bodies might contain images but those aren't rendered as markdown.

[sam365724]

@dessalines Well that is not what lemmy does. Tippy.esm.js seems to trigger the download:

The post has two images:

Can tippy be configured or disabled maybe by config?

I guess that here md.render is fetching all content?

lemmy-ui/src/shared/components/post/post-listing.tsx

Line 393 in 80be834

data-tippy-content={md.render(body)}

[sam365724]

I can confirm that removing the tippy feature from the post (commenting those lines in post-listing.tsx) list does workaround this problem.

[dessalines]

Hrm... didn't think about that. Might need to make sure tippy doesn't do html rendering.