jeudi 30 mai 2019

Bundle several images together for HTTP?

I have a page with several hundreds of small images that need to be loaded when the page is visited. The total amount of data is 11 MB but it still takes upwards of 11 seconds to load the entire page.
Looking at the chrome network profiler, it pretty evident that the majority of time is wasted waiting for connections. A typical image has:
- 0.13 ms - Request sent
- 240.01 ms - Waiting (TTFB)
- 1.13 ms - Content Download
This, with Chrome's policy of only 6 TCP connections in parallal mean that many images wait 10 seconds to be downloaded.

So clearly the problem is in the server that takes a long time to answer each request but unfortunately that's the only piece that I can't control. That server is not going to change and I can't do any caching of technology change.

Is there a way to pack all the images into a single download and then unpack in in JS in the browser? I know about the dataurl method but I was hoping for a way that would avoid the base64 bloat




Aucun commentaire:

Enregistrer un commentaire