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.

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

6. "keep alive" connections
without
keep alive

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

27. example: ITW server

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

32. questions?
http://github.com/yarikos/itw
http://twitter.com/yarik_is