http2

HOW IT IS CHANGING WEB PERFORMANCE

HTTP/2MATEUS PRADO SOLUTIONS ARCHITECT AT SARAIVA

HTTP2

AGENDA

▸ History

▸ HTTP nowadays

▸ Improvements

▸ SPDY and HTTP2

▸ Security

$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

HTTP WHAT IS IT?

HISTORY

TCP/IP MODEL

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

http://wikipedia.org

HTTP/0.9 HTTP/1.0 HTTP/1.11991 1996 1999

‣ Images ‣ POST method ‣ Status Code

‣ Compress, gzip‣ Text ‣ Request ‣ Response

HTTP/1.1

WEBSITE OBESITY CRISIS

HTTP1.1

HTTP NOWADAYS

‣ IMAGES, FONTS, CSS, JS ‣ 100 REQUEST ‣ MOBILE CONNECTIONS, LATENCY ADDS UP ‣ LARGER HEADERS ‣ X-HEADER

Client Server

HTTP/1.1

Request

Response

TCP Connectionindex.html

style.css

Client Server

KEEP-ALIVE

TCP ConnectionHEADER

Connection: keep-alive

Request

ResponseHEADERConnection: keep-alive

REQUEST

RESPONSE

CONNECTIONS REQUESTS LOAD FASTER

HTTP1.1

CONNECTIONS

‣ REQUEST AND RESPONSE ON A CONNECTION

‣ MULTIPLE CONNECTIONS TO RENDER PAGE ‣ SCHEDULING AND PRIORITY

HTTP1.1

REQUESTS

‣ HTTP CACHING HEADER ‣ HACKS CONTENT

HTTP1.1

HTTP CACHINGHTTP/1.1 200 OKCACHE-CONTROL: NO-TRANSFORM,PUBLIC,MAX-AGE=300,S-MAXAGE=900CONTENT-TYPE: TEXT/HTML; CHARSET=UTF-8DATE: MON, 29 APR 2013 16:38:15 GMTETAG: "BBEA5DB7E1785119A7F94FDD504C546E"LAST-MODIFIED: SAT, 27 APR 2013 00:44:54 GMTSERVER: AMAZONS3VARY: ACCEPT-ENCODINGX-CACHE: HIT

HTTP1.1

HACKS

‣ MINIFY AND COMPRESS ‣ CSS SPRITES ‣ DATA URIS ‣ CSS AND JS TOGETHER

MINIFY

// 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: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;}

before

after

COMPRESS

GET /encrypted-area HTTP/1.1Host: www.example.comAccept-Encoding: gzip, deflate

HTTP/1.1 200 OKDate: mon, 29 Feb 2016 22:38:34 GMTServer: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)Last-Modified: Wed, 08 Jan 2003 23:11:55 GMTAccept-Ranges: bytesContent-Length: 438Connection: closeContent-Type: text/html; charset=UTF-8Content-Encoding: gzip

REQUEST

RESPONSE

CSS SPRITES

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


}

.cms-ico {

height: 147px;


}

...

DATA URIS

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

<img width="64" height="69" alt="Treehouse Logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABFCAYAAAD6pOBtAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gMbBwwfAKopzQAAEfdJREFUeNrVW3uUHFWZ...">

HTTP1.1

LOAD FASTER

‣ PUT STYLESHEETS AT THE TOP ‣ PUT SCRIPTS AT THE BOTTOM

STYLESHEETS AT <HEAD>

0.1 SECOND 1.0 SECOND 10 SECONDS

SCRIPTS AT <BODY>

HTTP/2

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

http://wikipedia.org

HTTP/2

HOW IT AFFECT USERS?

‣ PERFORMANCE ‣ SECURITY*

PERFORMANCE

LATENCY

NETWORK AND SERVER RESOURCE USAGE

SINGLE CONNECTION

HPACK HEADER COMPRESSION

REQUEST EXAMPLE

HTTP/1.1GET / 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

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

http://www.saraiva.com.br

http://cdn.saraiva.com.br

http://beacon.saraiva.com.br

Client Server

MULTIPLEXING

index.html

js

css

png

TCP Connection

Client Server

SERVER PUSH

index.html TCP Connection

index.html

style.css

application.js

logo.svg

<head><script async="true" type="text/javascript" src="http://widget.criteo.com/event?a=14416&v=3.6.1&p0=e%3Dce%26m%3D%255Bmateus%252540mateusprado.com%255D%26h%3Dnone&p1=e%3Dexd%26site_type%3Dd&p2=e%3Dvh&p3=e%3Ddis&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>

HTTP/2

BINARY01010101010100

0101001

010011010101

01010101010100

0101001

01001101010101010101010100010101010101000101001

010011010101

01010010101010100010111

010011010101

HTTP/2

BINARY

‣ MORE EFFICIENT TO PARSE ‣ COMPACT “ON THE WIRE” ‣ LESS ERROR-PRONE ‣ WHITESPACE HANDLING, CAPITALIZATION,

LINE ENDINGS

Four different ways to parse a message in HTTP/1.1

in HTTP/2 there’s just one code path

SECURITY SSL & TLS

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

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

THANK YOU!

REFERENCES

▸ https://http2.github.io

▸ httpwg.org

▸ The Internet Engineering Task Force (IETF®)

▸ HTTP/2 - RFC7540

▸ HPACK - RFC7541

TWITTER: @MATEUSPRADO HANGOUT: [email protected]

https://http2.github.io

http://httpwg.org

mailto:[email protected]

http2

Technology