Faster image loading through WebSockets
•
1 like•225 views
This document proposes using WebSockets to load images asynchronously to speed up page loading. It outlines how browsers currently load images synchronously over HTTP, causing long wait times. The author suggests establishing a WebSocket connection, sending all image src requests at once, and retrieving the binary image data asynchronously without waiting for each response. This approach could increase image loading speeds by 20-400% according to benchmarks. Open source ITW client and server code examples are provided to implement this technique.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (16)
Similar to Faster image loading through WebSockets
Similar to Faster image loading through WebSockets (20)
Faster image loading through WebSockets
- 1. Faster images through the WebSockets? Yarik Ponomarenko
- 2. problem Too many images at the webpage are downloaded slowly
- 3. How does browser load a image? Browser Server ● find <img> ● connect to server ● send the request ● wait for response ● receive the response ● draw received image
- 4. Next is always waiting until previous is finished Server Image 1 Image 2
- 5. Browser use several connections Queue 1 Queue 2 Queue ... Queue 6
- 7. Current tricks to load images faster ● CDN ● combine several images into the sprites ● some few different (fake) domains
- 8. What bad in HTTP Get? ● one shot - one hit ● one image - one request ● requests are performed in sync queues
- 9. the silver bullet trick is: using websocket connection to retrieve images in async way
- 10. WebSocket (WS://) ● persistent ● duplex ● async
- 11. why that faster? HTTP GET WebSocket
- 12. plan 1. establish WS connection 2. find all image's "src" at page 3. send the pack of requests to server 4. retrieve the images 5. draw them 6. ??? 7. profit
- 13. client
- 14. backend
- 15. base64 has 30% lower density
- 16. how to read the binary WS frame?
- 17. another way to read blob
- 18. many requests in one connection: send the message id
- 19. many requests in one connection: return the message id
- 20. many requests in one connection: parse the message id in response
- 21. Disadvantages ● browser doesn't cache websockets ● we still need several connections to increase the network utilization
- 22. ITW client ● several streams ● binary data transferring ● local storage using for cache github.com/yarikos/itw
- 23. example: ITW client github.com/yarikos/itw
- 24. ITW backend ● proxy between ws and http ● static file server with ws-interface ● with cache
- 25. ITW backend - client interface ITW ITW client Server out encoder
- 26. ITW backend - image sources input HTTP ITW Server WEB input STATIC HDD
- 28. benchmark, Kiev - Novosibirsk ● 1.3kB +300% .. +400% ● 14.3kB +20% .. +50% ● 46kB -20% .. +20%
- 29. benchmark, Kiev - Kiev ● 1.3kB +200% .. +300% ● 14.3kB +10% .. +30% ● 46kB 0 .. +20%
- 30. leaflet.js + itw ● Kiev - Kiev +20% .. +30% ● Kiev - Novosibirsk 1.5x .. 2x slower
- 31. async is better HTTP GET WebSocket