HTTP/2 - How it's changing web performance

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

Transcript of HTTP/2 - How it's changing web performance

Page 1: HTTP/2 - How it's changing web performance

How it’s changing web performancehttp/2

Mateus Prado

Page 2: HTTP/2 - How it's changing web performance

eventos145100

Page 3: HTTP/2 - How it's changing web performance

HTTP2

AGENDA

▸ History

▸ HTTP nowadays

▸ Improvements

▸ SPDY and HTTP2

▸ Security

Page 4: HTTP/2 - How it's changing web performance

$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

Page 5: HTTP/2 - How it's changing web performance

HTTP WHAT IS IT?

Page 6: HTTP/2 - How it's changing web performance

HISTORY

TCP/IP MODEL

Page 7: HTTP/2 - How it's changing web performance

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
Page 8: HTTP/2 - How it's changing web performance
Page 9: HTTP/2 - How it's changing web performance

HTTP/0.9 HTTP/1.0 HTTP/1.11991 1996 1999

‣ Images ‣ POST method ‣ Status Code

‣ Compress, gzip‣ Text ‣ Request ‣ Response

Page 10: HTTP/2 - How it's changing web performance

HTTP/1.1

Page 11: HTTP/2 - How it's changing web performance

WEBSITE OBESITY CRISIS

Page 12: HTTP/2 - How it's changing web performance
Page 13: HTTP/2 - How it's changing web performance
Page 14: HTTP/2 - How it's changing web performance

HTTP1.1

HTTP NOWADAYS

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

Page 15: HTTP/2 - How it's changing web performance

Client Server

HTTP/1.1

Request

Response

TCP Connectionindex.html

style.css

Page 16: HTTP/2 - How it's changing web performance

Client Server

KEEP-ALIVE

TCP ConnectionHEADER

Connection: keep-alive

Request

ResponseHEADERConnection: keep-alive

Page 17: HTTP/2 - How it's changing web performance

REQUEST

RESPONSE

Page 18: HTTP/2 - How it's changing web performance
Page 19: HTTP/2 - How it's changing web performance

CONNECTIONS REQUESTS LOAD FASTER

Page 20: HTTP/2 - How it's changing web performance

HTTP1.1

CONNECTIONS

‣ REQUEST AND RESPONSE ON A CONNECTION

‣ MULTIPLE CONNECTIONS TO RENDER PAGE ‣ SCHEDULING AND PRIORITY

Page 21: HTTP/2 - How it's changing web performance

HTTP1.1

REQUESTS

‣ HTTP CACHING HEADER ‣ HACKS CONTENT

Page 22: HTTP/2 - How it's changing web performance

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

Page 23: HTTP/2 - How it's changing web performance

HTTP1.1

HACKS

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

Page 24: HTTP/2 - How it's changing web performance

MINIFY

Page 25: HTTP/2 - How it's changing web performance

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

Page 26: HTTP/2 - How it's changing web performance

COMPRESS

Page 27: HTTP/2 - How it's changing web performance

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

Page 28: HTTP/2 - How it's changing web performance

CSS SPRITES

Page 29: HTTP/2 - How it's changing web performance

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

}

...

Page 30: HTTP/2 - How it's changing web performance

DATA URIS

Page 31: HTTP/2 - How it's changing web performance

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

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

Page 32: HTTP/2 - How it's changing web performance

HTTP1.1

LOAD FASTER

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

Page 33: HTTP/2 - How it's changing web performance

STYLESHEETS AT <HEAD>

Page 34: HTTP/2 - How it's changing web performance

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

</body></html>

Page 35: HTTP/2 - How it's changing web performance

0.1 SECOND 1.0 SECOND 10 SECONDS

Page 36: HTTP/2 - How it's changing web performance

SCRIPTS AT <BODY>

Page 37: HTTP/2 - How it's changing web performance

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

</body><script src=“myscripts.js" defer></script></html>

Page 38: HTTP/2 - How it's changing web performance

HTTP/2

Page 39: HTTP/2 - How it's changing web performance

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
Page 40: HTTP/2 - How it's changing web performance

HTTP/2

HOW IT AFFECT USERS?

‣ PERFORMANCE ‣ SECURITY*

Page 41: HTTP/2 - How it's changing web performance

PERFORMANCE

Page 42: HTTP/2 - How it's changing web performance

LATENCY

NETWORK AND SERVER RESOURCE USAGE

Page 43: HTTP/2 - How it's changing web performance

SINGLE CONNECTION

Page 44: HTTP/2 - How it's changing web performance

HPACK HEADER COMPRESSION

Page 45: HTTP/2 - How it's changing web performance

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

Page 46: HTTP/2 - How it's changing web performance

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
Page 47: HTTP/2 - How it's changing web performance

HPACK

Page 48: HTTP/2 - How it's changing web performance

Client Server

MULTIPLEXING

index.html

js

css

png

TCP Connection

Page 49: HTTP/2 - How it's changing web performance

Client Server

SERVER PUSH

index.html TCP Connection

index.html

style.css

application.js

logo.svg

Page 50: HTTP/2 - How it's changing web performance
Page 51: HTTP/2 - How it's changing web performance

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

Page 52: HTTP/2 - How it's changing web performance

HTTP/2

BINARY01010101010100

0101001

010011010101

01010101010100

0101001

01001101010101010101010100010101010101000101001

010011010101

