0

Images don't block initial render. I believe this to be mostly true. This means requesting/downloading the image from the network does not happen on the main thread. I'm assuming decoding/rasterizing an image also happen off the main thread for some browsers (but I might be wrong).

Often I've heard people simply say "just let the images download in the background". However, making the next reasonable step with this information alone, images should have 0 impact on the performance of your web app when looking at Time to Interactive or Time to First Meaningful paint. From my experience, it doesn't. Performance is improved by 2-4 seconds by lazy loading images (using IntersectionObserver) on an image heavy page vs. "just letting them download in the background".

What specific browser internals/steps to decode/paint an image causes performance regressions when loading a web page? What steps take resources from the main thread?

snewcomer
  • 2,020
  • 1
  • 19
  • 22

1 Answers1

1

That's a bit broad, there are many things that will affect the rest of the page, and all depending of a lot of different factors.

Network requests are not handled by the CPU, so there should be no overhead here.

Parsing the metadata is implementation dependent, could be using the same process or some dedicated one, but generally that's not an heavy call.

Decoding the image data and rasterization is implementation dependent too, some browsers will do it directly when they get the data, while others will wait until it's really needed to do this, though there are ways to ensure it's done synchronously (on the same thread).

Painting the image may be Hardware Accelerated (done on the GPU) or done by software (on the CPU) and in that case that could impact general performances, but modern renderers will probably discard the images that are not in the current viewport.

And finally, having your <img> elements get resized by their content will cause a complete reflow of your page. That's usually the most notable performance hit when loading images in a web-page, so be sure you set the sizes of your images through CSS in order to prevent that reflow.

Kaiido
  • 123,334
  • 13
  • 219
  • 285