How HTTP/2 Works, Performance, Pros & Cons and More

HTTP/2 or H2 for short is a major revision of the hyper text transfer protocol that improves the performance of the web. It uses a binary protocol and multiplexing.
HTTP/2 (Slides)
payhip.com/b/E37AG
(Members get all slides for free. Become a Member to support the channel)
/ @hnasr
Time codes
0:00 Intro
2:15 HTTP 1.1
5:50 HTTP/2
8/25 HTTP/2 With Push
9:48 HTTP/2 Pros
14:10 HTTP/2 Cons
17:15 Demo
In this video I want to go through how HTTP/2 works, its pros and cons and show the performance difference between HTTP 1.1 and HTTP/2
Http/1
request has to wait for a response
And if you used up your connection response you can send anything else.
Source Code: github.com/hnasr/javascript_p...
So hack !
6 tcp connections
Pros
One connection
Multipex
Push ( have to enable)
Hpack (compress)
Cons
Abuse push
Proxies that dont support it might slow down
Load balancer layer 7 (a layer 7 load balancer that doesnt support h2 will slow down when your web server supports it)
+----------+--------+---------+---------+
| Protocol | Online | Fast 3G | Slow 3G |
+----------+--------+---------+---------+
| HTTP 1.1 | 94 ms | 10 s | 36 s |
+----------+--------+---------+---------+
| HTTP/2 | 171 ms | 2.7 s | 10 s |
+----------+--------+---------+---------+
Fundamentals of Networking for Effective Backends udemy course (link redirects to udemy with coupon)
network.husseinnasser.com
Fundamentals of Database Engineering udemy course (link redirects to udemy with coupon)
database.husseinnasser.com
Introduction to NGINX (link redirects to udemy with coupon)
nginx.husseinnasser.com
Python on the Backend (link redirects to udemy with coupon)
python.husseinnasser.com
Become a Member on KZbin
/ @hnasr
Arabic Software Engineering Channel
/ @husseinnasser
🔥 Members Only Content
• Members-only videos
🏭 Software Architecture Videos
• Software Architecture
💾 Database Engineering Videos
• Database Engineering
🛰 Network Engineering Videos
• Network Engineering
🏰 Load Balancing and Proxies Videos
• Proxies
🐘 Postgres Videos
• PostgresSQL
🧮 Programming Pattern Videos
• Programming Patterns
🛡 Web Security Videos
• Web Security
🦠 HTTP Videos
• HTTP
🐍 Python Videos
• Python by Example
🔆 Javascript Videos
• Javascript by Example
Support me on PayPal
bit.ly/33ENps4
Become a Patreon
/ hnasr
Stay Awesome,
Hussein

[@hnasr]

Get my Fundamentals of Networking for Effective Backends udemy course Head to network.husseinnasser.com for a discount coupon (link redirects to udemy with coupon applied)

[@allisonmachado]

Netflix for developers :)

[@hnasr]

❤️

[@ScarzChosenspokesmen]

LOL great comment

[@nadertarek4822]

HAHA! literally

[@andile5945]

And you don’t have to use someone else’s account

[@nateengedal7939]

hard pass on the chill

[@whereismypipey]

I loved the picture grid loading example to nicely visualize the performance and difference in number of connections.

[@umeshshetty0605]

I am a Network Engineer but I love the backend Engineering stuff that you show and it makes it easier for me to understand application problems while troubleshooting the network side of it. Thank You and Keep posting !!!

[@hnasr]

Thanks!! Glad to see more network engineers in the channel. Cheers

[@dean6046]

thank you Hussein! I want you to understand that this is great content and I love the way you deliver it with such energy and excitement. I frequently download videos from KZbin for offline use and I just downloaded this one because I think it's great content.

[@balramverma4873]

This channel is to addictive that even in the period I’m focusing on front end stuff i end up watching these.

[@omriterem6448]

One of the best KZbin channels for programmers...

[@mohamad5497]

Your content is great! Thanks Hussein!

[@Esmi_here]

It was so fun watching!!

[@SatishKumar-jb9qm]

Your content is great! Thank you for posting.

[@amsterdenko9854]

