1550138 - Load DS feed image via idle event

Status: RESOLVED DUPLICATE of bug 1576223

(Firefox :: New Tab Page, defect, P2)

Description

[Scott [:thecount] Downe]

Right now we load image when there is an intersection observer event. I think we can also load them on idle, so it wouldn't impact performance, but also if the user scrolls after a second or two, the images are going to be ready.

Comment 1

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/activity-stream/pull/5001

Comment 2

[Jessilyn Davis]

Perceived performance improvement suggestion from mconley. Marking as P2 since it'll likely take time to refactor this old PR request, and it's not a blocker to going live.

Downside: It'll force everyone to download all images even if they don't scroll down.

There might be a better approach (ie start to download images as you get close to them). Marking as P2, and we'll reassess with roadmap planning.

Comment 3

[Gavin Suntop [:gvn] (they/them)]

Since we landed optimistic image loading this might not be necessary. We should see if optimistic had any negative impact on initial load time, and if so maybe switch it off and move toward this solution instead.

Comment 4

[Gavin Suntop [:gvn] (they/them)]

I think this can morph slightly: we rolled back optimistic loading due to perf regression, but we could add it back and use the idle event as the trigger to initiate optimistic loading instead of doing it right away. I believe that would be the best of both worlds here.

Comment 5

[Scott [:thecount] Downe]

Fixed in https://bugzilla.mozilla.org/show_bug.cgi?id=1576223

The solution is similar to what gvn suggested above. We did:

1. Initially we only load above the fold cards and images.
2. We setup an idle for all the below the fold cards. If the user scrolls before the idle, solution 1 happens for the new content, so content can always be seen.
3. On idle we also now allow below the fold images to start loading 540px sooner. So if you start scrolling after idle, things should be ready.
4. Add a slight transition to below the fold images that load just in case it's seen by the user via a fast scroll or a slow load.