Network protocols (HTTP/2, HTTP/3, QUIC) and Web performance @Akamai. PhD. Dad. Longsword fencer. He/Him. @programmingart.bsky.social
Hasselt, Belgium
- Tweets 3,584
- Following 1,278
- Followers 5,897
- Likes 44,956
My talk from this year's @_welovespeed is now live!
In "Tight Mode: how browsers REALLY load web pages", I take a very deep dive into why browsers intentionally delay resources, why they do it differently, and why they should *stop clowning around* 🤡
piped.video/watch?v=p0lFyPuH…
5
9
807
Good tip, but there are some caveats. `--disable-http2` won't give you HTTP/3 but HTTP/1.1 + HTTP/3 (due to the alt-svc flow). A better method to force HTTP/3 is with the flags in my screenshot, but you have to manually indicate all origins, which is a PITA :(
1
7
295
Doing some testing for my @_welovespeed talk in two weeks and oh boy... do browsers disagree on how to load resources 🙄 Safari and Firefox take completely opposite routes (delay vs eager request all) and Chrome is more conservative than I thought. This'll be "fun" 🫠
2
1
12
1,025
My @fosdem talk "Insights from the RUM Archive" is now online at piped.video/watch?v=97Zonjjs…
Includes some interesting data on browser update speed, 3rd party cache hit ratios and... the first public results for @firefox's new Largest Contentful Paint support (faster than Chrome 😲)
1
8
19
2,158
On Sunday I'm speaking @fosdem about Insights from the @RUMArchive dataset (rumarchive.org).
Sneak preview into some of the most common 3rd party URLs we see: Dominated by Ad and Tracking scripts, with the first consent popup in 98th place... #stateoftheweb #webperf
3
8
32
3,100
I rarely post personal stuff, but since it's my birthday:
My wife and I struggled to get pregnant for 6 years. It took me a long time to be able to communicate about it. But earlier this year I put some things in a talk, hoping it might help others:
piped.video/i0h3oIrYI04
2
24
2,583
Finally, I also had some extra fun with the talk, as I used my Swordfighting hobby ⚔️ as a way to keep people awake (and to taunt my colleague @TimVereecke)!
See him getting his teeth knocked out in the sword-heavy stand-up comedy intermezzos! (No actual Tims were harmed)
2
396
I propose to fix this by creating more tooling that helps with debugging network-related performance analysis, which is sadly somewhat scarce to come by today.
Happily, the day after the talk, @paul_irish seemingly already started working on stuff for the Chrome devtools :)
1
426
Another important reason why this has flown under the radar, is because Chrome generally does this well, while especially Safari does not.
Yet the most often used WebPerf metrics (Core Web Vitals) are only available for Chromium-based browsers... this creates a huge blind spot.
1
1
136
In the future, we will further mitigate this by manually controlling priorities through the "fetchpriority" attribute (at least to an extent).
Fetchpriority works in Chrome, was released for Safari YESTERDAY (webkit.org/blog/14787/webkit…) and is coming up in Firefox.
1
1
132
You might think: if that's true, the Internet should be exceptionally slow... but it isn't. You're lying Robin! (I'm not 😉).
Luckily, browsers use a two-phase loading mode, where they limit the amount of in-flight resources, somewhat hiding/mitigating the worst impacts.
1
137
Sadly, the servers aren't much better... in my tests, only 2 of 12 of the largest companies/codebases/deployments get HTTP/2 and HTTP/3 prioritization right, with the others ranging from having mild issues to being completely broken.
1
148
The problem is that browsers can't seem to agree on how to use this simpler system either... they use (wildly) different urgencies for the same type of resource, and use incremental loading in inconsistent ways...
1
181
Because HTTP/2's system was too complex, for #HTTP3 we have a much simpler approach: an HTTP "priority" request header with two variables: urgency (the importance of a resource) and incremental (if resources can share bandwidth with others. Bad idea for JS/CSS/Fonts).
1
306
What I consider to be my ✨best talk ever✨ is now online!
"Resource Loading at the Cutting Edge" from @PerfNowConf dives deep into #HTTP3 resource prioritization, and how browsers, servers and tools support this critical feature (spoilers: not well! 👇)
piped.video/watch?v=MV034VqH…
3
30
97
15,617
I just submitted 3 proposals for the Web Performance devroom @fosdem 2024!
One on analyzing @RUMArchive data, one on the new WebTransport protocol and one a Resource Prioritization deep-dive! 👇
You can submit until 1 December as well:
wiki.mozilla.org/Performance…
See you there! 🚀
2
4
18
2,178
Finally Kudos to the team @PerfNowConf, with Krijn and PPK in the lead, to run one of the best organized and most engaging conferences I've ever attended.
I hope to visit PerfNow again for many years to come (and not just because I get a free ticket from now on 😏)
ALT Picture of me and my colleague Tim Vereecke on stage giving a basic longsword fencing demonstration
8
500
A big shout out especially to @csswizardry and @tkadlec who I feel have been taking me under their wing since my first ever presentation at DeltaV in 2018 and who are just titans (literally and figuratively) of #webperf.
Gentlemen, I salute you!
ALT Photo of me on stage with my longsword pointing at something off stage.
2
5
605
The quality level of all my fellow speakers was also phenomenal (except of course for @TimVereecke, who is too annoying to be on stage).
it was great to meet @jodiewyc, @TheNishuGoel, @RyanTownsend, @TheRealNooshu, Bas Schouten and many others for the first time (in the flesh).
ALT Group photo of all the organizers, team and speakers of the conference.
4
4
15
3,538
Next to this, it was again confirmed what an amazing community this is. These are not just very knowledgeable people, they are also kind, helpful, and plain fun to hang out with.
I geeked out with @KeerthanaK17 for like an hour about Silmarillion memes 💍 and BatMetal 🦇
1
3
145
I hope I've helped inspire the wider community to look deeper into this aspect, and to start adding better networking support to tooling.
Happy to say @paul_irish already had an effort in this direction going on for the Chrome Devtools, which is now (hopefully) accelerated :)
ALT Me on the stage in front of a slide comparing two approaches to combine preload with fetchpriority for an LCP image.
1
2
142
I felt comfortable to speak in considerable technical detail on a topic I care deeply about: Networking Performance in general, and HTTP Resource Prioritization specifically: perfnow.nl/_downloads/2023/R…
There are some big issues here, that imo lacked broader visibility.
ALT Me on stage in front of a slide with a word cloud of all major networking performance features released in the past few years (e.g., HTTP/3, fetchpriority, resource hints, 0-RTT, speculative loading, ...)
1
2
5
3,014
I can't really express how amazing @PerfNowConf was this year. #perfnow
Getting to speak there was at the top of my Bucket List since they started, and I am so grateful to have been given this opportunity in, what I feel, is potentially a crucial year/period for #webperf.
ALT Me on stage with my longsword doing my best impression of Italian Handgestures
3
1
39
4,307
I should be working on my @PerfNowConf talk for this Thursday, but I can't stop making memes... please send help!
It will likely be a somewhat contentious talk, because I have OPINIONS 🔥
Sadly, the event is sold out, but you can watch remotely via perfnow.nl/live-stream!
1
2
12
1,585
For the curious ones, Firefox doesn't have buttons, but uses a drop down menu instead (offering the Copy All option, which the other two don't have... 🤷♂️)
1
1
507
I'll be speaking a bit about browser inconsistencies next week at @PerfNowConf, and boy, this talk really writes itself... 🤦♂️
ALT Screenshot showing that Safari and Chrome use opposite icons (up/down arrows) to indicate import vs export.
4
2
34
3,652
Final technical addendum/nuance: in HTTP/3, it's actually QUIC managing the limits, and the limits are technically for "streams" and not for "requests".
See rfc-editor.org/rfc/rfc9113.h… for H2 and rfc-editor.org/rfc/rfc9000.h… for H3.
A good technical writeup: blog.cloudflare.com/technica…
Bye
ALT Photo of a person waving goodbye. Photo by Maria Lupan on Unsplash
4
765
So in the example above, if request 4 was in the same packet as req 1-3 (as with Rapid Reset), HTTP/3 would throw an error, since it would only update its cumulative limit (say to 6) after processing the entire packet.
The attacker can thus fit fewer requests per packet.
ALT Diagram that illustrates the example in the text
1
1
562
For HTTP/3:
Request 1 comes in (cumulative reqs = 1)
Request 1 is reset (cumulative reqs = 1)
Req 2 comes in (creqs = 2)
Req 2 is reset (creqs = 2)
Req 3 comes in (creqs = 3)
Req 3 is reset (creqs = 3)
If request 4 comes in, HTTP/3 would terminate with a STREAM_LIMIT_ERROR.
ALT Diagram that illustrates the example in the text
1
1
647
For HTTP/2:
Request 1 comes in (concurrent reqs = 1)
Request 1 is reset (concurrent reqs = 0)
Req 2 comes in (creqs = 1)
Req 2 is reset (creqs = 0)
Req 3 comes in (creqs = 1)
Req 3 is reset (creqs = 0)
Due to the Rapid Reset, the concurrency limit of 3 is "bypassed".
ALT Diagram that illustrates the example in the text
1
3
707
HTTP/3 is a more realistic setup: the machine only gets refilled when it's (nearly) empty or at set times. If it's empty, you just need to wait.
The HTTP/3 vending machine enforces this very strictly: if you try to buy an item that isn't there, it blows up the entire building!
ALT Photo of exploding shed. Photo by Stephen Radford on Unsplash
1
1
853
Let's start with a simple analogy of a vending machine.
HTTP/2 is like a very inefficient one: every time someone buys an item, it needs to be IMMEDIATELY replenished by a (very overworked) employee who attends it 24/7. It remains fully stocked at all times.
ALT Photo of two vending machines. Photo by Kenny Eliason on Unsplash
1
1
1
991
You've probably heard all about the new "HTTP/2 Rapid Reset" attack (CVE-2023-44487).
Maybe you've also heard it does NOT work on HTTP/3.
But do you know WHY NOT? Let's find out 👇
(note: it's best to read up on the attack first, for example here: cloud.google.com/blog/produc…)
ALT Visual of the Rapid Reset attack from the cloudflare blog https://blog.cloudflare.com/technical-breakdown-http2-rapid-reset-ddos-attack/
5
66
194
38,152
Can confirm this is indeed the case: there's a warning logged in the console when this happens that links to that intervention 👇
(Good to know I was not going crazy when I saw a font at Lowest priority 😅)
1
1
297
I looked deeper into the difference between JS <script type="module"> and <script defer> after some discussions this week claiming they're the same.
Turns out modules are fetched with a MUCH higher priority than defer scripts, but only in Chrome (High vs Low) 🤔
<script type="module" src...>
is the same as
<script defer src...>
Both will download the script as soon as possible, but wait until HTML is parsed before e
A question on the podcast: Is there any reason to still put a script tag at the bottom of you HTML?
No, right?
1
3
16
2,631
I've complained before that "preload" is a heavily overused term in frontend/#webperf, with many conflicting meanings and nuances.
Now Google will make it even worse by using "preloading" for the upcoming revival of prefetch/prerender: developer.chrome.com/en/blog…
🙄🙄🙄🙄🙄
ALT Gollum from Lord of the Rings being angry at the many different uses of the term "preload" in modern web development (preload link rel, navigation preloads in service worker, the preload scanner, and now prefetch+prerender
3
1
10
1,324
My @thejsnation talk "#HTTP3 for JavaScript developers" is now available for free at portal.gitnation.org/content…
Learn how HTTP/3 integrates with fetch(), why prioritization is important, why 103 Early Hints are cool, why PHP is still the best 😏, and what WebTransport is all about!
9
39
3,509
Tim entertaining customers with stories about Grey's Anatomy, scale modelling and a tiny bit of RUM best practices sprinkled on top
3
302
Proud to say my talk "Web Protocols for Frontend Developers" was the best rated session (4.87/5) of -all- 30+ talks @TEQnation2023!
Undoubtedly the sword had something to do with it ⚔️😏
A recording of the talk can be found at piped.video/watch?v=0kKdMqIh…
3
3
28
5,380
The video of my talk "Web Protocols for Frontend Developers" from @_welovespeed is now live at piped.video/watch?v=0kKdMqIh…!
Come learn about #HTTP3, #webperf, fetch priority, preload, Server Push, 103 Early Hints, and of course: Women with Beards! 👇
7
21
3,119
In two days I'll be in Utrecht for @TEQnation2023, one of the biggest tech events in The Netherlands!
I'll talk about HTTP 2+3 and how they're influenced by features like 0-RTT, preload, fetch priority and 103 Early Hints 🚀
If you're there, come say hi!
3
13
1,093
In just two weeks I'll be in Paris for @_welovespeed, one of the premier Web Performance conferences!
I'll talk about HTTP 2+3 and how they're influenced by features like 0-RTT, preload, fetch priority and 103 Early Hints 🚀
Only about 50 tickets left: welovespeed.com/2023/billett…
7
21
2,419
Very happy to announce that I'll be speaking at @TEQnation2023 in Utrecht (The Netherlands) on May 17! 🥳
Come learn more about #HTTP3, preload, fetchpriority, 0-RTT, and 103 Early Hints in "Web Protocols for Frontend Developers".
More info via teqnation.com/
ALT Promotional banner with my mugshot and the title "Web Protocols for Frontend Developers"
3
17
1,573