First time on your channel. Subscribed after this first video. I like your style of content delivery. Such a themes become much more entertantaining. Thank You!

[@SateeshBandi]

Very good demo.. I loved it.

[@mageshp5998]

Liked your demo!!

[@smohammadhn]

Fantastic explanation, loved it

[@ankitsah2819]

Awesome explanation 👍🏻

[@kaleemullah247]

Loved the demo.

[@user-fm7kj3li2w]

excellent!! very clear provocation and easy to understand.

[@hnasr]

Thank you 🙏

[@romantsyupryk3009]

Thanks so much for this video tutorial.

[@natarajboina7525]

This was very insightful. Thanks for this video.

[@hnasr]

Thanks for your comment Nataraj

[@TimothyNyota]

Subscribed!! Great content, man!!

[@subhamthemusicalguy8851]

Joined your channel to support you. Excellent work

[@hnasr]

❤️ thanks Subham ! Appreciate your support

[@GauravJain108]

Thanks, Hussein! :)

[@andikakurniawan4188]

I like this guy. This guy is smart and also have talent to be teacher...

[@Lucasmont001]

excellent video! Thanks! ;)

[@oah8465]

More reasons to love. L4 LBs. Thx Hussein.

[@shubhampawar2207]

Awesome Presentation!...

[@hnasr]

😊🙏 thanks

[@AnilSharma-gr6ck]

very good , thanks

[@romantsyupryk3009]

Amazing demo HTTP/1.1 and HTTP/2.0 Thanks you very very very much.

[@hnasr]

thanks Roman for all the love and comments!!!

[@romantsyupryk3009]

@@hnasr 😃😉

[@AwesomeMetalBands]

Seriously great content very very interesting!!@

[@hozay6552]

So many advances for the internet that I was not aware of!

[@longtranbao4177]

Thanks you! In school people don't teach about this stuff.

[@rahulmalu6741]

Hi @husseon Nassar: In the demo for http2, did you used the server push mechanism to push the 100 images or only the protocol was set to http2 (without enabling the server push)?

[@fraollemecha]

HTTP/2: We gotta do it fast. Michael Scott: That's what she said.

[@bharat639]

I have watched a lot of your videos. Thank you very much for sharing your knowledge.

[@amrudeshs]

Hei. Great info. Thnx. Can you also make a comparison between HTTP2 server push and Websockets based push messages? I understand that they dont serve the same purposes but a short video on it explaining when to use what would be great.

[@maheshkariya]

Thanks 🙏

[@danielkrajnik3817]

the more I learn about software, the more I find that every next upgrade boils down to parallelization

[@akashdeepbilkhu8076]

Amazing

[@treepiesinc1418]

good. thanks.

[@shah5364]

thanks

[@zitro7052]

Im in education as IT-Specialist - System Integration right now, third year and almost finished my Project. My Teachers couldnt teach us normal OSI model or SQL, we never had HTML in school. imagine you doin this just in your free time and you are more meaningfull as much Teachers in germanys working schools for myself and some friends. Thanks for that little snack, i just wanna set up an HTTP 2 server now :D! should i go for nginx or more for something like apache?

[@sreevishal2223]

michael scott..! , that's what she said.. haha :p :p Nice explanation..!

[@Ranjith_P]

Its a huge performance difference - thats what she said

[@nabidulalam6956]

powerful stuff :v

[@chenrvn]

1. Thanks, Gr8 video 2. It will be helpful if u will show the stream Ids in the http request/response and the TLS connection mechanism 😎

[@hnasr]

Thanks Chen! That is a great idea diving deep into the belly of the beast of HTTP/2.. will consider it in the future.

[@chenrvn]

@@hnasr you are the men

[@abnan0001]

I checked again brother Is there any update for the series

[@surendrasharma8238]

not much learning. But still good for beginners.

[@Twerqt]

Hey, that is a brilliant explanation. I have one question. How did you say at 18:40 that there are 6 TCP connections sending images in parallel .. I couldn't make it out from the video

[@hnasr]

Siddartha Reddy Thanks 🙏 6 connections are opened in case of HTTP/1 In browsers i explain this here Why Browsers have 6 active TCP Connections for each website? kzbin.info/www/bejne/jpzVY6Gja7qDhJo

