An introduction to HTTP/3 - with trucks!

HTTP/3
@TomAnthonySEO
An accessible guide for SEOs

Photo by Max Baskakov on Unsplash

Photo by Paolo Feser on Unsplash

HyperText Transport Protocol
@TomAnthonySEO
HTTP is how webpages are transported to the browser

The Great HTTPS Migration
@TomAnthonySEO
Just 2 years ago*
* Corona years

Since then HTTP/2 has become increasingly popular…
https://www.brainlabsdigital.com/marketing-library/the-intro-guide-to-http-2-for-seos/
@TomAnthonySEO

HTTP/3 is on its way!
@TomAnthonySEO
Nov 2020 - Chrome & Edge
Feb 2021 - Opera
Apr 2021 - Firefox
May 2021 - Chrome for Android
Sep 2020 - Safari (optional)

@TomAnthonySEO
🤯
HTTP
HTTPS HTTP/2
HTTP/3

By the end of this presentation you will…
@TomAnthonySEO
‣ Know what HTTP is

‣ Understand HTTP/2 and HTTP/3

‣ Be able to explain the benefits of each

HTTP/1.1
 
The original recipe

Anatomy of an HTTP/1.1 request
@TomAnthonySEO
GET /anchorman/ HTTP/1.1

@TomAnthonySEO

Host: www.ronburgundy.com


@TomAnthonySEO

Host: www.ronburgundy.com

User-Agent: chrome v81

Anatomy of an HTTP/1.1 response
@TomAnthonySEO
HTTP/1.1 200 OK

Content-Type: text/html

Headers

Anatomy of an HTTP/1.1 response
@TomAnthonySEO
HTTP/1.1 200 OK

Content-Type: text/html

<html>

<head>

<title>Ron’s Page</title>

</head>

<body>

You stay classy, San Diego!

</body>

</html>
Headers
Body

HTTP Trucks!
Imagine an HTTP request is a truck, sent from your
browser to a server to collect a web page.
@TomAnthonySEO

HTTP Requests
Outbound trucks carry an HTTP request.
Request
@TomAnthonySEO

HTTP Responses
Returning trucks carry an HTTP response.
Response
@TomAnthonySEO

TCP/IP
TCP is the road; the transport layer for HTTP.
@TomAnthonySEO

Unlike real roads, these roads are private, and disappear!
TCP connections aren’t shared between users.
 
When you leave a site, they disappear.
@TomAnthonySEO

1 request is for 1 file
@TomAnthonySEO

Browser opening a web page
Let’s picture loading a webpage…
@TomAnthonySEO

The browser has to send a request truck for the HTML.
@TomAnthonySEO

@TomAnthonySEO
50ms

1 Webpage is many files
@TomAnthonySEO

@TomAnthonySEO
The HTML response references many other files.
 
Now they must be collected.

Often 50-150 (or more!) separate HTTP requests

1 connection can handle 1 request
Every truck needs its own road.
@TomAnthonySEO

Browsers can handle multiple connections
@TomAnthonySEO

Each TCP connection takes time to open.
Think of it as a steamroller laying down the road.
@TomAnthonySEO

Each TCP connection takes time to open.
Opening a new connection requires a full round trip,

before we can send a truck down it.
@TomAnthonySEO

Browsers open about 6 connections maximum.
Mmmmm…. trucks.
@TomAnthonySEO

Requests are queued
Trucks need to wait for a free road.
@TomAnthonySEO

Problem 1: Each connection needs to be opened first
@TomAnthonySEO
Each road takes time to build. Slow to build roads.

Problem 2: Trucks are open.
@TomAnthonySEO

People can look into passing trucks!
Steal our emails / bank details / passwords.
@TomAnthonySEO

HTTP 1.1
PROS
CONS
NOTES
• Response is a Header + Body

• 1 request = 1 file

HTTP 1.1
PROS
CONS
NOTES

• Widely supported

• Fairly straightforward

HTTP 1.1
PROS
CONS
NOTES

• Widely supported

• Fairly straightforward
• Needs many TCP Connections (slow to open)

• Not secure

HTTPS
 
Making things secure

HTTPS uses a tunnel, over the road we built.
The tunnel is built by TLS (SSL).
@TomAnthonySEO

HTTPS requests are identical to HTTP
The trucks in the tunnel are still exactly the same.
@TomAnthonySEO

TCP builds the road, as before…
@TomAnthonySEO
@TomAnthonySEO

TCP builds the road, as before…
@TomAnthonySEO

Then TLS is used to secure the road…
@TomAnthonySEO

But tunnels are complex…
TLS takes not 1 round trip…
@TomAnthonySEO

But tunnels are complex…
… but 2 round trips.
@TomAnthonySEO

