Visual content is crucial to any online platform’s success. It plays a critical role in grabbing users' attention and conveying information quickly and effectively. And images are one such powerful visual content. They are easily digestible and allow users to process information rapidly. Unfortunately, we witnessed many delays and slow performance across different mobile apps nowadays that are caused by image loading and processing issues. When overlooked, these issues can severely harm user satisfaction with your brand and overall business performance.
Cracking the optimization code: three key aspects
1) Network optimization
- Reduce transfer size
- Implement caching mechanisms
- Minimize network requests
2) Robust and feature-rich library
- Intelligent image resizing
- Memory management
- Caching strategies
- Asynchronous loading
- Error handling
3) Optimizing the usage of the library
- Lazy loading
- Prioritize critical content
- Progressive loading
- Size and format optimization
By focusing on network optimization by utilizing the features library and optimizing the way you use that Library you can significantly enhance the content loading performance on Android applications.
Example #1. When users look for inspiration online, they spend a lot of time and those color block layouts really ruin their vibe.
Example #2. When browsing different online stores, what users see are empty squares. No one has time for it.
Example #3. Imagine you have kids get back from school and you want to spend quality time, relax, and watch a movie together, what do you have to do? Wait. Wait till all the covers are loaded. Did you know that the stress response to delays of even one second is correlated to the response to horror movies? And this is not what you want to feel during movie night with kids.
Delays in image content loading can significantly impact user experience, engagement, and retention. Users may become frustrated and abandon the platform if they encounter slow loading times or poor-quality images. Delayed image content loading can result in lower engagement rates and impact user retention. It's essential to optimize the image pipeline to ensure fast loading times and high-quality images.
The critical role performance plays in brand image
- 76% of consumers say it is the brand's responsibility to ensure that digital services or applications work perfectly
- 83% of people report they will take action towards bad performing apps such as switching to an alternative service, sharing their negative experiences, or deleting the digital service permanently if an app has bad performance
- 57% of people believe brands have only one chance to impress them. If a digital service does not perform, they won't use it again
- 50% of respondents are willing to pay more for a product or service if its digital services are better than a competitor's
Common image loading libraries (but not limited)
Image-loading libraries for mobile are software components or tools that provide a set of functions or APIs for loading and displaying images in a mobile application. These libraries are designed to optimize the image-loading process and improve the performance and user experience of mobile applications. There are several common image-loading libraries available for Android mobile app development:
- Picasso, integrated with the Square stack (including IO and other components), is a robust library but not the fanciest one.
- Glide stands out as the most popular choice due to its user-friendly API and ease of use, which explains its wide popularity.
- Fresco offers a high level of sophistication, enabling users to have significant control over the processing pipeline. However, it requires a slightly higher level of expertise to get started compared to other options.
- Coil aims to modernize image loading by leveraging the power of Kotlin Coroutines.
- Universal Image Loader is a flexible image-loading library with a wide range of customization options.
All these libraries provide efficient ways to load, display, cache, and manipulate images within an app. The choice of the library depends on the specific requirements and preferences of the particular app.
Efficiently optimized image-loading libraries can significantly improve mobile performance by reducing data transfer, minimizing memory usage, and optimizing the decoding and rendering process.
Poorly optimized or overly complex image-loading libraries can negatively impact mobile performance by increasing memory usage and CPU overhead.
When choosing an image-loading library for mobile, it's important to consider the library's performance characteristics and the application's specific requirements and constraints.
There are always opportunities for improvement, even when using the most popular and efficiently optimized libraries.
How to optimize content loading delay
Let’s take a look at some real-life examples and learn how to optimize content loading delay.
Example 1: Preloading
This is what the user sees when opening the application. The user waits for the main feed to load. But let’s analyze what PS tool shows.
Synchronizing video with the trace file we’ve got the main execution path showing us exactly how code works. DressX uses the Glide library, which offers advanced features like image transformations and GIF support. But for the apps that use a lot of images important to pre-load them as soon as possible.
First three seconds is an animation of the Splash screen. And only after finishing this animation, the scheduled network request fetches Images. Together with the decoding process, it takes an additional 1.5 s user wait time.
By preloading images in the background in the parallel thread with SplashScreen video, you can ensure they are ready for display when needed (immediately after finishing the Splash screen), reducing the user's wait time by 33%.
Example 2: Image loading logic
In the next example of Image intensive app network requests started immediately after the user’s action, which is good. But PS Tool can show you opportunities for improvement.
So let’s take a closer look at this last image that the user waits to load. Again synchronizing the video with the trace file we’ve got the main execution path for this last image.
PS tool shows us Argument for the each image. So we can easily check the queue. Two images are loading in a queue in Thread 16322:
These images are not loading in parallel because the rest of the images are taking up the pool.
So let’s check this pool to see the image-loading pipeline.
Four threads is a commonly used default value for the number of threads in an image-loading thread pool. This number is often considered a reasonable balance between performance and resource usage
Optimization opportunities:
- Examine the logic for the Image loading
- Processing Images for the main screen firstly in parallel threads
.jpg)
Transformation Tales: Before and After
Even small changes of 8% will make the user experience better
Examples of usage of the inefficient Image loading library
The last example is what the user experiences if you use inefficient Image loading.
All images load slowly and in parts, appearing in stripes from up down. There are a few ways this loading process can be optimized. Most likely, they are using WebView (cause image loading looks the same in Chrome on Android, which uses WebView).
Utilizing another media library, such as Picasso or Glide would allow them to fetch images progressively not by stripes as now but by quality: fetching lower quality first and updating when fetched in greater quality is completed. That’d enormously reduce wait time for image loading.
Optimization boosters
- Use optimal libraries
- Preloading Images
- Progressive Loading
- Parallel Loading
- Network Optimization
How PS can help?
- No manual instrumentation is required. 10x less effort than manual instrumentation
- AI-based filtering. PS keeps what matters and is important for trace analysis. Even the smallest function without decreasing application performance
- Execution paths. PS technology makes it possible to identify a single, most critical execution path responsible for satisfying a specified user action
- Video synchronization provides visual context for you and your teammate. Provide solid visual cues that demonstrate precisely how the app works for users or errors the app may be receiving that cannot be gained from the code alone
About the author: Misha Kuznetsova is a Jr. Product Scientist at Product Science and founder of Adventure Awaits App. Experienced in optimizing mobile app performance for companies of all sizes (Telegram, PicsArt, DressX, and others).
Acknowledgments: Thanks to David Liberman, Oleg Pashkovsky, Scarlett Iu, Dmitry Melnikov, and others.
If you’re interested in tackling challenges like this, join our team! Time is humanity’s most valuable non-renewable resource. Our mission is to help all people in the world stop experiencing delays from software inefficiency.
