Faster images through the WebSockets?Yarik Ponomarenko

problem

Too many images at the webpage are downloaded slowly

How does browser load a image?

● find <img>

● connect to server

● send the request

● wait for response

● receive the response

● draw received image

Browser Server

Next is always waiting until previous is finished

Image 1

Server

Image 2

Browser use several connectionsQueue 1

Queue 2

Queue ...

Queue 6

"keep alive" connectionswithout

keep alive

Current tricks to load images faster

● CDN

● combine several images into the sprites

● some few different (fake) domains

What bad in HTTP Get?

● one shot - one hit

● one image - one request

● requests are performed in sync queues

the silver bullet trick is:

using websocket connection to retrieve images

in async way

WebSocket (WS://)

● persistent

● duplex

● async

why that faster?HTTP GET

WebSocket

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

client

backend

base64 has 30% lower density

how to read the binary WS frame?

another way to read blob

many requests in one connection:send the message id

many requests in one connection:return the message id

many requests in one connection:parse the message id in response

Disadvantages

● browser doesn't cache websockets

● we still need several connections to increase

the network utilization

ITW client

● several streams

● binary data transferring

● local storage using for cache

github.com/yarikos/itw

example: ITW client

github.com/yarikos/itw

ITW backend

● proxy between ws and http

● static file server with ws-interface

● with cache

ITW backend - client interface

ITW Server

outencoder

ITW client

ITW backend - image sources

ITW Server

inputSTATIC

inputHTTP

WEB

HDD

example: ITW server

benchmark, Kiev - Novosibirsk

● 1.3kB +300% .. +400%

● 14.3kB +20% .. +50%

● 46kB -20% .. +20%

benchmark, Kiev - Kiev

● 1.3kB +200% .. +300%

● 14.3kB +10% .. +30%

● 46kB 0 .. +20%

leaflet.js + itw

● Kiev - Kiev +20% .. +30%

● Kiev - Novosibirsk 1.5x .. 2x slower

async is betterHTTP GET

WebSocket

questions?

http://github.com/yarikos/itwhttp://twitter.com/yarik_is