Performance issue in lazy grid

[PauliusVal]

Description
Compose performance issue in super simple app which just displays network images list using Coil.

We see noticeable jank while scrolling even though:

• app runs in R8 release mode
• contains baseline profile for scrolling screen
• stable Compose parameters used
• unique and stable item keys applied for grid items

Jank is visible by human eye and also in profiler:
https://github.com/PauliusVal/ComposeGridPerformance/blob/main/images/images_grid_janky_frames_1.png?raw=true

Full app code and more screenshots: https://github.com/PauliusVal/ComposeGridPerformance/tree/main

Version
Coil version: io.coil-kt:coil-compose:2.4.0

[colinrtwhite]

Thanks for the repro project. Which device did you run the tests on?

[PauliusVal]

Samsung S21 Ultra, Android 13

[PauliusVal]

Not sure if that helps, but updated the app with identical grid just with Glide image loading. It has noticeably fewer janky frames in profiler and looks/feels much smoother.

[Mkohm]

Same problem here, seems to use a lot of memory! Up to 2gigs of memory in my app when scrolling in lazy column with images.

[lkhore]

Same issue janky frames with grid

[colinrtwhite]

@Mkohm That sounds like it could be a separate memory leak. Please file an issue (ideally with a way to reproduce)!

@lkhore Did you test in release mode? Compose is often much slower in debug mode.

[serhatkarakoca]

Same problem in release and debug mode.

[Kuki93]

Is there any progress on this issue

[matejdro]

I've added benchmark and tracing here to make diagnosing this easier: matejdro/ComposeGridPerformance@beb902c

Here is an example trace file (from Pixel 7 Pro): ScrollBenchmark_scrollImageList_iter003_2023-12-21-08-27-41.perfetto-trace.zip

Not sure why the trace is so weird (it shows one big compose event spanning multiple seconds), but you can still drill down and it appears that rememberAsyncPainter is taking considerable time:

[hellosagar]

Im noticing a heavy jank in scrolling with LazyGrid as well. In my application compose:lazylist:prefetch:measure is taking around 229.935506 ms 👀

[musooff]

I am simple loading local images and showing with coil. There is a noticeable lagging (skipping lots of frames) especially in older devices.
During first showing of the LazyVerticalGrid it is almost unusable.
Below is the video to show the lag with HWUI rendering.
And yes, it is in release mode. In debug you can't even scroll.

coil.performance.mov

[felipef0xx]

Same problem here with Coil's Compose Sample:

Screen_Recording_20240207_165837_Coil.mp4

Coil version: 2.5.0
Device: Galaxy M23 5G

[felipef0xx]

It looks like it's not just related to LazyGrid.
Changed the Compose Sample to LazyColumn and the problems still happen:

Screen_Recording_20240208_133733_Coil.mp4

[mainrs]

Hope I can somehow help with this. I am using LazyColumn and each item has an AsyncImage ("episode item"). Is there anything I can provide: debug logs, source code, ....?

[x3x0z]

I have the same error, I'm using a LazyVerticalGrid with +8k items (I'm also using pagination), after fast scrolling through more than 3k items, the application gets super slow, even the android emulator stops working.

[Cj-Rodriguez101]

Hope I can somehow help with this. I am using LazyColumn and each item has an AsyncImage ("episode item"). Is there anything I can provide: debug logs, source code, ....?

Does it still happen on 2.6.0?

[mikelpr]

@Cj-Rodriguez101 happens to me with a LazyVerticalGrid of AsyncImages on 2.6.0

[starry-shivam]

Facing same issue with 3.0.0-alpha06 on compose multiplatform.

[starry-shivam]

Facing same issue with 3.0.0-alpha06 on compose multiplatform.

I'd like to add that setting a fixed height to either AsyncImage via a modifier, or if it's wrapped in another composable like Box, then adding a fixed height to that parent composable, resolves the lag issue. The problem seems to be that it does not perform lazy loading of items when there is no fixed height set, causing all of them to load at once. I discovered this when I attached a DebugLogger() to the Coil configuration, and it printed 960+ items at once after the screen rendered, even though my grid is only large enough to show 6 items at a time. After adding a fixed height, the logger printed 8 items initially and continued printing more as I scrolled further, indicating that it was indeed performing lazy loading this time. As a result, there were no lags or jitters.

[mainrs]

Facing same issue with 3.0.0-alpha06 on compose multiplatform.

I'd like to add that setting a fixed height to either AsyncImage via a modifier, or if it's wrapped in another composable like Box, then adding a fixed height to that parent composable, resolves the lag issue. The problem seems to be that it does not perform lazy loading of items when there is no fixed height set, causing all of them to load at once. I discovered this when I attached a DebugLogger() to the Coil configuration, and it printed 960+ items at once after the screen rendered, even though my grid is only large enough to show 6 items at a time. After adding a fixed height, the logger printed 8 items initially and continued printing more as I scrolled further, indicating that it was indeed performing lazy loading this time. As a result, there were no lags or jitters.

Thank you for sharing! This did work in one of my apps. There are some UI experiences where this is not possible, though. For example in staggered grid views where items can have different heights depending on their content. That's where I encountered the issue.

[starry-shivam]

Thank you for sharing! This did work in one of my apps. There are some UI experiences where this is not possible, though. For example in staggered grid views where items can have different heights depending on their content. That's where I encountered the issue.

Yeah, this is just a workaround I found by trial and error. It cannot really cover all of the use cases. I really hope this bug gets fixed soon.

[colinrtwhite]

Hey folks if you're having performance issues I'd recommend trying the latest 3.0.0 alphas, as it should be faster. There's been work done in AsyncImagePainter to avoid Compose and Coroutines overhead. Some of this work required changing the public API slightly, which is why it hasn't been backported to 2.x (though some slight improvements were backported to 2.7.0). Here's the upgrade guide.

Also I'd heavily recommend avoiding SubcomposeAsyncImage inside a list as it relies on subcomposition, which is slow. AsyncImage and rememberAsyncImagePainter are much faster.

Also performance will be much worse in debug builds as Compose includes instrumentation info; this is expected behaviour. Running a release build with R8 enabled should solve most performance issues.

[hypersebi]

It got better after upgrading to 2.7.0, but still jittering. I've added a plain image (just for isolating coil) and I still got skipping frames on my 120hz pixel 7 pro. I suspect the Lazy Grid is becoming the issue from this point.

[JJSarrasin]

Same here, I develop on low-end TV-Box and if I have a grid of 4 columns. When I scroll down, the render is very laggy when it's not in cache and then it becomes usable, but still laggy.
I try to set a fix size as suggested above, but no change.
I had better perfs with Picasso/views on same box, but it's a whole new world :)