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.
8. ANATOMY OF AN HTTP/1.1 REQUEST
GET /anchorman/ HTTP/1.1
@TomAnthonySEO #brightonSEO
9. ANATOMY OF AN HTTP/1.1 REQUEST
GET /anchorman/ HTTP/1.1
Host: www.ronburgundy.com
@TomAnthonySEO #brightonSEO
10. ANATOMY OF AN HTTP/1.1 REQUEST
GET /anchorman/ HTTP/1.1
Host: www.ronburgundy.com
User-Agent: my-browser
@TomAnthonySEO #brightonSEO
11. ANATOMY OF A RESPONSE
HTTP/1.1 200 OK
Content-Type: text/html HEADERS
@TomAnthonySEO #brightonSEO
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 #brightonSEO
13. 1 REQUEST IS FOR 1 FILE
@TomAnthonySEO #brightonSEO
14. HTTP TRUCKS!
Imagine an HTTP request is a truck, sent from your
browser to a server to collect a web page.
@TomAnthonySEO #brightonSEO
15. TCP/IP & HTTP
TCP is the road; the transport layer for HTTP.
@TomAnthonySEO #brightonSEO
18. PROBLEM! ANYONE CAN LOOK INTO PASSING TRUCKS
With HTTP, people could look into the trucks,
and find out all your secrets!!
@TomAnthonySEO #brightonSEO
19. HTTPS
With HTTPS the road is the same, but we drive through a tunnel.
@TomAnthonySEO #brightonSEO
20. HTTPS REQUESTS ARE IDENTICAL TO HTTP
The trucks in the tunnel are still exactly the same.
@TomAnthonySEO #brightonSEO
29. BROWSER COLLECTING A PAGE
Imagine the browser wants to render a page.
@TomAnthonySEO #brightonSEO
30. EVERY ROUND TRIP TAKES TIME
50ms to get to the server.
@TomAnthonySEO #brightonSEO
31. EVERY ROUND TRIP TAKES TIME
Server takes 50ms
to make page.
@TomAnthonySEO #brightonSEO
32. EVERY ROUND TRIP TAKES TIME
50ms to get back to the browser.
@TomAnthonySEO #brightonSEO
33. HTML RESPONSE PROMPTS MORE ROUND TRIPS
Once it has the HMTL the browser
discovers it needs more files.
@TomAnthonySEO #brightonSEO
34. 1 CONNECTION CAN HANDLE 1 REQUEST
Every truck needs its own road.
@TomAnthonySEO #brightonSEO
35. LUCKILY BROWSERS CAN HANDLE MULTIPLE CONNECTIONS
We can have more roads and more trucks.
@TomAnthonySEO #brightonSEO
36. BUT CONNECTIONS TAKE TIME TO OPEN
Think of it as a steamroller laying down the road.
@TomAnthonySEO #brightonSEO
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 #brightonSEO
38. BROWSERS TYPICALLY OPEN ABOUT 6 CONNECTIONS MAX
Opening more has diminishing returns,
and other issues. @TomAnthonySEO #brightonSEO
39. THIS MEANS SOME REQUESTS HAVE TO WAIT
Trucks have to queue line up for a road.
@TomAnthonySEO #brightonSEO
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 #brightonSEO
42. THIS IS WHY PEOPLE MADE SPRITE SETS
@TomAnthonySEO #brightonSEO
48. HTTP2 REQUESTS ARE STILL THE SAME
The content of the trucks are still the same.
Just a new road / traffic management system!
@TomAnthonySEO #brightonSEO
49. HTTP/2 FORMAT IS THE SAME AS HTTP/1.1
GET /anchorman/ HTTP/2
host: www.ronburgundy.com
user-agent: my-browser
@TomAnthonySEO #brightonSEO
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 #brightonSEO