[@venkateswarans1012]

HTTP 2 resolves head of line blocking at application layer but in transport layer (TCP) it's still exist and Quic is trying something to achieve even on transport layer level.

[@jerweiyeoh7096]

Awww yis, another 1k like Either there is an ongoing meme on the community of leaving the like counts at 999 and I'm screwing it, or I'm on fire! XD PS: Appreciate the explanations, both high level and low level.

[@hnasr]

🙏🙏🙏

[@Tony-dp1rl]

Those CONs of HHTP/2 are certainly a stretch, given a server could return a HTML page with all sorts of unused assets in it anyway which effectively creates a PUSH in terms of network load ... and the chances of having a H1 load balancer and H2 backend are almost zero.

[@devashishrana1637]

Suppose my configuration is client -> gateway -> server, how will http2 behave in this scenario between each layer?? or should I just keep only client and gateway in http2?

[@abdelrhmanahmed1378]

does http2 also multiplex the segment inside each request or send them in sync and wait for each segment ack ?!

[@orzumirzayev7026]

Is Hussein right when saying http 1.1 uses separate tcp connection for each request?

[@saumyapandey218]

What happens when a file is already cached in the client but the server pushes the file because of its configuration?

[@PouriyaJamshidi]

cURL supports HTTP/3 (experimental) as well.

[@hnasr]

Nice! Didn't know that, looks like I need to make a video about cURL, thanks !

[@PouriyaJamshidi]

@@hnasr Thanks to you.

[@harshg2003]

How can I check if my web server supports Http/1.1 or H/2 or H/3? How can I force H1 and H2 on either client side or server side, if they supports both?

[@hnasr]

Hey Harash, I recommend chrome dev tools. Good idea ill make a video on this

[@raphaelkuttruf]

great content :) how would i set up http2 in my backend network after a reverser proxy?

[@arongulyas6096]

HAproxy supports http/2

[@shavishvilitornike]

How do I become member of this channel?

[@sawza0313]

🎉👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼

[@waagnermann]

when you showed benchmarks where it was written that there was 6 TCP connections? in network panel

[@hnasr]

From Google paper Popular Web browsers, including IE8 [2], Fire- fox 3 and Google’s Chrome, open up to six TCP connections per domain, partly to increase parallelism and avoid head-of- line blocking of independent HTTP requests/responses, but mostly to boost start-up performance when downloading a Web page. static.googleusercontent.com/media/research.google.com/en//pubs/archive/36640.pdf

[@Shmancy_pants_69]

Hey noob question, how did you run that test on the image? that was cool. Please reply :-)

[@hnasr]

It was a Python script I found online stackoverflow.com/questions/5953373/how-to-split-image-into-multiple-pieces-in-python

[@palaniappanrm6277]

How to host a server in local with HTTP/2 support? Does node http-server, apache tomcat support it?

[@hnasr]

Palaniappan RM sure all of those support it! Check out this video where I show h2 on caddy because its the easiest Getting started with Caddy the HTTPS Web Server from scratch kzbin.info/www/bejne/qmXRkn98iNF1prM

[@45xtc]

Thank a lot Hussein.one question?for example clent says keep alive and server response not keep alive.what does it happen in tcp connection?client will try to re establish again with 3 way handshake?

[@hnasr]

If the server doesn’t support keepalive (which I will be surprised if it doesn’t means it is so old its 1997 or prior) the connection will be terminated after the response will be created. In http/2 the connection will be always kept alived

[@45xtc]

​@@hnasr thank you very much for you great content that you offer us!keep going

[@ahsannasir6214]

10:41 I see what you did there xD

[@flobbie87]

What, where does it say in the spec that i have to wait for the response to send another request? I hope no actual client does that.

[@hhellohhello]

Sorry, but whats the difference between keep alive header and multiplexing?

[@hnasr]

hhellohhello no problem! the Keepalived header instructs the server to not immediately close the TCP connection after it is made so we continue send more data through it. This was available since http 1.1 Multiplexing is the ability to send multiple requests in parallel in that TCP connection. Something we couldn’t in http 1.1 and only available in http2

[@hazemabdelalim5432]

