SlideShare a Scribd company logo
Web Performance in the
World of HTTP 2.0
Dave Methvin
Independent Consultant
President, jQuery Foundation
This talk: https://goo.gl/5XPz0H
As a front-end
developer, do you
ever get this feeling
about Internet
performance?
History of the HTTP Protocol
1991: HTTP 0.9
1996: HTTP 1.0
1997: HTTP 1.1
… an eternity passes ...
Website
Development
State of the
Art in 1997
They're Upgrading Our Protocol
HTTP 2.0 is coming
Change your client,
server, and build
process to make
things work even
better
A Wild SPDY Appears
January 2011: Google includes SPDY in
Chrome and supports the protocol in all their
services. Other browsers and servers follow
suit over the next year.
http://caniuse.com/#search=spdy
The Move to HTTP 2.0
2010: SPDY appears
2012: Group starts standardization
2015: HTTP 2.0 complete
2016: Chrome to remove SPDY
http://caniuse.com/#search=http2
Servers,
Switches,
Proxies
istlsfastyet.com/
#server-performance
CDN and
PAAS
Providers
istlsfastyet.com/
#cdn-paas
Services Already using HTTP/2
Wordpress.com
Blogger.com
(medium.com & tumblr.com use SPDY)
Why HTTP/2 is Needed
Connections today are dumb
Manual tweaks: minification, sharding, combining,
spriting, HTML resource order, XHR, up to six
simultaneous connections per server … blah blah
Latency (RTT) is a killer
HTTP 2.0 is a Binary Protocol
Can't use telnet for an HTTP/2 session
When was the last time you did that?
Plenty of tools can decode HTTP/2 sessions
already, including most browser tools
HTTP/1: Head-of-Line Blocking
The current resource must finish downloading before making
another request; each has a delay of one round-trip-time (RTT)
big-image.jpg
500kb
icon
.png
1kb
home
.css
1kb
info
.js
1kb
Multiple connections to the server are only a
partial solution to this problem, and can cause
their own problems (e.g., congestion)
RTT
delay
RTT
delay
RTT
delay
HTTP/2: Connections Use Streams
Streams are prioritized, cancellable, and preemptable!
Stream 1:
big-image.jpg
(first 200kb)
S4:
icon
.png
1kb
S2:
home
.css
1kb
S3:
info
.js
1kb
Stream 1 (cont'd):
big-image.jpg
(final 300kb)
Important resources
arrive faster, on a
"warm" connection
Send me: big-image.jpg … icon.png, home.css, info.js
HTTP/1: Bloated Headers
In HTTP/1, headers are not compressed
Cookies (often several hundred bytes!)
User-Agent (this one is 124 bytes)
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/44.0.2403.157 Safari/537.36
HTTP/2: HPACK Compression
https://commons.wikimedia.org/wiki/File:HTTP_2_Header_Compression_HPACK.svg
Web Developer Commandments
Minimize DNS lookups
Reuse HTTP connections
Use a Content Delivery Network (CDN)
Eliminate unnecessary request bytes
Compress assets during transfer
Cache resources on the client
A Sadly
Typical
Web Site
webpagetest.org
It's Actually
A Lot Worse
Than That
webpagetest.org
Like,
Really,
Really,
Really Bad!
240 requests
3.8 megabytes
webpagetest.org
Rethink: Domain Sharding
e.g. s.huffpost.com, i.huffpost.com ...
Each connection requires setup/warmup
Connections compete for resources
DNS lookups, TCP congestion, retries
Even on HTTP/1, performance can often be
harmed by more than 2 shards
Sharding Didn't Really Help
webpagetest.org
We Didn't Keep the Wire Busy!
webpagetest.org
Connection Coalescing
HTTP/2 can use the same connection for two
different hosts (e.g., s.huffpost.com and
i.huffpost.com) if they resolve to the same IP
address. (There will be different HOST headers
on different streams.)
Amazing Connection Coalescing
If you have a TLS certificate that is valid for
multiple DNS names (e.g., *.domain.com) and
the names resolve to the same IP address,
HTTP/2 can use the same connection for both
hosts!
Rethink: Cookieless Domains
E.g., set cookie for www.huffpost.com and
avoid cookie using i.huffpost.com
HPACK makes it (mostly) unnecessary
With HTTP/2 you can share cookies across
*.huffpost.com without overhead worries
Scripts/CSS Combined via PHP
<script type="text/javascript"
src="http://s.huffpost.com/assets/js.php?v=1441810385&f=huff.js%2Chp_config.js%2Cjs
onmin.js%2Ccookiesmin.js%2Chp_track.js%2Chp_util.js%2Chp_browser.js%2Cget_font.js%2
Cpreload_topnav_font.js%2C_tmp%2Fcommon.js%2C_tmp%2Fclick_tracker.js%2C_tmp%2Fcommo
n_paginator.js%2C_tmp%2Fhp_ads.js%2C_tmp%2Fquick_login.js%2Cfacebook.js%2Csnproject
.js%2Chuff_promo.js%2Chptwitter_anywhere.js%2Ctwitter%2Ffrontpage.js%2Csearch_focus
.js%2Csearch_autocomplete.js%2Cmod-
follow.js%2Cconversations%2Fbootstrap.js%2C_front%2Ftopnav_new.js%2Cap_scroll_fastn
ews.js">
Rethink: Combining files
Combining files reduces requests
BUT
You usually don't need the whole file right now
Large files take longer to download
Large files are slow for the browser to parse/run
Changes invalidate the cached combined file
Let HTTP/2 Fetch Smaller Files
HTTP/2 reuses & prioritizes the connection
Use a core, then more strategy
First files handle the initial view ("above the fold")
Other stuff can come in as needed (e.g. views)
Avoid inlining JS/CSS
Separate files can be cached independently
Server Push
Browser: "Send me /products.html"
Server: "OK, also sending abovethefold.css"
(Browser can cancel if it's already cached)
This can be done by predictive
algorithms on the server!
Whoa.
How a Browser Prioritizes
Streams in a connection have
weight (priority)
dependency (reference to another stream)
e.g., logo.jpg is useless without index.html
Server should deliver bytes based on the
requested weights and dependencies
http://bitsup.blogspot.com/2015/01/http2-dependency-priorities-in-firefox.html
How to Detect HTTP 2.0 Use?
Chrome
Firefox
Edge
Plugin
HTTP/1 and HTTP/2 Can Coexist
To-Do List for HTTP/2
Ensure that your servers or CDNs support
HTTP/2 -- bug your providers too!
Make HTTP/2 effective w/o breaking HTTP/1
Reduce or eliminate sharding
Avoid creating monolithic JS/CSS files
Test to be sure you're getting HTTP/2 goodness
(Expect future studies on HTTP/2 quality)
?On Twitter: @davemethvin
This talk: https://goo.gl/5XPz0H
RESOURCES
Ilya Grigorik at Velocity
https://www.youtube.com/watch?v=yURLTwZ3ehk
http://www.slideshare.net/AndyDavies/http2-is-here
http://www.slideshare.net/AndyDavies/the-case-for-http2
http://www.http2demo.io/
http://daniel.haxx.se/blog/2015/09/07/http2-115-days-with-the-rfc/

More Related Content

What's hot

Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
Monika Piotrowicz
 
Real World Web components
Real World Web componentsReal World Web components
Real World Web components
Jarrod Overson
 
New Perspectives on Performance
New Perspectives on PerformanceNew Perspectives on Performance
New Perspectives on Performance
mennovanslooten
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Nicholas Zakas
 
The Onion
The OnionThe Onion
The Onion
Jörn Zaefferer
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
Marc Grabanski
 
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data LinkHarness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
BorisMoore
 
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Nicholas Zakas
 
Learning jQuery @ MIT
Learning jQuery @ MITLearning jQuery @ MIT
Learning jQuery @ MIT
jeresig
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
Nicholas Zakas
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
Ashlimarie
 
jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013
dmethvin
 
Don't Over-React - just use Vue!
Don't Over-React - just use Vue!Don't Over-React - just use Vue!
Don't Over-React - just use Vue!
Raymond Camden
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09
jeresig
 
Unobtrusive javascript
Unobtrusive javascriptUnobtrusive javascript
Unobtrusive javascript
Lee Jordan
 
Christmas Trees Made with HTML CSS and JS
Christmas Trees Made with HTML CSS and JSChristmas Trees Made with HTML CSS and JS
Christmas Trees Made with HTML CSS and JS
Niamh Foley
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
Liking performance
Liking performanceLiking performance
Liking performance
Stoyan Stefanov
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
Zoe Gillenwater
 
AngularJS for Legacy Apps
AngularJS for Legacy AppsAngularJS for Legacy Apps
AngularJS for Legacy Apps
Peter Drinnan
 

What's hot (20)

Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
 
Real World Web components
Real World Web componentsReal World Web components
Real World Web components
 
New Perspectives on Performance
New Perspectives on PerformanceNew Perspectives on Performance
New Perspectives on Performance
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
The Onion
The OnionThe Onion
The Onion
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
 
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data LinkHarness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
 
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
 
Learning jQuery @ MIT
Learning jQuery @ MITLearning jQuery @ MIT
Learning jQuery @ MIT
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013
 
Don't Over-React - just use Vue!
Don't Over-React - just use Vue!Don't Over-React - just use Vue!
Don't Over-React - just use Vue!
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09
 
Unobtrusive javascript
Unobtrusive javascriptUnobtrusive javascript
Unobtrusive javascript
 
Christmas Trees Made with HTML CSS and JS
Christmas Trees Made with HTML CSS and JSChristmas Trees Made with HTML CSS and JS
Christmas Trees Made with HTML CSS and JS
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Liking performance
Liking performanceLiking performance
Liking performance
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
 
AngularJS for Legacy Apps
AngularJS for Legacy AppsAngularJS for Legacy Apps
AngularJS for Legacy Apps
 

Viewers also liked

Http2 protocol changes
Http2 protocol changesHttp2 protocol changes
Http2 protocol changes
Mark Friedman
 
2 слайд фото січ кольорова
2 слайд фото січ кольорова2 слайд фото січ кольорова
2 слайд фото січ кольорова
elisarius010309
 
Classificação seniores 2015
Classificação seniores 2015Classificação seniores 2015
Classificação seniores 2015
Bruno Ferreira
 
Surf the Change_brief
Surf the Change_briefSurf the Change_brief
Surf the Change_brief
gsacco
 
Guanabara eletrônicos
Guanabara eletrônicosGuanabara eletrônicos
Guanabara eletrônicos
Clarice Marques
 
Lista de mercados relevantes
Lista de mercados relevantesLista de mercados relevantes
Lista de mercados relevantes
noticiasaudio
 
Using Data to Drive Your P2P Fundraising Strategies
Using Data to Drive Your P2P Fundraising StrategiesUsing Data to Drive Your P2P Fundraising Strategies
Using Data to Drive Your P2P Fundraising Strategies
Shana Masterson
 
від козаків до наших днів збережемо вогонь батьків
від козаків до наших днів збережемо вогонь батьківвід козаків до наших днів збережемо вогонь батьків
від козаків до наших днів збережемо вогонь батьків
elisarius010309
 
คู่มือภาษี สำหรับ ผู้ประกอบการพาณิชย์อิเล็กทรอนิกส์
คู่มือภาษี สำหรับ ผู้ประกอบการพาณิชย์อิเล็กทรอนิกส์คู่มือภาษี สำหรับ ผู้ประกอบการพาณิชย์อิเล็กทรอนิกส์
คู่มือภาษี สำหรับ ผู้ประกอบการพาณิชย์อิเล็กทรอนิกส์
Thanawat Malabuppha
 
Medallero copa intercontinental fememnna 2015
 Medallero copa intercontinental fememnna 2015 Medallero copa intercontinental fememnna 2015
Medallero copa intercontinental fememnna 2015
emiliomerayo
 
Eye tracking in usability studies
Eye tracking in usability studiesEye tracking in usability studies
Eye tracking in usability studies
Nana Nielsen
 
Resumenes
ResumenesResumenes
Resumenes
yadis1234
 
Lviv MD Day 2015 Олексій Озун "Introduction to the new Apple TV and TVos"
Lviv MD Day 2015 Олексій Озун "Introduction to the new Apple TV and TVos"Lviv MD Day 2015 Олексій Озун "Introduction to the new Apple TV and TVos"
Lviv MD Day 2015 Олексій Озун "Introduction to the new Apple TV and TVos"
Lviv Startup Club
 
5 questions on safety reporting for medical devices in CIS region
5 questions on safety reporting for medical devices in CIS region5 questions on safety reporting for medical devices in CIS region
5 questions on safety reporting for medical devices in CIS region
Alexey Stepanov
 
Инновации в рекламном бизнесе
Инновации в рекламном бизнесеИнновации в рекламном бизнесе
Инновации в рекламном бизнесе
The International Association of Marketing Initiatives (IAMI)
 
Clase 2 Construcciones Geométricas
Clase 2   Construcciones GeométricasClase 2   Construcciones Geométricas
Clase 2 Construcciones Geométricas
DIBUJO EN INGENIERÍA-PUCP
 

Viewers also liked (17)

Http2 protocol changes
Http2 protocol changesHttp2 protocol changes
Http2 protocol changes
 
2 слайд фото січ кольорова
2 слайд фото січ кольорова2 слайд фото січ кольорова
2 слайд фото січ кольорова
 
Classificação seniores 2015
Classificação seniores 2015Classificação seniores 2015
Classificação seniores 2015
 
Manfaat jahe
Manfaat jaheManfaat jahe
Manfaat jahe
 
Surf the Change_brief
Surf the Change_briefSurf the Change_brief
Surf the Change_brief
 
Guanabara eletrônicos
Guanabara eletrônicosGuanabara eletrônicos
Guanabara eletrônicos
 
Lista de mercados relevantes
Lista de mercados relevantesLista de mercados relevantes
Lista de mercados relevantes
 
Using Data to Drive Your P2P Fundraising Strategies
Using Data to Drive Your P2P Fundraising StrategiesUsing Data to Drive Your P2P Fundraising Strategies
Using Data to Drive Your P2P Fundraising Strategies
 
від козаків до наших днів збережемо вогонь батьків
від козаків до наших днів збережемо вогонь батьківвід козаків до наших днів збережемо вогонь батьків
від козаків до наших днів збережемо вогонь батьків
 
คู่มือภาษี สำหรับ ผู้ประกอบการพาณิชย์อิเล็กทรอนิกส์
คู่มือภาษี สำหรับ ผู้ประกอบการพาณิชย์อิเล็กทรอนิกส์คู่มือภาษี สำหรับ ผู้ประกอบการพาณิชย์อิเล็กทรอนิกส์
คู่มือภาษี สำหรับ ผู้ประกอบการพาณิชย์อิเล็กทรอนิกส์
 
Medallero copa intercontinental fememnna 2015
 Medallero copa intercontinental fememnna 2015 Medallero copa intercontinental fememnna 2015
Medallero copa intercontinental fememnna 2015
 
Eye tracking in usability studies
Eye tracking in usability studiesEye tracking in usability studies
Eye tracking in usability studies
 
Resumenes
ResumenesResumenes
Resumenes
 
Lviv MD Day 2015 Олексій Озун "Introduction to the new Apple TV and TVos"
Lviv MD Day 2015 Олексій Озун "Introduction to the new Apple TV and TVos"Lviv MD Day 2015 Олексій Озун "Introduction to the new Apple TV and TVos"
Lviv MD Day 2015 Олексій Озун "Introduction to the new Apple TV and TVos"
 
5 questions on safety reporting for medical devices in CIS region
5 questions on safety reporting for medical devices in CIS region5 questions on safety reporting for medical devices in CIS region
5 questions on safety reporting for medical devices in CIS region
 
Инновации в рекламном бизнесе
Инновации в рекламном бизнесеИнновации в рекламном бизнесе
Инновации в рекламном бизнесе
 
Clase 2 Construcciones Geométricas
Clase 2   Construcciones GeométricasClase 2   Construcciones Geométricas
Clase 2 Construcciones Geométricas
 

Similar to HTTP 2.0 - Web Unleashed 2015

1 Web Page Foundations Overview This lab walk.docx
1  Web Page Foundations Overview This lab walk.docx1  Web Page Foundations Overview This lab walk.docx
1 Web Page Foundations Overview This lab walk.docx
honey725342
 
gofortution
gofortutiongofortution
gofortution
gofortution
 
20190516 web security-basic
20190516 web security-basic20190516 web security-basic
20190516 web security-basic
MksYi
 
Http/2 - What's it all about?
Http/2  - What's it all about?Http/2  - What's it all about?
Http/2 - What's it all about?
Andy Davies
 
HTTP2 is Here!
HTTP2 is Here!HTTP2 is Here!
HTTP2 is Here!
Andy Davies
 
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersSearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
Distilled
 
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Lachlan Hardy
 
HTTPS and HTTP/2
HTTPS and HTTP/2HTTPS and HTTP/2
HTTPS and HTTP/2
MatthewWalker9
 
HTTP colon slash slash: end of the road? @ CakeFest 2013 in San Francisco
HTTP colon slash slash: end of the road? @ CakeFest 2013 in San FranciscoHTTP colon slash slash: end of the road? @ CakeFest 2013 in San Francisco
HTTP colon slash slash: end of the road? @ CakeFest 2013 in San Francisco
Alessandro Nadalin
 
Html5 introduction
Html5 introductionHtml5 introduction
Html5 introduction
Karthik Nallajalla
 
High Performance Websites
High Performance WebsitesHigh Performance Websites
High Performance Websites
Parham
 
Type URL, Enter, and Then …
Type URL, Enter, and Then …Type URL, Enter, and Then …
Type URL, Enter, and Then …
Jinglun Li
 
Monitoring as an entry point for collaboration
Monitoring as an entry point for collaborationMonitoring as an entry point for collaboration
Monitoring as an entry point for collaboration
Julien Pivotto
 
Profiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / WebgrindProfiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / Webgrind
Sam Keen
 
High-Speed HTML5
High-Speed HTML5High-Speed HTML5
High-Speed HTML5
Peter Lubbers
 
CSU33012-I-microservices.pdf
CSU33012-I-microservices.pdfCSU33012-I-microservices.pdf
CSU33012-I-microservices.pdf
Ricky Garg
 
URL Design
URL DesignURL Design
URL Design
Walter Ebert
 
5 critical-optimizations.v2
5 critical-optimizations.v25 critical-optimizations.v2
5 critical-optimizations.v2
Blaze Software Inc.
 
Pushing the web — WebSockets
Pushing the web — WebSocketsPushing the web — WebSockets
Pushing the web — WebSockets
Roland M
 
Internet Explorer 8
Internet Explorer 8Internet Explorer 8
Internet Explorer 8
David Chou
 

Similar to HTTP 2.0 - Web Unleashed 2015 (20)

1 Web Page Foundations Overview This lab walk.docx
1  Web Page Foundations Overview This lab walk.docx1  Web Page Foundations Overview This lab walk.docx
1 Web Page Foundations Overview This lab walk.docx
 
gofortution
gofortutiongofortution
gofortution
 
20190516 web security-basic
20190516 web security-basic20190516 web security-basic
20190516 web security-basic
 
Http/2 - What's it all about?
Http/2  - What's it all about?Http/2  - What's it all about?
Http/2 - What's it all about?
 
HTTP2 is Here!
HTTP2 is Here!HTTP2 is Here!
HTTP2 is Here!
 
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersSearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
 
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
 
HTTPS and HTTP/2
HTTPS and HTTP/2HTTPS and HTTP/2
HTTPS and HTTP/2
 
HTTP colon slash slash: end of the road? @ CakeFest 2013 in San Francisco
HTTP colon slash slash: end of the road? @ CakeFest 2013 in San FranciscoHTTP colon slash slash: end of the road? @ CakeFest 2013 in San Francisco
HTTP colon slash slash: end of the road? @ CakeFest 2013 in San Francisco
 
Html5 introduction
Html5 introductionHtml5 introduction
Html5 introduction
 
High Performance Websites
High Performance WebsitesHigh Performance Websites
High Performance Websites
 
Type URL, Enter, and Then …
Type URL, Enter, and Then …Type URL, Enter, and Then …
Type URL, Enter, and Then …
 
Monitoring as an entry point for collaboration
Monitoring as an entry point for collaborationMonitoring as an entry point for collaboration
Monitoring as an entry point for collaboration
 
Profiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / WebgrindProfiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / Webgrind
 
High-Speed HTML5
High-Speed HTML5High-Speed HTML5
High-Speed HTML5
 
CSU33012-I-microservices.pdf
CSU33012-I-microservices.pdfCSU33012-I-microservices.pdf
CSU33012-I-microservices.pdf
 
URL Design
URL DesignURL Design
URL Design
 
5 critical-optimizations.v2
5 critical-optimizations.v25 critical-optimizations.v2
5 critical-optimizations.v2
 
Pushing the web — WebSockets
Pushing the web — WebSocketsPushing the web — WebSockets
Pushing the web — WebSockets
 
Internet Explorer 8
Internet Explorer 8Internet Explorer 8
Internet Explorer 8
 

Recently uploaded

What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
BibashShahi
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Pitangent Analytics & Technology Solutions Pvt. Ltd
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
saastr
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
Fwdays
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 

Recently uploaded (20)

What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 

HTTP 2.0 - Web Unleashed 2015

  • 1. Web Performance in the World of HTTP 2.0 Dave Methvin Independent Consultant President, jQuery Foundation This talk: https://goo.gl/5XPz0H
  • 2. As a front-end developer, do you ever get this feeling about Internet performance?
  • 3. History of the HTTP Protocol 1991: HTTP 0.9 1996: HTTP 1.0 1997: HTTP 1.1 … an eternity passes ...
  • 5. They're Upgrading Our Protocol HTTP 2.0 is coming Change your client, server, and build process to make things work even better
  • 6. A Wild SPDY Appears January 2011: Google includes SPDY in Chrome and supports the protocol in all their services. Other browsers and servers follow suit over the next year.
  • 8. The Move to HTTP 2.0 2010: SPDY appears 2012: Group starts standardization 2015: HTTP 2.0 complete 2016: Chrome to remove SPDY
  • 12. Services Already using HTTP/2 Wordpress.com Blogger.com (medium.com & tumblr.com use SPDY)
  • 13. Why HTTP/2 is Needed Connections today are dumb Manual tweaks: minification, sharding, combining, spriting, HTML resource order, XHR, up to six simultaneous connections per server … blah blah Latency (RTT) is a killer
  • 14.
  • 15. HTTP 2.0 is a Binary Protocol Can't use telnet for an HTTP/2 session When was the last time you did that? Plenty of tools can decode HTTP/2 sessions already, including most browser tools
  • 16. HTTP/1: Head-of-Line Blocking The current resource must finish downloading before making another request; each has a delay of one round-trip-time (RTT) big-image.jpg 500kb icon .png 1kb home .css 1kb info .js 1kb Multiple connections to the server are only a partial solution to this problem, and can cause their own problems (e.g., congestion) RTT delay RTT delay RTT delay
  • 17. HTTP/2: Connections Use Streams Streams are prioritized, cancellable, and preemptable! Stream 1: big-image.jpg (first 200kb) S4: icon .png 1kb S2: home .css 1kb S3: info .js 1kb Stream 1 (cont'd): big-image.jpg (final 300kb) Important resources arrive faster, on a "warm" connection Send me: big-image.jpg … icon.png, home.css, info.js
  • 18. HTTP/1: Bloated Headers In HTTP/1, headers are not compressed Cookies (often several hundred bytes!) User-Agent (this one is 124 bytes) User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36
  • 20. Web Developer Commandments Minimize DNS lookups Reuse HTTP connections Use a Content Delivery Network (CDN) Eliminate unnecessary request bytes Compress assets during transfer Cache resources on the client
  • 22. It's Actually A Lot Worse Than That webpagetest.org
  • 24. Rethink: Domain Sharding e.g. s.huffpost.com, i.huffpost.com ... Each connection requires setup/warmup Connections compete for resources DNS lookups, TCP congestion, retries Even on HTTP/1, performance can often be harmed by more than 2 shards
  • 25. Sharding Didn't Really Help webpagetest.org
  • 26. We Didn't Keep the Wire Busy! webpagetest.org
  • 27. Connection Coalescing HTTP/2 can use the same connection for two different hosts (e.g., s.huffpost.com and i.huffpost.com) if they resolve to the same IP address. (There will be different HOST headers on different streams.)
  • 28. Amazing Connection Coalescing If you have a TLS certificate that is valid for multiple DNS names (e.g., *.domain.com) and the names resolve to the same IP address, HTTP/2 can use the same connection for both hosts!
  • 29. Rethink: Cookieless Domains E.g., set cookie for www.huffpost.com and avoid cookie using i.huffpost.com HPACK makes it (mostly) unnecessary With HTTP/2 you can share cookies across *.huffpost.com without overhead worries
  • 30. Scripts/CSS Combined via PHP <script type="text/javascript" src="http://s.huffpost.com/assets/js.php?v=1441810385&f=huff.js%2Chp_config.js%2Cjs onmin.js%2Ccookiesmin.js%2Chp_track.js%2Chp_util.js%2Chp_browser.js%2Cget_font.js%2 Cpreload_topnav_font.js%2C_tmp%2Fcommon.js%2C_tmp%2Fclick_tracker.js%2C_tmp%2Fcommo n_paginator.js%2C_tmp%2Fhp_ads.js%2C_tmp%2Fquick_login.js%2Cfacebook.js%2Csnproject .js%2Chuff_promo.js%2Chptwitter_anywhere.js%2Ctwitter%2Ffrontpage.js%2Csearch_focus .js%2Csearch_autocomplete.js%2Cmod- follow.js%2Cconversations%2Fbootstrap.js%2C_front%2Ftopnav_new.js%2Cap_scroll_fastn ews.js">
  • 31. Rethink: Combining files Combining files reduces requests BUT You usually don't need the whole file right now Large files take longer to download Large files are slow for the browser to parse/run Changes invalidate the cached combined file
  • 32. Let HTTP/2 Fetch Smaller Files HTTP/2 reuses & prioritizes the connection Use a core, then more strategy First files handle the initial view ("above the fold") Other stuff can come in as needed (e.g. views) Avoid inlining JS/CSS Separate files can be cached independently
  • 33. Server Push Browser: "Send me /products.html" Server: "OK, also sending abovethefold.css" (Browser can cancel if it's already cached) This can be done by predictive algorithms on the server!
  • 34. Whoa.
  • 35.
  • 36. How a Browser Prioritizes Streams in a connection have weight (priority) dependency (reference to another stream) e.g., logo.jpg is useless without index.html Server should deliver bytes based on the requested weights and dependencies
  • 38. How to Detect HTTP 2.0 Use?
  • 41. Edge
  • 43. HTTP/1 and HTTP/2 Can Coexist
  • 44. To-Do List for HTTP/2 Ensure that your servers or CDNs support HTTP/2 -- bug your providers too! Make HTTP/2 effective w/o breaking HTTP/1 Reduce or eliminate sharding Avoid creating monolithic JS/CSS files Test to be sure you're getting HTTP/2 goodness (Expect future studies on HTTP/2 quality)
  • 45. ?On Twitter: @davemethvin This talk: https://goo.gl/5XPz0H
  • 46. RESOURCES Ilya Grigorik at Velocity https://www.youtube.com/watch?v=yURLTwZ3ehk http://www.slideshare.net/AndyDavies/http2-is-here http://www.slideshare.net/AndyDavies/the-case-for-http2 http://www.http2demo.io/ http://daniel.haxx.se/blog/2015/09/07/http2-115-days-with-the-rfc/