When browsing the same blog repeatedly, the same images are decoded repeatedly

[struggggle]

Tested on [device], Android [version], WPAndroid [version]

Mi Note 3, Android 8.0, 16.3

Hi, I performed the following operations on WordPress, step1: click “Posts” on the main page step2: click “Edit” of the first post “abc"

step3: click “Back” button

step4: repeat step2 and step 3 several times.

For the first time I opened the post, the speed of displaying the images in the post was slow and I think it is normal and acceptable. However, when I opened the same post repeatedly, I found that the speed of image displaying was not smooth and the below page would appear for a short time.

By hooking WordPress, I found that several big images (e.g., 828*1104 pixels) were repeated decoded when I opened the same post repeatedly. Below are part of the repeated decoded images:

Below are the decoded image data in WordPress during app execution (obtained by hooking WordPress) :

Data description: “828,1104" is the width and height of an image.

Below is the stack trace obtained by calling Thread.currentThread().getStackTrace() after each of the above images was decoded (after the statement responsible for image decoding was executed): (each line contains "class name", "method name", and "line number”) android.graphics.BitmapFactory;decodeStream;-1 com.bumptech.glide.load.resource.bitmap.Downsampler;decodeStream;718 com.bumptech.glide.load.resource.bitmap.Downsampler;decodeFromWrappedStreams;366 com.bumptech.glide.load.resource.bitmap.Downsampler;decode;224 com.bumptech.glide.load.resource.bitmap.Downsampler;decode;173 com.bumptech.glide.load.resource.bitmap.ByteBufferBitmapDecoder;decode;31 com.bumptech.glide.load.resource.bitmap.ByteBufferBitmapDecoder;decode;14 com.bumptech.glide.load.engine.DecodePath;decodeResourceWithList;92 com.bumptech.glide.load.engine.DecodePath;decodeResource;70 com.bumptech.glide.load.engine.DecodePath;decode;59 com.bumptech.glide.load.engine.LoadPath;loadWithExceptionList;76 com.bumptech.glide.load.engine.LoadPath;load;57 com.bumptech.glide.load.engine.DecodeJob;runLoadPath;524 com.bumptech.glide.load.engine.DecodeJob;decodeFromFetcher;488 com.bumptech.glide.load.engine.DecodeJob;decodeFromData;474 com.bumptech.glide.load.engine.DecodeJob;decodeFromRetrievedData;426 com.bumptech.glide.load.engine.DecodeJob;onDataFetcherReady;390 com.bumptech.glide.load.engine.DataCacheGenerator;onDataReady;94 com.bumptech.glide.load.model.ByteBufferFileLoader$ByteBufferFetcher;loadData;70 com.bumptech.glide.load.engine.DataCacheGenerator;startNext;74 com.bumptech.glide.load.engine.DecodeJob;runGenerators;310 com.bumptech.glide.load.engine.DecodeJob;runWrapped;276 com.bumptech.glide.load.engine.DecodeJob;run;234 java.util.concurrent.ThreadPoolExecutor;runWorker;1162 java.util.concurrent.ThreadPoolExecutor$Worker;run;636 java.lang.Thread;run;764 com.bumptech.glide.load.engine.executor.GlideExecutor$DefaultThreadFactory$1;run;431

Repeated decoding of the same images will take a lot of unnecessary time consumption, which would be the reason why image displaying is not smooth in WordPress.

I noticed that Glide is applied in WordPress. Maybe be the usage of Glide should be further optimized to cache these repeated decoded images in memory.

Thanks.

[thehenrybyrd]

@struggggle thanks for the report, and for all the details!

I was able to reproduce the behavior seen here. When editing a post with images, the placeholder images appear for a moment even after loading the post several times. This is in contrast to WPiOS, where the placeholders only appear on first load.

Tested on Nokia 2, Android 7.1.1, WP Android 17.0-rc-2

[fluiddot]

The editor uses React native underneath so the images are rendered with a different library than the rest of the WordPress app (reference).

For Android, it would be great if we could use Glide, actually, we could do it by introducing the react-native-fast-image package that uses native libraries to optimize the rendering like Glide ⭐.

For iOS, I think this issue is not reproducible most likely because the library that uses React Native is better optimized, although I haven't verified it. On WordPress-iOS app looks like we use AlamofireImage library (reference), so if we include the referenced package, we may end up having two different libraries for image rendering/handling in the app, which might be undesired.

An alternative would be to implement a native RN component for images and use the same libraries as in the WordPress app, but this would imply a major effort and extra burden for maintaining it.

[hypest]

For Android, it would be great if we could use Glide, actually, we could do it by introducing the react-native-fast-image package that uses native libraries to optimize the rendering like Glide ⭐.

Thanks for sharing @fluiddot ! I will probably go ahead and time-box trying that out next week 👍 (in the context of this other ticket)