The idea here , if the server and client keeps this connection open , isn't that some-kind of wasting resources ? if the client doesn't request anything , the server will still need to have maintain this connection even if the user doesn't use it , probably we can set a ttl to the open connection , so after that time with not being active , it will be closed

What is difference HTTP1.1 persistent connection and H2 multiplexing?

[@hnasr]

Both HTTP 1.1 and H2 have persisted connection. (They are not closed as long as requests are being sent) The difference is in H1.1 you can only send one request at a time and you can’t send another request until you get a response.. this is made slightly better with pipelining where you can send multiple requests in the same connection but the server must respond in order the requests where sent. This causes problems with proxies and bad implementations. So browsers in HTTP 1.1 opens multiple connections to get around this limitations. In H2 you can send any number of requests in the same connections in parallel. The reason is each request is uniquely identified with a streamid. So if we get a response we know what request it belongs to All of this is hidden from us programmers but its good to understand.. Watch my HTTP/2 playlist here to learn more HTTP/2 kzbin.info/aero/PLQnljOFTspQWbBegaU790WhH7gNKcMAl-

[@AMFLearning]

amflearning by doing

[@apoorvamishra5952]

how can we check if it's a 6 TCP connections in case of HTTP/1.1 in developers tool?

[@hnasr]

ConnectionID, I illustrate this here kzbin.info/www/bejne/gnPKl4atjZl6eqs

[@apoorvamishra5952]

@@hnasr cool thanks!

[@virgilbaldovin1852]

If someone asks me “what is an API?” i’ll send them this one

[@Emmanuel-px9lk]

Why does HTTP 1.1 use '6' TCP connections? Is it a technical reason it is 6 or is this just a common standard?

[@hnasr]

kidsWillSeeGhosts why 6 in particular I think it was anecdotal evidence that more than 6 doesn’t give more performance but more TCP overhead.. If you are asking Why H1 open many connections is to be able to send multiple requests in parallel (can’t do that in a single tcp connection) H2 allowed sending multiple requests in a single tcp connection using streams hope that helps 😊

If a lot of multiple objects are loaded in parallel, each object will just compete for this limited bandwidth, so each object will load proportionally slower. Also clients might be able to open hundreds of connections, but few web servers will want to do that, because they often are processing requests for many other users at the same time. A hundred simultaneous users, each opening 100 connections, will put the burden of 10,000 connections on the server. This can cause significant server slowdown.

[@Emmanuel-px9lk]

@ Thanks

[@abnan0001]

Geodatabase related videos have been removed from your channel Could u please reupload then As the videos were helpful for us Thanks

[@hnasr]

Muhammad Abnan hey Muhammed can you try again? Let me know..

[@abnan0001]

Hi It’s not there brother Last week I saw but since from afternoon I’m looking those But I cannot find it at all

[@abnan0001]

Nothing is there about geodatabase series and versioning related

[@hnasr]

Muhammad Abnan Multi-User Geodatabase kzbin.info/aero/PLQnljOFTspQWseiNSmOMgsR5lgugKg_KP

[@sidharthvijayakumar3521]

This is not right load balancer layer 7 supports http 2. Recently i have created a flask app which only supports http 1.1 which using gunicorn which also does not support http 2 . Then used Cloudrun which was deployed as a backend to Classic application LB in GCP so my api in local shows as http 1.1 but the same Api in the load balancer i get it as http2 so i do not think what you said is relevant now.

[@akashdeepnandi]

21:57 that's what she said😂😂😂

[@YineMiBen]

thanks youtube has 2x speed :)

[@diaahs]

That's what she said. 😂

[@masterali3270]

انا رفيق علي احمد

[@masterali3270]

Hello

[@matsematse9034]

can you make the videos in arabic too?

[@hnasr]

matse matse I was considering making another channel as a test or at least include subtitles but it is a lot of work.

[@masterali3270]

مرحبا

[@pawan29121991]

Helllozzzz

[@excelinaccounting8094]

Hahaha thats what she said

[@apoorvamishra5952]

stuff is good, you just need not to make the voices , a simple and straight way of talking would be more clear, i presume.

[@suyashjain07]

time consuming video. could be made bit shorter.