01010010101010100010111

010011010101

Page 53: HTTP/2 - How it's changing web performance

HTTP/2

BINARY

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

LINE ENDINGS

Page 54: HTTP/2 - How it's changing web performance

Four different ways to parse a message in HTTP/1.1

in HTTP/2 there’s just one code path

Page 55: HTTP/2 - How it's changing web performance

SECURITY SSL & TLS

Page 56: HTTP/2 - How it's changing web performance
Page 57: HTTP/2 - How it's changing web performance

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

Page 58: HTTP/2 - How it's changing web performance
Page 59: HTTP/2 - How it's changing web performance

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

Page 60: HTTP/2 - How it's changing web performance

ACTION PLAN HTTP/2

Page 61: HTTP/2 - How it's changing web performance

ACTION PLAN

‣ CHECK THE METRICS - HIGH ‣ TLS - HIGH ‣ OK TO HOST? ‣ UPDATE YOUR WEB SERVER

Page 62: HTTP/2 - How it's changing web performance
Page 63: HTTP/2 - How it's changing web performance

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]

An HTTP/2 Push-Based Approach for Low-Latency …An HTTP/2 Push-Based Approach for Low-Latency Live Streaming with Super-Short Segments 3 adapt faster to changing network conditions,

An HTTP/2 Push-Based Approach for Low-Latency …An HTTP/2 Push-Based Approach for Low-Latency Live Streaming with Super-Short Segments 3 adapt faster to changing network conditions,

HTTP Handlers and HTTP Modules

HTTP Handlers and HTTP Modules

Changing the Outlook - The National Archiveswebarchive.nationalarchives.gov.uk/20130107105354/http:/... · Changing The Outlook. 10. The challenge of this change is great and should

Changing the Outlook - The National Archiveswebarchive.nationalarchives.gov.uk/20130107105354/http:/... · Changing The Outlook. 10. The challenge of this change is great and should

Reproducible Changing our science with Jupyter...Core ideas of the web: HTTP & HTML HTML: format to represent content HyperText Markup Language HTTP: protocol to connect clients and

Reproducible Changing our science with Jupyter...Core ideas of the web: HTTP & HTML HTML: format to represent content HyperText Markup Language HTTP: protocol to connect clients and

1 Web Sessions It's all an illusion (at the HTTP layer)

1 Web Sessions It's all an illusion (at the HTTP layer)

The Rise of the Visual Web. And Why It's Changing Everything (Again) for Marketers

The Rise of the Visual Web. And Why It's Changing Everything (Again) for Marketers

Http:// Center for Education and Research in Information Assurance and Security Second Annual Research Symposium April 2002 The Changing.

Http:// Center for Education and Research in Information Assurance and Security Second Annual Research Symposium April 2002 The Changing.

It's Your Move: The Changing Game of Endpoint Security

It's Your Move: The Changing Game of Endpoint Security

The Changing Face of Organized Retail It's Potential

The Changing Face of Organized Retail It's Potential

Social media it's changing the industry scra crane & rigging workshop

Social media it's changing the industry scra crane & rigging workshop

It's an exciting time to print maps because printing is changing at lightning speed

It's an exciting time to print maps because printing is changing at lightning speed

heritage link newsletter2 - Archive-Itwayback.archive-it.org/2217/20101208160348/http:... · Alberta's rich heritage. With website design by DevStudios Inc., it's a great educational

heritage link newsletter2 - Archive-Itwayback.archive-it.org/2217/20101208160348/http:... · Alberta's rich heritage. With website design by DevStudios Inc., it's a great educational

Student Center · CHANGING BODIES, GROWING UP, SEX & SEXUAL HEALTH From the author and illustrator of It's So Amazing! ROBIE H. HARRIS illustrated by MICHAEL EMBERLEY . It's Perfectly

Student Center · CHANGING BODIES, GROWING UP, SEX & SEXUAL HEALTH From the author and illustrator of It's So Amazing! ROBIE H. HARRIS illustrated by MICHAEL EMBERLEY . It's Perfectly

Baker Goodchild Reflecting on 2014: Direct mail isn't dead but it's certainly changing

Baker Goodchild Reflecting on 2014: Direct mail isn't dead but it's certainly changing

IT'S A KID'S WORLD Changing Minds EPISODE OPEN

IT'S A KID'S WORLD Changing Minds EPISODE OPEN

It's Ruby...It's Java...No, it's JRuby

It's Ruby...It's Java...No, it's JRuby

W-JAX 2017 Keynote. It's a small world after all. How thinking small is changing software development big time

W-JAX 2017 Keynote. It's a small world after all. How thinking small is changing software development big time

It's a Streaming World! Reasoning upon Rapidly Changing Information (Milano, 14-2-2014)

It's a Streaming World! Reasoning upon Rapidly Changing Information (Milano, 14-2-2014)

Deltek Insight 2010: DCAA- It's a Changing Environment

Deltek Insight 2010: DCAA- It's a Changing Environment

How HTTP/2 is changing Web traffic and how to detect it · How HTTP/2 is changing Web traffic and how to detect it Jawad Manzoor Universite Catholique de Louvain´ Email: jawad.manzoor@uclouvain.be

How HTTP/2 is changing Web traffic and how to detect it · How HTTP/2 is changing Web traffic and how to detect it Jawad Manzoor Universite Catholique de Louvain´ Email: [email protected]