How the HTTP2 is changing web performance?

1. HOW IT IS CHANGING WEB PERFORMANCE
HTTP/2
MATEUS PRADO
SOLUTIONS ARCHITECT AT SARAIVA

2. HTTP2
AGENDA
▸ History
▸ HTTP nowadays
▸ Improvements
▸ SPDY and HTTP2
▸ Security

3. $WHOAMI
MATEUS PRADO
▸ Software Developer, architect and systems engineer.
▸ I like software, hardware, cloud computing and airplanes.
Web Master - IT Instructor - Software Developer - Systems Engineer - DevOps - Architect

4. HTTP
WHAT IS IT?

5. HISTORY
TCP/IP MODEL

6. HISTORY
HYPERTEXT TRANSFER PROTOCOL
“The Hypertext Transfer Protocol (HTTP) is an application
protocol for distributed, collaborative, hypermedia information
systems.[1] HTTP is the foundation of data communication for
the World Wide Web.
Hypertext is structured text that uses logical links (hyperlinks)
between nodes containing text. HTTP is the protocol to
exchange or transfer hypertext.” - wikipedia.org

8. HTTP/0.9 HTTP/1.0 HTTP/1.1
1991 1996 1999
‣ Images
‣ POST method
‣ Status Code
‣ Compress, gzip‣ Text
‣ Request
‣ Response

9. HTTP/1.1

10. WEBSITE OBESITY CRISIS

11. HTTP1.1
HTTP NOWADAYS
‣ IMAGES, FONTS, CSS, JS
‣ 100 REQUEST
‣ MOBILE CONNECTIONS, LATENCY ADDS UP
‣ LARGER HEADERS
‣ X-HEADER

12. Client Server
HTTP/1.1
Request
Response
TCP Connection
index.html
style.css

13. Client Server
KEEP-ALIVE
TCP Connection
HEADER
Connection: keep-alive
Request
Response
HEADER
Connection: keep-alive

14. REQUEST
RESPONSE

16. CONNECTIONS
REQUESTS
LOAD FASTER

17. HTTP1.1
CONNECTIONS
‣ REQUEST AND RESPONSE ON A
CONNECTION
‣ MULTIPLE CONNECTIONS TO RENDER PAGE
‣ SCHEDULING AND PRIORITY

18. HTTP1.1
REQUESTS
‣ HTTP CACHING HEADER
‣ HACKS CONTENT

19. HTTP1.1
HTTP CACHING
HTTP/1.1 200 OK
CACHE-CONTROL: NO-TRANSFORM,PUBLIC,MAX-AGE=300,S-MAXAGE=900
CONTENT-TYPE: TEXT/HTML; CHARSET=UTF-8
DATE: MON, 29 APR 2013 16:38:15 GMT
ETAG: "BBEA5DB7E1785119A7F94FDD504C546E"
LAST-MODIFIED: SAT, 27 APR 2013 00:44:54 GMT
SERVER: AMAZONS3
VARY: ACCEPT-ENCODING
X-CACHE: HIT

20. HTTP1.1
HACKS
‣ MINIFY AND COMPRESS
‣ CSS SPRITES
‣ DATA URIS
‣ CSS AND JS TOGETHER

21. MINIFY

22. // The -is- object is used to identify the browser. Every browser edition
// identifies itself, but there is no standard way of doing it, and some of
// the identification is deceptive. This is because the authors of web
// browsers are liars. For example, Microsoft's IE browsers claim to be
// Mozilla 4. Netscape 6 claims to be version 5.
var is = {
ie: navigator.appName == 'Microsoft Internet Explorer',
java: navigator.javaEnabled(),
ns: navigator.appName == 'Netscape',
ua: navigator.userAgent.toLowerCase(),
version: parseFloat(navigator.appVersion.substr(21)) ||
parseFloat(navigator.appVersion),
win: navigator.platform == 'Win32'
}
is.mac = is.ua.indexOf('mac') >= 0;
if (is.ua.indexOf('opera') >= 0) {
is.ie = is.ns = false;
is.opera = true;
}
if (is.ua.indexOf('gecko') >= 0) {
is.ie = is.ns = false;
is.gecko = true;
}
var is={ie:navigator.appName=='Microsoft
Internet
Explorer',java:navigator.javaEnabled(),ns:n
avigator.appName=='Netscape',ua:navigator.u
serAgent.toLowerCase(),version:parseFloat(n
avigator.appVersion.substr(21))||
parseFloat(navigator.appVersion),win:naviga
tor.platform=='Win32'}
is.mac=is.ua.indexOf('mac')>=0;if(is.ua.ind
exOf('opera')>=0)
{is.ie=is.ns=false;is.opera=true;}
if(is.ua.indexOf('gecko')>=0)
{is.ie=is.ns=false;is.gecko=true;}
before
after