So for TCP + TLS to build an HTTPS connection…
Means 3 round trips.
@TomAnthonySEO

3 round trips are needed before we send an actual request.
So for TCP + TLS to build an HTTPS connection…
@TomAnthonySEO

Trucks and Steam Rollers have a maximum speed.
@TomAnthonySEO
The further away the server, the longer requests take.

A single webpage will load resources from many (sub) domains
@TomAnthonySEO
Javascript, CSS, Fonts and more will be loaded from other sites

Each sub-domain will need its own road(s)
@TomAnthonySEO
www.searchpilot.com
www.facebook.com
This means opening additional connections. More round trips.

@TomAnthonySEO
IKEA page: 146 requests / 17 subdomains = over 200 round trips!

HTTPS: More secure, but even slower!

HTTPS (HTTP/1.1)
@TomAnthonySEO
PROS
CONS
NOTES

HTTPS (HTTP/1.1)
@TomAnthonySEO
PROS
CONS
NOTES
• Identical to HTTP 1.1

• ‘Wrapped’ in TLS (SSL) tunnel

HTTPS (HTTP/1.1)
@TomAnthonySEO
PROS
CONS
NOTES

• Encrypted connection protects privacy

HTTPS (HTTP/1.1)
@TomAnthonySEO
PROS
CONS
NOTES

• Encrypted connection protects privacy

• 3-4 round trips for a single request!

• It is now even slower

2.
HTTP/2
 
Making things faster

More bandwidth doesn’t help!
@TomAnthonySEO

Page load time vs bandwidth
@TomAnthonySEO
source: https://hpbn.co/primer-on-web-performance/

@TomAnthonySEO
source: https://hpbn.co/primer-on-web-performance/
Page load time vs latency

Building roads & tunnels is slow…
@TomAnthonySEO
…but HTTP/2 requires tunnels.

We need to eliminate round trips!

You can change how you build to reduce round trips
Site Speed
@TomAnthonySEO
Principles That Will 
Transform Your Understanding
(& the ‘secret’ fourth site speed method)
@TomAnthonySEO

2 Improvements offered by HTTP/2
@TomAnthonySEO
Multiplexing Server Push

Earlier: Requests are queued
Trucks need to wait for a free road.
@TomAnthonySEO

HTTP/2: Allows multiple requests per connection
@TomAnthonySEO
Multiple trucks can share a road.

Less road & tunnel building = fewer round trips.

HTTP/1.1 - Waterfall graph shows blocked requests
@TomAnthonySEO

HTTP/1.1 - Multiple roads and tunnels need to be built
@TomAnthonySEO

HTTP/2: No request blocking - all images immediately fetched
@TomAnthonySEO

HTTP/2: Traffic Jams
@TomAnthonySEO
Trucks can get stuck in traffic jams.
 
If TCP traffic is delayed or lost, traffic jams slow everything.

HTTP/2: Traffic Jams
@TomAnthonySEO
Particularly problematic on mobile connections
 
latency is higher, and ‘packet loss’ is higher

HTTP/2 Server Push
@TomAnthonySEO

HTTP/2 Server Push
@TomAnthonySEO
Browser sends a request for a webpage.

HTTP/2 Server Push
@TomAnthonySEO
Truck drives to server, like always.

HTTP/2 Server Push
@TomAnthonySEO
Server receives request for page,
 
but knows that you will need this font.

HTTP/2 Server Push
@TomAnthonySEO
Rather than wait for you to ask (round trip!),
 
the server instead just sends it right away.

HTTP/2 Server Push
Massive speed boost!
 
Perfect, right?
@TomAnthonySEO

HTTP/2 Server Push - Problem
@TomAnthonySEO
The server doesn’t know you need the font.
 
Maybe just loaded a page? Maybe it is cached from last week?

It tends to end up looking more like this…
@TomAnthonySEO
Server sends a pushed font with Page A
Page A

@TomAnthonySEO
Server sends same pushed font again with Page B
Page B

@TomAnthonySEO
…and page C
Page C

@TomAnthonySEO
More and more font trucks…

@TomAnthonySEO
Typically servers ‘over push’ and send files that the browser
already had. It causes more harm than good.
🔥
🔥
🔥
🔥
🔥🔥
🔥
🔥
🔥

HTTP/2
 
Performance & Adoption.

HTTP/2 Performance
27% to 60% faster
 
on the top 25 websites
@TomAnthonySEO
🚀
source: https://www.chromium.org/spdy/spdy-whitepaper

HTTP/2 Adoption
@TomAnthonySEO

HTTP/2: Better, but still lots of
 
time preparing connections.

HTTP/2
@TomAnthonySEO
PROS
CONS
NOTES

HTTP/2
@TomAnthonySEO
PROS
CONS
NOTES
• Introduces Multiplexing & Server Push

