Page going blank when scrolling fast

I am developing an app with a heavily loaded home page (like the one from deliveroo) and I noticed that if I scroll too fast or even moderately fast the page contents go blank. I’ve tried all I could find about web performance from the Google’s docs and the metrics for this home page are fine. However, I still get this behavior, which is more easily noticed in low-end devices, android phones or even a xiaomi note 7 for example (the one I am using for testing, which has 6gb of RAM).

Has anyone noticed this too? How can I make the page elements not disappear when scrolling?

1 Like

When you scroll and the page goes blank, if you wait awhile, does the content get filled in? Or has the page crashed and nothing is displayed no matter how long you wait?

How are you loading data into the page?

The page maintains its height and the content gets filled in. No crash happens, it is just a delay on how elements are rendered or (painted) to the screen. The data comes from regular fetch calls but only two sections require http calls, there are three instances of swiperJS.

consider implementing lazy loading and optimizing images reduce loading times and improve scrolling performance.

1 Like

Tanstack Query can be a help in situations like this. You can use it to wrap your async functions and it has a great cache, ensuring they don’t get called multiple times and wreck performance. When used with suspense, you can get good results even with huge amounts of data on low-end devices.

This would be the correct answer. and also make sure to refactor/optimize the logic to handle the heavy lifting.

I will check the lazy loading. I can assure the rest is being dealt with