23. COMPRESS

24. GET /encrypted-area HTTP/1.1
Host: www.example.com
Accept-Encoding: gzip, deflate
HTTP/1.1 200 OK
Date: mon, 29 Feb 2016 22:38:34 GMT
Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT
Accept-Ranges: bytes
Content-Length: 438
Connection: close
Content-Type: text/html; charset=UTF-8
Content-Encoding: gzip
REQUEST
RESPONSE

25. CSS SPRITES

26. .facebook-ico, .plus-ico, .user-ico, … {
background-image: url('../images/icons.png');
background-repeat: no-repeat;
}
.facebook-ico {
height: 128px;
background-position: -5px -5px;
}
.user-ico {
height: 135px;
background-position: -5px -143px;
}
.cms-ico {
height: 147px;
background-position: -5px -288px;
}
...

27. DATA URIS

28. data:[<MIME-type>][;charset=<encoding>][;base64],<data>
<img width="64" height="69" alt="Treehouse Logo"
src="data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABFCAYAA
AD6pOBtAAAABmJLR0QA/wD/AP
+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3g
MbBwwfAKopzQAAEfdJREFUeNrVW3uUHFWZ...">

29. HTTP1.1
LOAD FASTER
‣ PUT STYLESHEETS AT THE TOP
‣ PUT SCRIPTS AT THE BOTTOM

30. STYLESHEETS AT <HEAD>

31. <html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
</body>
</html>

32. 0.1 SECOND
1.0 SECOND
10 SECONDS

33. SCRIPTS AT <BODY>

34. <html>
<head>
<link rel="stylesheet" type="text/css" href=“mystyle.css">
</head>
<body>
</body>
<script src=“myscripts.js" defer></script>
</html>

35. HTTP/2

36. 2009-2015
SPDY DISCONTINUED
“SPDY (pronounced speedy)[1] is an open networking protocol
developed primarily at Google for transporting web content.[1]
SPDY manipulates HTTP traffic, with particular goals of
reducing web page load latency and improving web security.
SPDY achieves reduced latency through compression,
multiplexing, and prioritization,[1] although this depends on a
combination of network and website deployment conditions.
[2][3][4] The name "SPDY" is a trademark[5] of Google and is
not an acronym.[6]” - wikipedia.org

37. HTTP/2
HOW IT AFFECT USERS?
‣ PERFORMANCE
‣ SECURITY*

38. PERFORMANCE

39. LATENCY
NETWORK AND SERVER RESOURCE USAGE

40. SINGLE CONNECTION

41. HPACK
HEADER COMPRESSION

