HTTP/2 BrightonSEO 2018

1. Tom Anthony Distilled An introduction to HTTP/2 for SEOs @TomAnthonySEO https://www.slideshare.net/tomanthony/

2. EMAILS RUNNING OUT OF POWER

3. 500 MILE EMAIL Connection timeout = 6 milliseconds Speed of light = 299 792 458 m/s Distance = 558 miles

4. HTTP1 HTTP2 TAKEAWAYS

5. WHY HTTP/2 MATTERS

6. HTTP/1.1

7. HTTP @TomAnthonySEO #brightonSEO

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

16. HTTP REQUESTS Outbound trucks carry an HTTP request. Request @TomAnthonySEO #brightonSEO

17. HTTP RESPONSES Returning trucks carry an HTTP response. Response @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

21. HTTP sounds great & HTTPS is secure. Why change? ?

22. PROBLEM #1: SMALL REQUESTS/RESPONSES STILL TAKE TIME Even the fastest trucks can only go at the speed of light! @TomAnthonySEO #brightonSEO

23. LATENCY & ROUND TRIP TIMES Longer roads mean it takes longer for a response to come back. @TomAnthonySEO #brightonSEO

24. PROBLEM #2: PAGES MADE OF MANY FILES (MANY REQUESTS) @TomAnthonySEO #brightonSEO

25. NUMBER OF ASSETS ON PAGES HAS INCREASED @TomAnthonySEO #brightonSEO

26. OFTEN 50-100 SEPARATE HTTP REQUESTS @TomAnthonySEO #brightonSEO

27. PROBLEM #3) MOBILE CONNECTIONS INCREASE LATENCY @TomAnthonySEO #brightonSEO

28. What does all of this add up to? !

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

40. BLOCKED REQUESTS Only 6 requests being run at a time. @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

43. CDNS MOVE THINGS CLOSER & REDUCE LATENCY

44. HTTP/2 to the rescue!

45. MULTIPLEXING ALLOWS MANY REQUESTS PER CONNECTION Now multiple trucks can be on the road at once! @TomAnthonySEO #brightonSEO

46. HTTP/1.1 WATERFALL - BLOCKED REQUESTS @TomAnthonySEO #brightonSEO

47. HTTP/2 WATERFALL - NO BLOCKING @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

51. HTTP/2 RESPONSE CODES UNCHANGED 200 404301 @TomAnthonySEO #brightonSEO

52. HTTP2 ALLOWS ‘SERVER PUSH’ With Server Push, a single request is sent, but the server sends multiple responses. @TomAnthonySEO #brightonSEO

53. HTTP2 ALLOWS ‘SERVER PUSH’ If the server knows the HTML requires other assets, it can send them back with the HTML. @TomAnthonySEO #brightonSEO

54. HTTP2 REQUIRES HTTPS In order to get the better traffic management, you need a tunnel! @TomAnthonySEO #brightonSEO

55. How can I get HTTP/2? ?

56. Your devs don’t need to do anything! The server does all the work.

57. CDNS CAN DO IT FOR YOU! HTTP/2 between visitors and CDN HTTP/1.1 between CDN and Server

58. Does Google notice if I have HTTP/2? ?

59. GOOGLEBOT DOES NOT CRAWL https://moz.com/blog/challenging-googlebot-experiment @TomAnthonySEO #brightonSEO

60. THUS IT WON’T IMPROVE SCORES IN GSC Google’s WRS doesn’t use it at all, currently. @TomAnthonySEO #brightonSEO

61. BUT THAT ISN’T HOW GOOGLE EVALUATE SPEED @TomAnthonySEO #brightonSEO

62. CHROME USER EXPERIENCE REPORTS

63. HTTP/2 TAKEAWAYS

64. It can be a quick performance win. CDNs can make deployment ‘easy’.

65. HTTP/2 requires HTTPS*. Likely to see last holds outs migrating to HTTPS. (* in all major browsers)

66. Enable the ‘Protocol’ column.

67. SPDY was HTTP/2’s predecessor. It is being retired.

68. Chrome Extension: https://dis.tl/showhttp2

69. HTTP/1.1 and HTTP/2 exist together. Browsers will fall back to HTTP/1.1.

70. Moving to HTTP/2 is not a migration.

71. Googlebot won’t benefit, but Google will notice.

72. Thank you! @TomAnthonySEO

HTTP/2 BrightonSEO 2018

You are reading a preview.

Check these out next

HTTP/2 BrightonSEO 2018

More Related Content

Slideshows for you (20)

Similar to HTTP/2 BrightonSEO 2018 (20)

More from Tom Anthony (16)

Recently uploaded (20)