I know this is old, but in case anyone else comes looking. This is a problem that has nothing to do with loading or fetching. This is a rendering issue. At least it was for me. I have a carousel of images and the images are cached thanks to react query (LOVE) and I verified they are not loading or fetching. They just kept drawing on the screen slowly, in pieces, in a weird order - basically looked like crap. Anyway come to find the image sizes where in actuality 3x bigger than the size I was rendering them. Fixed that problem and got them down to the lowest size possible and all of a sudden all the images "draw" on the screen instantly.

On this topic. The other day I had a performance score of 58 on an app that had a large image painting on page load. Again, the image actual size was way to big, and when I reduced it to the appropriate size the performance score shot up to 98.

Two lessons now on why you really need to pay attention to the actual size of the images you are using, and make sure they are as small as possible. And yes, you should be using webp, lazy load when required, preload when required - I am not discounting any of that. I use all those techniques as well. But the sizing of the images is just paramount to good UX/UI.

I do not know if this is OPs actual issue. People often confuse loading/fetching with rendering. They don't know the diff. That's ok. You can figure it with a quick loading state and having "loading.." come up on the screen during loading (or fetching, or both). In my case there was no loading or fetching time at all. This was a paint problem.