A modern programming language that makes developers happier.

kotlinlang

WhatsApp Video 2024-05-17 at 3.24.46 PM.mp4

coil-compose-sample.txt

recyclerview-sample.txt

Hello everyone, I am using <https://coil-kt.github.io/coil/compose/|coil compose> for image rendering, but unfortunately, I am encountering some / very laggy behavior. I have created a sample screen with the code snippet below, and the performance is still not as good as when using RecyclerView.

The images I am using have a high resolution, and when I render multiple images on the screen, the lag becomes noticeable. However, when I only render four large images, the performance improves significantly.

According to the documentation, the coil supports downsampling images and has a caching mechanism. I am wondering if I have implemented the coil incorrectly. I am using coil version 2.6.0.

It's interesting to note that when optimizations like caching or key are applied, the nested list with coil performs worse than RecyclerView. To ensure better performance of Compose, we used the release build, but it still underperformed compared to RecyclerView. Our testing was conducted on a Redmi 9C (low middle end device).

I would greatly appreciate any suggestions on how to improve the performance of the coil or why it might be performing poorly compared to RecyclerView.

Video comparison Coil (left) Vs RecyclerView (right)

I am also experiencing the same thing. The issue is getting worse when using low end devices.

coil.png

&gt; According to the documentation, the coil supports downsampling images
Yeah, even though it's declared as supported, it never worked for me out of the box.
I always had to manually specify the image size. Here's an example of how I handled it:

Basically, it makes sure the image size isn't any bigger than the Image widget itself, or smaller if needed.

Thanks mate, I'll try the workaround. Just curious, after you specify the image size then do you ever experience the laggy issue again on low/middle-end devices or not? :thinking_face:

To be honest, in my experience, Jetpack Compose has been performing pretty well, but I always put in some effort to optimize things.
Just writing the layout as is, out of the box, gives a decent experience - not bad, but there's definitely room for improvement.

Screen_recording_20240515_010759.mp4

Take this Nexus 5(2013), for example. It's running a layout with average complexity, plus some additional effects on top. While it's not quite hitting 60fps, it's not dropping to 30 either. Considering the age of this device, I'd say it runs pretty well.

To get Compose running smoothly on low-end devices, you really need to put some effort into optimizing layouts. Things like baseline profiles, using release mode, reducing recompositions, optimizing image sizes, and so on - they all make a difference.

20240517_141606.mp4

It's not buttery-smooth on this 11-year-old device, but it's not terrible either.

Yeah, we need to put extra effort into optimizing compose. Thanks mate for sharing your experience <@UJZJNF6R4> Really appreciate it