Http/2 vs Image Sprites
Download as PPTX, PDF0 likes1,375 views
This document summarizes the results of a test comparing loading a single large image versus that same image split into sprites over HTTP, HTTPS, and HTTP/2. It found that HTTP/2 performed best, loading sprites faster than a single image over HTTP or HTTPS. It concluded that HTTP/2 should be used, the number of resources optimized, and sprites not eliminated completely to reduce the number of HTTP requests needed.
![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 299
339
313
589
290
423
451
487
1418
0
200
400
600
800
1000
1200
1400
1600
1800
Timetoload[ms]
Number of static resources
Time to load (normal speed)](https://image.slidesharecdn.com/http2-sprites-simple-test-180105112812/85/Http-2-vs-Image-Sprites-8-320.jpg){kind=icon}
![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
Timetoload[ms]
Number of static resources
Time to load (Fast 3G throttling)](https://image.slidesharecdn.com/http2-sprites-simple-test-180105112812/85/Http-2-vs-Image-Sprites-9-320.jpg){kind=icon}
Http/2 vs Image Sprites
- 1. 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
- 2. 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
- 3. https://lynt.cz Original Image 5. 1. 2018 3 • 2000x2000 px • 570 kB CC0 - https://www.pexels.com
- 4. https://lynt.cz 10x sprites 5. 1. 2018 4 • 2000x200 px • 57 kB avg • 576 kB total
- 5. https://lynt.cz 20x sprites 5. 1. 2018 5 • 2000x100 px • 30 kB avg • 604 kB total
- 6. https://lynt.cz 100x sprites 5. 1. 2018 6 • 200x200 px • 7 kB avg • 676 kB total
- 7. https://lynt.cz 400x sprites 5. 1. 2018 7 • 100x100 px • 2.5 kB avg • 1005 kB total Almost 2x than original
- 8. 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 299 339 313 589 290 423 451 487 1418 0 200 400 600 800 1000 1200 1400 1600 1800 Timetoload[ms] Number of static resources Time to load (normal speed)
- 9. 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 Timetoload[ms] Number of static resources Time to load (Fast 3G throttling)
- 10. 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