https://lynt.cz

Vlada Smitka

vladimir.smitka@lynt.cz

@smitka

Lynt services s.r.o.

5. 1. 2018 1

HTTP/2 vs Image sprites:Simple test

https://lynt.cz

TEST scenario

• 2000x2000 px image splitted into sprites:– 1x original image– 10x sprite 2000x200 px– 20x sprite 2000x100 px– 100x sprite 200x200 px– 400x sprite 100x100 px

• Loading tests:– Plain HTTP– HTTPS without extensions– HTTP/2

• Measurement– Google Chrome Dev console– Without throttling + with Fast 3G profile– 10x loads of each => average value of the 9 fastest loads

5. 1. 2018 2

https://lynt.cz

Original Image

5. 1. 2018 3

• 2000x2000 px• 570 kB

CC0 - https://www.pexels.com

https://lynt.cz

10x sprites

5. 1. 2018 4

• 2000x200 px• 57 kB avg• 576 kB total

https://lynt.cz

20x sprites

5. 1. 2018 5

• 2000x100 px• 30 kB avg• 604 kB total

https://lynt.cz

100x sprites

5. 1. 2018 6

• 200x200 px• 7 kB avg• 676 kB total

https://lynt.cz

400x sprites

5. 1. 2018 7

• 100x100 px• 2.5 kB avg• 1005 kB total

Almost 2x thanoriginal

https://lynt.cz

Results (normal speed)

5. 1. 2018 8

1 10 20 100 400

http 325 539 392 632 1702

http2 286 299 339 313 589

https 290 423 451 487 1418

325 539

392

632

1702

286 299339

313

589

290

423

451

487

1418

0

200

400

600

800

1000

1200

1400

1600

1800

Tim

e to

load

[m

s]

Number of static resources

Time to load (normal speed)

https://lynt.cz

Results (Fast 3G)

5. 1. 2018 9

1 10 20 100 400

http 4240 4317 4864 11397 40543

http2 4237 4317 4718 8764 26926

https 4233 4317 4713 11413 40323

4240 4317

4864

11397

40543

4237 4317 4718

8764

26926

4233 4317 4713

11413

40323

0

5000

10000

15000

20000

25000

30000

35000

40000

45000

Tim

e to

load

[m

s]

Number of static resources

Time to load (Fast 3G throttling)

https://lynt.cz

• Use HTTP/2

• Optimize the number of resources

• Don't get rid of sprites completely

The best HTTP request is no HTTP request!

5. 1. 2018 10