Dev - OpenCollective Image Lag

[pierreneter]

Location: Vietnam,
My speed:

Most of the time it takes to load the home page from the avatars of the backer.
Avatars are provided from opencollective and we can not manage the cache settings on the header.
Of course, these avatars will also be able to change frequently, so we should not cache it.

I think browser cache management is just a temporary solution.
For the first time, when the cache is not saved it still takes a lot of time to load the page.
So, skip the cache control problem.

We really need to solve this problem in a different way.

So...

What is the best way for this?

[skipjack]

@pierreneter I'll add a note about this in #1525, but I'm really not sure what we can do to resolve this seeing as were not serving the content. Being an open source project, there's only so much we can do in terms of hosting infrastructure and in this case we aren't even serving those images ourselves (as you pointed out). Also, the page is interactive/scrollable before those images load (in my experience at least) so I'm not sure how much we gain by refactoring.

For the reasons listed above, my initial inclination was to close this and mark as wontfix so we can keep the discussions focused on content improvements but, with #1400 in progress (and hopefully #1525 soon as well) I think another load time optimization wouldn't hurt.

What do you think of this approach? We could use a placeholder image and defer loading the rest until after the initial page load. It would be nice if <img> tags supported a defer attribute out of the box but I'm not sure anything like that exists as of yet.

I am going to move this to a note in #1525, but feel free to keep discussing here and potentially open a PR. Once we've plowed through a bit more of the content-related backlog, I wouldn't be against re-opening as long as it stays active.

Also note that you should have gotten/be getting invites to be a collaborator and join our slack channel. Thanks again for your work so far!

[pierreneter]

About this issue, I think I should focus on finishing #1400 and #1525 before coming back to it.
Thank you for making me part of the team.

Deferring images is a good way. We will touch upon it after completing the unfinished work that we are doing and discuss it further.

[TheDutchCoder]

You could make a React component that takes and image source and then when scrolled into view (or some other boolean), lazy-loads the image and fades it in.

This would essentially defer the image fetch, because browsers normally identify img elements and give high priority to their sources, which could lead to a perceived slower connection.

Not loading images at all until they're needed might be a more elegant solution, but you'd need a method to help you determine if an element is in view.