Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of...
Transcript of Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of...
![Page 1: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/1.jpg)
Sample Title
2016 / Opatija / Croatia
Magento2 on HTTP2
![Page 2: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/2.jpg)
2016 / Opatija / Croatia
Branko Toić
CIO - Plus Hosting
![Page 3: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/3.jpg)
TL;DRPERFORMANCE!
If you have the ability, use it!
![Page 4: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/4.jpg)
2016 / Opatija / Croatia
History of HTTP● HTTP/0.9 was first standard adopted in 1991
● Web of documents (simple formating, links to other
documents)
● Basic methods (GET, POST, HEAD)
1991 1996 1997 2012 2015
HTT
P/0.
9
HTT
P/1.
0
HTT
P/1.
1
SPD
Y/2
HTT
P/2
![Page 5: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/5.jpg)
2016 / Opatija / Croatia
History of HTTP● Defined in RFC1945 as upgrade to previous version
● Backwards compatible
● Adding additional headers
● Adding methods (PUT, DELETE, LINK, UNLINK)
1991 1996 1997 2012 2015
HTT
P/0.
9
HTT
P/1.
0
HTT
P/1.
1
SPD
Y/2
HTT
P/2
![Page 6: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/6.jpg)
2016 / Opatija / Croatia
History of HTTP● Defined in RFC2068, later augmented by RFC2616
● Fixes issues in HTTP/1.0 by adding extra features
● Additional methods (OPTIONS, PATCH, TRACE)
● Keep alive, host header
1991 1996 1997 2012 2015
HTT
P/0.
9
HTT
P/1.
0
HTT
P/1.
1
SPD
Y/2
HTT
P/2
![Page 7: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/7.jpg)
2016 / Opatija / Croatia
"Flaws" addressed in HTTP/1.1Keep Alive for connection reuse
![Page 8: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/8.jpg)
2016 / Opatija / Croatia
"Flaws" addressed in HTTP/1.1HTTP Pipelining
![Page 9: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/9.jpg)
2016 / Opatija / Croatia
HTTP/1.x Best practices
Actually workarounds:
● Sprites
● Concatenating
● Minifying
● Inlining
● Sharding
● ...
![Page 10: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/10.jpg)
2016 / Opatija / Croatia
HTTP/1.x #1 issue: HOL Blocking
One resource at the time
![Page 11: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/11.jpg)
2016 / Opatija / Croatia
HOL Blocking
![Page 12: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/12.jpg)
2016 / Opatija / Croatia
HTTP/1.x #2 issue: Metadata
● Stateless
● Duplicate content
● No compression?
![Page 13: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/13.jpg)
2016 / Opatija / Croatia
History of HTTP● At this point web is beyond HTTP/1.x
● SPDY/2 started as a base for HTTP/2
1991 1996 1997 2012 2015
HTT
P/0.
9
HTT
P/1.
0
HTT
P/1.
1
SPD
Y/2
HTT
P/2
![Page 14: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/14.jpg)
2016 / Opatija / Croatia
Welcome to HTTP/2
![Page 15: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/15.jpg)
2016 / Opatija / Croatia
What is HTTP/2
● Still based on REQUEST -> RESPONSE
● Solves previous protocol flaws
● Protocol upgrade
● Fully compatible with previous version
![Page 16: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/16.jpg)
2016 / Opatija / Croatia
HTTP/2 Protocol upgrade
![Page 17: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/17.jpg)
2016 / Opatija / Croatia
HTTP/2 Protocol upgrade
![Page 18: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/18.jpg)
2016 / Opatija / Croatia
HTTP/2 binary framing
![Page 19: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/19.jpg)
2016 / Opatija / Croatia
HTTP/2 multiplexing
![Page 20: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/20.jpg)
2016 / Opatija / Croatia
Example
https://http2.golang.org/gophertiles
![Page 21: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/21.jpg)
2016 / Opatija / Croatia
Example HTTP/1.x
![Page 22: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/22.jpg)
2016 / Opatija / Croatia
Example HTTP/2
![Page 23: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/23.jpg)
2016 / Opatija / Croatia
HTTP/2 - HPACK
![Page 24: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/24.jpg)
2016 / Opatija / Croatia
HTTP/2 - PUSH
![Page 25: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/25.jpg)
2016 / Opatija / Croatia
HTTP/2 - PUSHLike inlining, but with additional performance benefits:
● Pushed resources can be cached by the client
● Pushed resources can be reused across different
pages
● Pushed resources can be multiplexed alongside
other resources
● Pushed resources can be prioritized by the server
● Pushed resources can be declined by the client
![Page 26: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/26.jpg)
2016 / Opatija / Croatia
What is still a good practice?
● GZIP (Save the bandwidth)
● Rendering time (First impression counts)
● CDN (Locally distributed content, over h2)
● Cache Control (Save the bandwidth)
![Page 27: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/27.jpg)
2016 / Opatija / Croatia
HTTP/2 Support
![Page 28: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/28.jpg)
2016 / Opatija / Croatia
HTTP/2 Support
https://github.com/http2/http2-spec/wiki/Implementations
![Page 29: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/29.jpg)
Does HTTP/2 require encryption?
"No. After extensive discussion, the Working Group did not have consensus to require the use of encryption (e.g., TLS)
for the new protocol.
However, some implementations have stated that they will only support HTTP/2 when it is used over an encrypted connection, and currently no browser supports HTTP/2
unencrypted."
![Page 30: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/30.jpg)
2016 / Opatija / Croatia
TLS and ALPN
● Currently only supported method for protocol
upgrade in browsers
● Requires OpenSSL >= 1.0.2
● Most servers do not support it out of the box
![Page 31: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/31.jpg)
2016 / Opatija / Croatia
HTTP/2 Adoption
H2 enabled CDN
● Easy
● Fast
● Local content distribution
![Page 32: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/32.jpg)
2016 / Opatija / Croatia
HTTP/2 Adoption
H2 enabled Proxy
● Requires h2 capable proxy server
● Backend does not need to talk h2
● No connection limits on backend
● Medium difficulty
![Page 33: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/33.jpg)
2016 / Opatija / Croatia
HTTP/2 Adoption
H2 Full
● Full support on web server
● Enables PUSH
● More control
● Hard to implement for some
![Page 34: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/34.jpg)
2016 / Opatija / Croatia
HTTP/2 Tests
● 3 test cases
● 5 iterations each
● High performance isolated test hosts
● Base tests for comparison○ (https://magento2.plus.hr/http2)
![Page 35: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/35.jpg)
2016 / Opatija / Croatia
HTTP/2 Base reference
![Page 36: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/36.jpg)
2016 / Opatija / Croatia
HTTP/2 & Magento2Magento homepage
![Page 37: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/37.jpg)
2016 / Opatija / Croatia
What's the problem then?
![Page 38: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/38.jpg)
2016 / Opatija / Croatia
HTTP/2 & Magento2
https://magento2.plus.hr/
● Come and test it out!
● Require.js XHR requests are counter productive
● Merging JS is "broken" on another level
![Page 39: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/39.jpg)
2016 / Opatija / Croatia
HTTP/2 & PUSH?
● Don't do it through .htaccess
● Avoid duplicate headers
● Watch out for endless streams
header("Link: </pub/media/styles.css>;rel=preload");
![Page 40: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/40.jpg)
2016 / Opatija / Croatia
HTTP/2 NO PUSH
![Page 41: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/41.jpg)
2016 / Opatija / Croatia
HTTP/2 PUSH
![Page 42: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/42.jpg)
2016 / Opatija / Croatia
Page load times?
![Page 43: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/43.jpg)
2016 / Opatija / Croatia
HTTP/2 Debugging
![Page 44: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/44.jpg)
2016 / Opatija / Croatia
HTTP/2 Debugging● chrome://net-internals/#http2
![Page 45: Sample Title Magento2 on HTTP2 › wp-content › uploads › 2016 › ...2016/05/20 · Web of documents (simple formating, links to other documents) Basic methods (GET, POST, HEAD)](https://reader034.fdocuments.net/reader034/viewer/2022042310/5ed77b8343bb6a56645bfdcf/html5/thumbnails/45.jpg)
2016 / Opatija / Croatia
Thank You!