http/2 - how it's changing web performance
TRANSCRIPT
How it’s changing web performancehttp/2
Mateus Prado
eventos145100
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/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;
background-position: -5px -143px;
}
.cms-ico {
height: 147px;
background-position: -5px -288px;
}
...
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>
<html><head><link rel="stylesheet" type="text/css" href="mystyle.css"></head><body>
</body></html>
0.1 SECOND 1.0 SECOND 10 SECONDS
SCRIPTS AT <BODY>
<html><head><link rel="stylesheet" type="text/css" href=“mystyle.css"></head><body>
</body><script src=“myscripts.js" defer></script></html>
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/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
HPACK
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.
ACTION PLAN HTTP/2
ACTION PLAN
‣ CHECK THE METRICS - HIGH ‣ TLS - HIGH ‣ OK TO HOST? ‣ UPDATE YOUR WEB SERVER
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]