42. REQUEST EXAMPLE
HTTP/1.1
GET / HTTP/1.1
Host: www.saraiva.com.br
Accept: text/html
Accept-Encoding: gzip
User-Agent User-Agent Mozilla/5.0 (Macintosh;
Cache-Control: max-age=0
GET /assets/style.css HTTP/1.1
Host: www.saraiva.com.br
Accept: text/html
Accept-Encoding: gzip
User-Agent User-Agent Mozilla/5.0 (Macintosh;
Cache-Control: max-age=0

43. HPACK
HTTP/2
:method: GET
:scheme: http
:host: www.saraiva.com.br
:path: /index.html
accept-encoding: gzip
user-agent: Mozilla/5.0 (Macintosh;
cache-control: max-age=0
:path: /assets/style.css
:path /images/saraiva-logo.png
:host: cdn.saraiva.com.br
:path: /beacon/track.jpeg
:host: beacon.saraiva.com.br
cache-control: private, max-age=0, no-cache

44. Client Server
MULTIPLEXING
index.html
js
css
png
TCP Connection

45. Client Server
SERVER PUSH
index.html
TCP Connection
index.html
style.css
application.js
logo.svg

47. <head><script async="true" type="text/javascript" src="http://widget.criteo.com/event?a=14416&amp;v=3.6.1&amp;p0=e%3Dce%26m%3D%255Bmateus
%252540mateusprado.com%255D%26h%3Dnone&amp;p1=e%3Dexd%26site_type%3Dd&amp;p2=e%3Dvh&amp;p3=e%3Ddis&amp;adce=1" data-owner="criteo-tag"></script>
<title>Saraiva.com.br: Livros, Tablets, Blu-Ray, Eletrônicos, Notebooks, Smartphones e mais.</title>
<script>window.chaordic_meta = {"page":{"name":"home","timestamp":new Date()}}</script>
<script async="" defer="" src="//static.chaordicsystems.com/static/loader.js" data-initialize="false" data-apikey="saraiva-v5"></script>
<link rel="stylesheet" type="text/css" href="http://www.saraiva.com.br/skin/frontend/saraiva/saraiva/css/styles.css?cache=MjAxNjAyMTE=" media="all">
<link rel="stylesheet" type="text/css" href="http://www.saraiva.com.br/skin/frontend/saraiva/saraiva/css/footer.css?cache=MjAxNjAyMTE=" media="all">
<link rel="stylesheet" type="text/css" href="http://www.saraiva.com.br/skin/frontend/saraiva/saraiva/css/responsive.css?cache=MjAxNjAyMTE=" media="all">
<link rel="stylesheet" type="text/css" href="http://www.saraiva.com.br/skin/frontend/saraiva/saraiva/css/medias_queries.css?cache=MjAxNjAyMTE=" media="all">
<link rel="stylesheet" type="text/css" href="http://www.saraiva.com.br/skin/frontend/saraiva/default/onsale/css/onsale_label.css?cache=MjAxNjAyMTE="
media="all">
<link rel="stylesheet" type="text/css" href="http://www.saraiva.com.br/skin/frontend/saraiva/saraiva/apptha-reviews/css/amazereviews.css?cache=MjAxNjAyMTE="
media="all">
<link rel="stylesheet" type="text/css" href="http://www.saraiva.com.br/skin/frontend/base/default/saraiva/jplayer/main.css?cache=MjAxNjAyMTE=" media="all">
<link rel="stylesheet" type="text/css" href="http://www.saraiva.com.br/skin/frontend/saraiva/responsive/css/structure/menu.css?cache=MjAxNjAyMTE="
media="all">
<link rel="stylesheet" type="text/css" href="http://www.saraiva.com.br/skin/frontend/base/default/saraiva/swiper/idangerous.swiper.css?cache=MjAxNjAyMTE="
media="all">
<script type="text/javascript" src="http://www.saraiva.com.br/js/prototype/prototype.js?cache=MjAxNjAyMTE="></script>
<script type="text/javascript" src="http://www.saraiva.com.br/js/prototype/validation.js?cache=MjAxNjAyMTE="></script>
<script type="text/javascript" src="http://www.saraiva.com.br/js/scriptaculous/effects.js?cache=MjAxNjAyMTE="></script>
<script type="text/javascript" src="http://www.saraiva.com.br/js/varien/js.js?cache=MjAxNjAyMTE="></script>

48. HTTP/2
BINARY
01010101010100
0101001
010011010101
01010101010100
0101001
01001101010101010101010100010101010101000101001
010011010101
01010010101010100010111
010011010101

49. HTTP/2
BINARY
‣ MORE EFFICIENT TO PARSE
‣ COMPACT “ON THE WIRE”
‣ LESS ERROR-PRONE
‣ WHITESPACE HANDLING, CAPITALIZATION,
LINE ENDINGS

50. Four different ways to parse a message in HTTP/1.1
in HTTP/2 there’s just one code path

51. SECURITY
SSL & TLS

53. SECURITY
SSL & TLS
‣ 13,2% SSL 2.0 - RFC6176 DEFICIENCIES
‣ 42,3% SSL 3.0 - KILLED BY THE POODLE ATTACK
‣ 99,7% TLS 1.0 - BEAST ATTACK
‣ 52,2% TLS 1.1
‣ 58.1% TLS 1.2

55. HTTP/2 IS USED BY 6.6% OF ALL THE WEBSITES.

57. THANK YOU!
REFERENCES
▸ https://http2.github.io
▸ httpwg.org
▸ The Internet Engineering
Task Force (IETF®)
▸ HTTP/2 - RFC7540
▸ HPACK - RFC7541
TWITTER: @MATEUSPRADO
HANGOUT: MATEUSH.PRADO@GMAIL.COM