HTTP/2 can help improve the performance of your site, and is a technology SEOs should have an understanding of. This deck gives you an accessible top level introduction as an SEO. Presented at SearchElite in London 2018.
8. ANATOMY OF AN HTTP/1.1 REQUEST
GET /anchorman/ HTTP/1.1
@TomAnthonySEO #TheSearchElite
9. ANATOMY OF AN HTTP/1.1 REQUEST
GET /anchorman/ HTTP/1.1
Host: www.ronburgundy.com
@TomAnthonySEO #TheSearchElite
10. ANATOMY OF AN HTTP/1.1 REQUEST
GET /anchorman/ HTTP/1.1
Host: www.ronburgundy.com
User-Agent: my-browser
@TomAnthonySEO #TheSearchElite
11. ANATOMY OF A RESPONSE
HTTP/1.1 200 OK
Content-Type: text/html HEADERS
@TomAnthonySEO #TheSearchElite
12. ANATOMY OF A RESPONSE
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
@TomAnthonySEO #TheSearchElite
13. 1 REQUEST IS FOR 1 FILE
@TomAnthonySEO #TheSearchElite
14. HTTP TRUCKS!
Imagine an HTTP request is a truck, sent from your
browser to a server to collect a web page.
@TomAnthonySEO #TheSearchElite
15. TCP/IP & HTTP
TCP is the road; the transport layer for HTTP.
@TomAnthonySEO #TheSearchElite
18. PROBLEM! ANYONE CAN LOOK INTO PASSING TRUCKS
With HTTP, people could look into the trucks,
and find out all your secrets!!
@TomAnthonySEO #TheSearchElite
19. HTTPS
With HTTPS the road is the same, but we drive through a tunnel.
@TomAnthonySEO #TheSearchElite
20. HTTPS REQUESTS ARE IDENTICAL TO HTTP
The trucks in the tunnel are still exactly the same.
@TomAnthonySEO #TheSearchElite
29. BROWSER COLLECTING A PAGE
Imagine the browser wants to render a page.
@TomAnthonySEO #TheSearchElite
30. EVERY ROUND TRIP TAKES TIME
50ms to get to the server.
@TomAnthonySEO #TheSearchElite
31. EVERY ROUND TRIP TAKES TIME
Server takes 50ms
to make page.
@TomAnthonySEO #TheSearchElite
32. EVERY ROUND TRIP TAKES TIME
50ms to get back to the browser.
@TomAnthonySEO #TheSearchElite
33. HTML RESPONSE PROMPTS MORE ROUND TRIPS
Once it has the HTML the browser
discovers it needs more files.
@TomAnthonySEO #TheSearchElite
34. 1 CONNECTION CAN HANDLE 1 REQUEST
Every truck needs its own road.
@TomAnthonySEO #TheSearchElite
35. LUCKILY BROWSERS CAN HANDLE MULTIPLE CONNECTIONS
We can have more roads and more trucks.
@TomAnthonySEO #TheSearchElite
36. BUT CONNECTIONS TAKE TIME TO OPEN
Think of it as a steamroller laying down the road.
@TomAnthonySEO #TheSearchElite
37. BUT CONNECTIONS TAKE TIME TO OPEN
Opening a new connection requires a full round trip,
before we can send a truck down it.
@TomAnthonySEO #TheSearchElite
38. BROWSERS TYPICALLY OPEN ABOUT 6 CONNECTIONS MAX
Opening more has diminishing returns,
and other issues. @TomAnthonySEO #TheSearchElite
39. THIS MEANS SOME REQUESTS HAVE TO WAIT
Trucks have to queue up for a road.
@TomAnthonySEO #TheSearchElite
41. DECREASING LATENCY IMPROVES THINGS A LOT
Short roads reduce truck waiting times,
and dramatically improve load times.
source: https://hpbn.co/primer-on-web-performance/ @TomAnthonySEO #TheSearchElite
42. THIS IS WHY PEOPLE MADE SPRITE SETS
@TomAnthonySEO #TheSearchElite
48. HTTP2 REQUESTS ARE STILL THE SAME
The content of the trucks are still the same.
Just a new road / traffic management system!
@TomAnthonySEO #TheSearchElite
49. HTTP/2 FORMAT IS THE SAME AS HTTP/1.1
GET /anchorman/ HTTP/2
host: www.ronburgundy.com
user-agent: my-browser
@TomAnthonySEO #TheSearchElite
50. HEADER & BODY
HTTP/2 200
content-type: text/html
<html>
<head>
<title>Ron’s Page</title>
</head>
<body>
You stay classy, San Diego!
</body>
</html>
HEADERS
BODY
@TomAnthonySEO #TheSearchElite