How http2 and your features and improvements is changing the sites and web applications around the internet.

1. How it’s changing web performance
http/2
Mateus Prado

2. eventos145100

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

4. $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

5. HTTP
WHAT IS IT?

6. HISTORY
TCP/IP MODEL

7. 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

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

10. HTTP/1.1

11. WEBSITE OBESITY CRISIS

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

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

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

17. REQUEST
RESPONSE

19. CONNECTIONS
REQUESTS
LOAD FASTER

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

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

22. 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

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

24. MINIFY

25. // 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

26. COMPRESS

27. 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

28. CSS SPRITES

29. .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;
}
...

30. DATA URIS

31. 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...">

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

33. STYLESHEETS AT <HEAD>

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

35. 0.1 SECOND
1.0 SECOND
10 SECONDS

36. SCRIPTS AT <BODY>

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

38. HTTP/2

39. 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

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

41. PERFORMANCE

42. LATENCY
NETWORK AND SERVER RESOURCE USAGE

43. SINGLE CONNECTION

44. HPACK
HEADER COMPRESSION

45. 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

46. 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

47. HPACK

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

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

51. <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>

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

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

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

55. SECURITY
SSL & TLS

57. 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

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

60. ACTION PLAN
HTTP/2

61. ACTION PLAN
‣ CHECK THE METRICS - HIGH
‣ TLS - HIGH
‣ OK TO HOST?
‣ UPDATE YOUR WEB SERVER

63. 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