Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTTP/2 BrightonSEO 2018

5,249 views

Published on

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.

Published in: Internet
  • This is fantastic - I love the truck analogy for the difference between HTTP/1 and HTTP/2. This really helped make the theory stick for me. And I was delighted to find that the tools the we already use and love help enable this (once HTTPS is in play). Great work Tom!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Following article suggests that it's still not supported by googlebots https://moz.com/blog/challenging-googlebot-experiment
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Very Nice: See Latest Blogs @ https://www.thesisscientist.com/Blog
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great explanation, cheers.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

HTTP/2 BrightonSEO 2018

  1. 1. Tom Anthony Distilled An introduction to HTTP/2 for SEOs @TomAnthonySEO https://www.slideshare.net/tomanthony/
  2. 2. EMAILS RUNNING OUT OF POWER
  3. 3. 500 MILE EMAIL Connection timeout = 6 milliseconds Speed of light = 299 792 458 m/s Distance = 558 miles
  4. 4. HTTP1 HTTP2 TAKEAWAYS
  5. 5. WHY HTTP/2 MATTERS
  6. 6. HTTP/1.1
  7. 7. HTTP @TomAnthonySEO #brightonSEO
  8. 8. ANATOMY OF AN HTTP/1.1 REQUEST GET /anchorman/ HTTP/1.1 @TomAnthonySEO #brightonSEO
  9. 9. ANATOMY OF AN HTTP/1.1 REQUEST GET /anchorman/ HTTP/1.1 Host: www.ronburgundy.com @TomAnthonySEO #brightonSEO
  10. 10. ANATOMY OF AN HTTP/1.1 REQUEST GET /anchorman/ HTTP/1.1 Host: www.ronburgundy.com User-Agent: my-browser @TomAnthonySEO #brightonSEO
  11. 11. ANATOMY OF A RESPONSE HTTP/1.1 200 OK Content-Type: text/html HEADERS @TomAnthonySEO #brightonSEO
  12. 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. 13. 1 REQUEST IS FOR 1 FILE @TomAnthonySEO #brightonSEO
  14. 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. 15. TCP/IP & HTTP TCP is the road; the transport layer for HTTP. @TomAnthonySEO #brightonSEO
  16. 16. HTTP REQUESTS Outbound trucks carry an HTTP request. Request @TomAnthonySEO #brightonSEO
  17. 17. HTTP RESPONSES Returning trucks carry an HTTP response. Response @TomAnthonySEO #brightonSEO
  18. 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. 19. HTTPS With HTTPS the road is the same, but we drive through a tunnel. @TomAnthonySEO #brightonSEO
  20. 20. HTTPS REQUESTS ARE IDENTICAL TO HTTP The trucks in the tunnel are still exactly the same. @TomAnthonySEO #brightonSEO
  21. 21. HTTP sounds great & HTTPS is secure. Why change? ?
  22. 22. PROBLEM #1: SMALL REQUESTS/RESPONSES STILL TAKE TIME Even the fastest trucks can only go at the speed of light! @TomAnthonySEO #brightonSEO
  23. 23. LATENCY & ROUND TRIP TIMES Longer roads mean it takes longer for a response to come back. @TomAnthonySEO #brightonSEO
  24. 24. PROBLEM #2: PAGES MADE OF MANY FILES (MANY REQUESTS) @TomAnthonySEO #brightonSEO
  25. 25. NUMBER OF ASSETS ON PAGES HAS INCREASED @TomAnthonySEO #brightonSEO
  26. 26. OFTEN 50-100 SEPARATE HTTP REQUESTS @TomAnthonySEO #brightonSEO
  27. 27. PROBLEM #3) MOBILE CONNECTIONS INCREASE LATENCY @TomAnthonySEO #brightonSEO
  28. 28. What does all of this add up to? !
  29. 29. BROWSER COLLECTING A PAGE Imagine the browser wants to render a page. @TomAnthonySEO #brightonSEO
  30. 30. EVERY ROUND TRIP TAKES TIME 50ms to get to the server. @TomAnthonySEO #brightonSEO
  31. 31. EVERY ROUND TRIP TAKES TIME Server takes 50ms to make page. @TomAnthonySEO #brightonSEO
  32. 32. EVERY ROUND TRIP TAKES TIME 50ms to get back to the browser. @TomAnthonySEO #brightonSEO
  33. 33. HTML RESPONSE PROMPTS MORE ROUND TRIPS Once it has the HMTL the browser discovers it needs more files. @TomAnthonySEO #brightonSEO
  34. 34. 1 CONNECTION CAN HANDLE 1 REQUEST Every truck needs its own road. @TomAnthonySEO #brightonSEO
  35. 35. LUCKILY BROWSERS CAN HANDLE MULTIPLE CONNECTIONS We can have more roads and more trucks. @TomAnthonySEO #brightonSEO
  36. 36. BUT CONNECTIONS TAKE TIME TO OPEN Think of it as a steamroller laying down the road. @TomAnthonySEO #brightonSEO
  37. 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. 38. BROWSERS TYPICALLY OPEN ABOUT 6 CONNECTIONS MAX Opening more has diminishing returns, and other issues. @TomAnthonySEO #brightonSEO
  39. 39. THIS MEANS SOME REQUESTS HAVE TO WAIT Trucks have to queue line up for a road. @TomAnthonySEO #brightonSEO
  40. 40. BLOCKED REQUESTS Only 6 requests being run at a time. @TomAnthonySEO #brightonSEO
  41. 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. 42. THIS IS WHY PEOPLE MADE SPRITE SETS @TomAnthonySEO #brightonSEO
  43. 43. CDNS MOVE THINGS CLOSER & REDUCE LATENCY
  44. 44. HTTP/2 to the rescue!
  45. 45. MULTIPLEXING ALLOWS MANY REQUESTS PER CONNECTION Now multiple trucks can be on the road at once! @TomAnthonySEO #brightonSEO
  46. 46. HTTP/1.1 WATERFALL - BLOCKED REQUESTS @TomAnthonySEO #brightonSEO
  47. 47. HTTP/2 WATERFALL - NO BLOCKING @TomAnthonySEO #brightonSEO
  48. 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. 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. 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. 51. HTTP/2 RESPONSE CODES UNCHANGED 200 404301 @TomAnthonySEO #brightonSEO
  52. 52. HTTP2 ALLOWS ‘SERVER PUSH’ With Server Push, a single request is sent, but the server sends multiple responses. @TomAnthonySEO #brightonSEO
  53. 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. 54. HTTP2 REQUIRES HTTPS In order to get the better traffic management, you need a tunnel! @TomAnthonySEO #brightonSEO
  55. 55. How can I get HTTP/2? ?
  56. 56. Your devs don’t need to do anything! The server does all the work.
  57. 57. CDNS CAN DO IT FOR YOU! HTTP/2 between visitors and CDN HTTP/1.1 between CDN and Server
  58. 58. Does Google notice if I have HTTP/2? ?
  59. 59. GOOGLEBOT DOES NOT CRAWL https://moz.com/blog/challenging-googlebot-experiment @TomAnthonySEO #brightonSEO
  60. 60. THUS IT WON’T IMPROVE SCORES IN GSC Google’s WRS doesn’t use it at all, currently. @TomAnthonySEO #brightonSEO
  61. 61. BUT THAT ISN’T HOW GOOGLE EVALUATE SPEED @TomAnthonySEO #brightonSEO
  62. 62. CHROME USER EXPERIENCE REPORTS
  63. 63. HTTP/2 TAKEAWAYS
  64. 64. It can be a quick performance win. CDNs can make deployment ‘easy’.
  65. 65. HTTP/2 requires HTTPS*. Likely to see last holds outs migrating to HTTPS. (* in all major browsers)
  66. 66. Enable the ‘Protocol’ column.
  67. 67. SPDY was HTTP/2’s predecessor. It is being retired.
  68. 68. Chrome Extension: https://dis.tl/showhttp2
  69. 69. HTTP/1.1 and HTTP/2 exist together. Browsers will fall back to HTTP/1.1.
  70. 70. Moving to HTTP/2 is not a migration.
  71. 71. Googlebot won’t benefit, but Google will notice.
  72. 72. Thank you! @TomAnthonySEO

×