re-thinking performance tuning with http2
TRANSCRIPT
![Page 1: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/1.jpg)
Re-thinking Perf Tuning
with HTTP2
Vinci RufusGoogle Developer Expert
@areai51
![Page 2: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/2.jpg)
The Best Practices of Todaymay become
Anti-Patterns Tomorrow
![Page 3: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/3.jpg)
Evolution of HTTP
1996 1999 2009 2015
HTTP 1.0 HTTP 1.1 SPDY 1.0 HTTP 2.0
![Page 4: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/4.jpg)
Other things from 1999
Alia Bhatt SangharshWindows 98
iBook (Blueberry color) Nokia 8210
![Page 5: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/5.jpg)
HTTP/1.1 Pains
• One request at a time per connection
• Head of Line Blocking (HOL)
• Duplicate headers for every request
![Page 6: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/6.jpg)
Performance ‘Best’ Practices
![Page 7: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/7.jpg)
Domain Sharding
![Page 8: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/8.jpg)
The first time I got to know about Image Sprites
![Page 9: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/9.jpg)
CSS and JS Bundling
JS + = JSJS + JS
CSS + = CSSCSS + CSS
![Page 10: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/10.jpg)
Latency is the Bigger Performance Killer
![Page 11: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/11.jpg)
Weight of Headers
• Avg header size : 800 bytes (can vary between 300 bytes to 2 KB)
• Total number of requests : 163
• Page Weight : 1,457 KB
• % of Page Weight : (0.8x163)/1457 = ~10%
![Page 12: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/12.jpg)
HTTP2 (at a glance)
![Page 13: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/13.jpg)
Elevator Pitch
http://http2.golang.org/gophertiles?latency=0 https://http2.akamai.com/demo
![Page 14: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/14.jpg)
Sites using Http2
• Yahoo.com• Instagram.com• Flickr.com• Google.com *• developers.google.com• Alibaba.com• Tumblr.com• Blogger.com• Youtube.com• twitter.com (non CDN)• Housing.com (only CDN)
h2 => TLS
h2c => TCP
![Page 15: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/15.jpg)
Browser Support for HTTP2
![Page 16: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/16.jpg)
Server & CDNs Supporting HTTP2
• Apache• Tomcat• Ngnix• Node-http2• nghttp2
• Cloudflare• Akamai• Amazon Cloudfront• MaxCDN• KeyCDN
https://github.com/http2/http2-spec/wiki/Implementations
![Page 17: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/17.jpg)
http2 Features
![Page 18: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/18.jpg)
Single Multiplexed Connection to Host
![Page 19: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/19.jpg)
Data Transferred In Streams as Frames
Stream Initiated by client => Odd numbers
Stream Initiated by Server => Even Numbers
Stream_id = 0x0 => Connection Control Messages
Stream_id 0x1 => http1.1 requests upgraded to h2
![Page 20: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/20.jpg)
Binary Frames
![Page 21: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/21.jpg)
http2 Performance
![Page 22: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/22.jpg)
Multiplexing
HTTP1.1 HTTP2
![Page 23: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/23.jpg)
Multiplexing ≠ Silver bullet
http://engineering.khanacademy.org/posts/js-packaging-http2.htm
‘increased latency due to sub-optimal behavior of our webserver’
![Page 24: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/24.jpg)
HPACK Compression
![Page 25: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/25.jpg)
HPACK compression
HTTP1.1
HTTP2
![Page 26: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/26.jpg)
Stream Priority
• Based on Dependencies and Weights• Weight [1 - 256]
*
A10
B1
*
A10
B1
![Page 27: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/27.jpg)
Prioritization in Firefox
• Prioritization is an advisory hint to the server Server can ignore if necessary
https://www.youtube.com/watch?v=yURLTwZ3ehk
![Page 28: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/28.jpg)
Server Push
https://blog.cloudflare.com/http-2-server-push-with-multiple-assets-per-link-header/
Assets that need to be pushed
![Page 29: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/29.jpg)
Server Push –Key Points
• Server sends a Push Promise frame.
• Pushed resources must be CACHEABLE
• Can push assets must be from the same origin.
![Page 30: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/30.jpg)
![Page 31: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/31.jpg)
Tools for Debugging• H2i - https://github.com/bradfitz/http2/tree/master/h2i
• Chrome://net-internals
• https://github.com/rmurphey/chrome-http2-log-parser
![Page 32: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/32.jpg)
Re-Thinking Perf Best Practices
Dos
• Keep HTTP requests low• Continue to Compress• Cache Resources on Client• Server Push (cautiously)• Use a server that supports
HPACK & Stream Priority• Bundle upto 3 files
(lib / site-global / page)
Don’t
• Avoid Excessive Domain Sharding• Image Sprites may not be
necessary• No Excessive in-lining
![Page 33: Re-thinking Performance tuning with HTTP2](https://reader036.vdocument.in/reader036/viewer/2022062503/58f9b332760da3da068bd38c/html5/thumbnails/33.jpg)
Thank You!!