Page going blank when scrolling fast

Ionic Framework Ionic React
1

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
2

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?

3

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.

4

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

1 Like
5

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.

6

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

7

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

8

I feel your pain! Disappearing content on a scroll can be frustrating. Here’s what some developers have encountered:

  1. Heavy DOM: A complex home page like Deliveroo’s can have a large DOM (Document Object Model), causing rendering issues on slower devices. Try lazy loading content below the fold or using virtual scrolling techniques.

  2. Image Optimization: Large unoptimized images can bottleneck scrolling. Compress and consider using lazy loading for images too.

  3. JavaScript: Excessive JS execution can block rendering. Analyze and optimize critical JS to improve performance.

These are common culprits. Even with good metrics, these factors can impact low-end devices. Let me know if you’d like to delve deeper into specific solutions!

1 Like
9

Thank you for the answer. I did some tests with the image size and using optimized images helped a lot. I am using react virtuoso for virtual scrolling but I noticed it too has its limitations and throttling the scroll speed could be a solution. I haven’t tested in low-end devices yet…