• Always encrypted (always uses a tunnel)

HTTP/2
@TomAnthonySEO
PROS
CONS
NOTES

• Multiplexing: Fewer round trips improves speed

• Don’t need to change the website to benefit

HTTP/2
@TomAnthonySEO
PROS
CONS
NOTES

• Multiplexing: Fewer round trips improves speed

• Don’t need to change the website to benefit
• Can suffer from traffic jams

• Push is broken

• Still lots of round trips

Recap
🐛 HTTP/1.1 was slow and insecure

Recap
🐛
🐌
HTTP/1.1 was slow and insecure
HTTPS added security, but was slower

Recap
🐢
🐛
🐌
HTTP/1.1 was slow and insecure
HTTPS added security, but was slower
HTTP/2 is a lot faster, but could still be faster

Enter HTTP/3
In 2012, Google invented QUIC, that later became HTTP/3.

TCP connections were roads
@TomAnthonySEO

TLS/SSL was a tunnel
@TomAnthonySEO

HTTP was the trucks
@TomAnthonySEO

HTTP layers
@TomAnthonySEO
Traffic
Security
Delivery

HTTP layers
@TomAnthonySEO
These parts are
responsible for a
lot of round trips.

HTTP/3 merges these responsibilities
@TomAnthonySEO
?

HTTP/3 merges these responsibilities
@TomAnthonySEO

HTTP/3 introduces… armoured trucks!
Big strong tyres - mean
it can go off road

HTTP/3 introduces… armoured trucks!
Armoured design
makes it secure
without tunnels.

@TomAnthonySEO

@TomAnthonySEO
HTTP/3 can just immediately send a truck.
 
No roads. No tunnels.

@TomAnthonySEO
Response comes back.

@TomAnthonySEO
Trucks are secure,
 
so cannot be spied upon.

Earlier… HTTP/2: Traffic Jams
@TomAnthonySEO
Trucks can get stuck in traffic jams.
 
If TCP traffic is delayed or lost, traffic jams slow everything.

@TomAnthonySEO
See you later,
 
suckers!
No roads means no traffic jams.
 
Particular important for mobile users.

@TomAnthonySEO
Earlier… IKEA page: 146 requests / 17 subdomains

@TomAnthonySEO
HTTPS: ~227 round trips

@TomAnthonySEO
HTTP/2: ~197 round trips
🔻30

@TomAnthonySEO
🔻30
🔻51

President’s Limo - The Beast
• 13cm thick bullet proof glass

• Run flat tyres

• Night vision optics

• Tear gas cannon

• Personal oxygen supply

• Integrated pump action shotguns

• Rumoured rocket propelled grenades!

• Cost $1.5 million

Obama went on a diplomatic visit to Ireland…

Got stuck on the driveway at the Embassy

HTTP/3 - initial connection
Chrome sends both.
 
If the armoured car cannot get in, then finish the road.

Earlier…HTTP/2 Server Push
@TomAnthonySEO
Rather than wait for you to ask (round trip!),
 
the server instead just sends it right away.

HTTP/3 Server Push
@TomAnthonySEO
In HTTP/3 there are improved safeguards,
 
to try and prevent over pushing.
1
Push ID

HTTP/3 - Performance
CloudFlare study: 12.5% faster TTFB in tests
source: https://blog.cloudflare.com/http-3-vs-http-2/

HTTP/3 - Headers are basically the same as HTTP/1.1
HTTP/3 200

content-type: text/html

<html>

<head>

<title>Ron’s Page</title>

</head>

<body>

You stay classy, San Diego!

</body>

</html>
Headers
Body

HTTP/3 - Response codes are the same still
200 404
301

Checking which protocol is used
Enable the protocol column in browser dev tools

CDNs
Enable the protocol column in browser dev tools

HTTP/3 is a quick performance win.
 
Doesn’t require changing your site.

HTTP/3 is not a migration.
 
Same https:// links as before. Don’t panic.

HTTP/3 is secure by design.
 
Still need an SSL certificate for it.

HTTP/3 will fall back to HTTP/2
 
If HTTP/3 is not available, it will automatically use HTTP/2.

HTTP/3 can help Core Web Vitals
 
Delivering the pages faster will help your aggregated metrics.

* No cats were harmed in the making of this presentation.
HTTP/3

I would love some questions! Ask me here, or on Twitter! :)
@TomAnthonySEO
Danke! Grazie! Tack! Merci!
 
Thanks! Dankje! Dziękuję!

An introduction to HTTP/3 - with trucks!

More Related Content

Similar to An introduction to HTTP/3 - with trucks!

More from Tom Anthony

Recently uploaded

An introduction to HTTP/3 - with trucks!